解決問題就在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(); });