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

Posted 红尘莫藏

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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:{
                        width: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();
   });

以上是关于echarts在一个折线/柱状图浮窗显示多条数据的主要内容,如果未能解决你的问题,请参考以下文章

在vue中使用Echarts绘制叠堆折线面积图(可切换叠堆柱状图)

在vue里面引入echarts(柱状图,饼图,折线图))

echarts图表——折线图&饼图

echarts怎么动态添加多条柱形图

修改echarts的option配置后,图不能刷新

echarts的示例一:柱状(条形)图折线(面积)图