• echarts在一个折线/柱状图浮窗显示多条数据


    解决问题就在data里面,首先 data里面是可以json数组形式,如官方API上的 name:”“, value:”“,等 value是echart识别折线图的key值。
    1.来看数据格式

    data:[
    {
      value:"100",
      name:"张三",
      price:"100.00",
      number:"15"
    },
    {
      value:"100",
      name:"张三",
      price:"100.00",
      number:"15"
    }
    ]

    2.tooltip下的formatter函数里面

    //提示文字
    formatter:function(params){
      var tipText="";
      params.forEach(function(item,index){
        console.log(item);
        tipText+=item.data.name+item.data.price+item.data.number ;
      });
      return tipText;
    }

    3.完整代码

    var myChart = echarts.init(document.getElementById('flashData'));
          myChart.clear();
        option = {
            title: {
                text: '5采购商品数量趋势',//折线图的主标题
                left: '3%',
                textStyle:{  //折线图的标题文字样式
                  fontSize:16,
                  color:"#333",
                  fontWeight:'700'
                }
            },
            tooltip: {
                trigger: 'axis',
                //提示文字
                formatter:function(params){
                  var tipText="";
                  params.forEach(function(item,index){
                    console.log(item);
                    tipText+=item.data.name+item.data.price+item.data.number ;
                  });
                  return tipText;
                }
            },
            //图例组件:标题
            legend: {
              show:true,
                top: '0',
                left:'center',
                textStyle:{
                   //color:["#FE9548"],// 图例颜色
                },
                itemWidth: 30, //图例宽度
                itemHeight: 4, //图例高度度
                data: [{
                  name:'参加活动商品数', //图例名称
                  icon:'rect' //图例样式
                }],
                
            },
            xAxis: {
              type : 'category',
            axisLabel:{
                show: true,
              interval:0,//横轴间距
              rotate:20 ,//横轴标题旋转角度
                  },
              data: chartData.dataKey
            },
            yAxis: {
                type : 'value',
                splitLine :{    //网格线
                  lineStyle:{
                      //设置网格线类型 dotted:虚线  solid:实线
                      type:'dashed' 
                  },
                  show:true //隐藏或显示
                }
            },
            grid: {
                left: '3%',  //网格距离左侧边距
                right: '0%', //网格距离右侧边距
                bottom: '10%', //网格距离右侧边距
                containLabel: true
            },
            series: [
                {
                    name: '参加活动商品数',
                    type: 'line',
                    smooth: true, //是否以弧线展示折线
                    itemStyle : {
                      normal : {        
                        color:'#FE9548'  //折线折点颜色 
                        label: {
                           show: true, //自动显示数据
                           position: 'top', //在上方显示
                           textStyle: { //数值样式
                                color: '#FE9548',
                                fontSize: 12
                            }
                        },  
                        lineStyle:{
                            2  //折线宽度
                        } 
                      }    
                    },
                    data:[{
                        value:"100",
                        name:"张三",
                        price:"100.00",
                        number:"15"
                      },
                      {
                        value:"100",
                        name:"张三",
                        price:"100.00",
                        number:"15"
                      }]
                }
                
            ]
        
      };
      myChart.setOption(option);
      //图标大小跟随页面大小自动调整
      $(window).resize(function() { 
           myChart.resize();
       });
  • 相关阅读:
    SDN概述
    Linux企业运维人员必备150个命令汇总
    自动化运维工具puppet详解(二)
    自动化运维工具puppet详解(一)
    自动化运维工具[ansible详解三]
    ansible 常用模块
    自动化运维工具【ansible详解 二】
    A. Cinema Line
    A. Wrong Subtraction
    A. The number of positions
  • 原文地址:https://www.cnblogs.com/ts119/p/12155301.html
Copyright © 2020-2023  润新知