总结下图例不显示问题。百度都说legend要和series的name一直。是的,没毛病。
下面我总结下单折线图和多折线图的图例设置问题
先说单折线图的
// 指定图表的配置项和数据 var option = { legend: { show: true, right: '10%', top: 2, icon: 'rect', itemWidth: 10, itemHeight: 4, textStyle: { color: '#1a1a1a', fontSize: 12, }, name:"" }, series: [{ name: "", type: 'line', //图表类型 // data: [266, 200, 306, 100, 100, 280, 500, 500], data: [], symbol: 'none', }] } //页面加载调用接口在写。legend是接口获取的数据,是啥就写啥 myChart.setOption({ xAxis: { data: monthData.reverse() }, series: { name:legend, data: saleData.reverse() }, legend: { name: legend }, }); myChart.resize();
最开始我在配置图表数据中legend那块写的是data,但是死活不出来。后来去官网看了,里面是name,就改了name,没想到居然出来了。
下面是多条折现图例配置
var option = { legend: { show: true, right: '15%', top: 12, 300, height: 100, icon: 'rect', itemWidth: 10, itemHeight: 4, textStyle: { color: '#1a1a1a', fontSize: 12, }, data: "", }, series: { type: "line", name: "", data: [], }, } //然后是接口调用的方法中写 var name = []; //设置图标每条线名称 for (var i = 0; i < item.data.length; i++) { var obj = new Object(); obj.name = item.data[i].name.split("/")[item.data[i].name.split("/").length-1] name[i] = obj; } console.log(name); //折线图数据 var s_data = []; for (var j = 0; j < item.data.length; j++) { var saleNum=[]; item.data[j].sales_data.map((items) => { let mData = items/10000; saleNum.push(mData); }); var saleName=item.data[j].name.split("/")[item.data[j].name.split("/").length-1]; s_temp = { name: saleName, type: "line", symbol: 'none', data: saleNum }; s_data.push(s_temp) } // 柱状图 需要倒序数组 myChart.setOption({ xAxis: { data: monthData.reverse() }, legend: { data: name }, series: s_data }); myChart.resize();