echarts在一個折線/柱狀圖浮窗顯示多條數據

解決問題就在data裏面,首先 data裏面是能夠json數組形式,如官方API上的 name:」「, value:」「,等 value是echart識別折線圖的key值。
1.來看數據格式json

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.完整代碼echarts

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();
   });
相關文章
相關標籤/搜索