echarts設置了，圖例還是不顯示問題

 

echrts案例網址

https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all

總結下圖例不顯示問題。百度都說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,
            width: 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();