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();