echarts legend初始化不顯示 數據為空清除echarts數據 更改提示框的提示文字

legend.name 與 series.name 設置不一致所導致
另外要引入legend模塊，按需引入相關模塊

// 引入 ECharts 主模塊

import echarts from 'echarts/lib/echarts';

// 引入柱狀圖

import 'echarts/lib/chart/bar';

// 引入提示框和標題組件

import 'echarts/lib/component/tooltip';

import 'echarts/lib/component/title';

import 'echarts/lib/component/legend';

 

 

想要知道 echarts中回調函數的格式，就可以使用 JSON.stringify(參數名)的形式來具體看該參數到底是數組還是對象，看它的結構有利於明白自己想要獲取哪些值，這是一個很好的辦法。

tooltip : {
                // trigger: 'axis',  //axis 顯示全部
                trigger: 'axis',  
                axisPointer : {            // 坐標軸指示器，坐標軸觸發有效
                    type : 'shadow'        // 默認為直線，可選為：'line' | 'shadow'
                },
                showDelay : 0,  //顯示延遲
                // show:false
                //trigger為item的時候返回
                // formatter:function(params){
                //     console.log(JSON.stringify(params))
                //     return params.name+'<br>'+params.seriesName+':'+params.value
                // },
                //trigger為axis的時候返回
                formatter:function(params){
                    console.log(JSON.stringify(params))
                    var str='';
                    params.forEach((item,index)=>{
                        if(item.value>0){
                            str+='&#12288;'+item.seriesName+':'+item.value+'</br>'
                        }
                    })
                    return params[0].name+'</br>'+str
                }
            },
            legend: {
                data:legendArray,
                show:true,
                // orient: 'vertical',
                // left: 'left',
                // data: ['A', 'B'],
                // formatter: function(name) {
                //     console.log(name);
                //     return name ;
                //     // if(name === 'A') {
                //     //     return name + "："+"350(數值)";
                //     // } 
                // }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                top:'10%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : xArray,
                    "axisLabel":{
                        interval: 0,
                        rotate:45,
                        //這里是豎着顯示文字
                        // formatter:function(value){
                        //     return value.split("").join("\n");
                        // } 
                    },
                }
            ],
            yAxis : [ 
                {type : 'value' }
            ],
            series:newSeries,
               // series : [
            //     {
            //         name:'A',
            //         type:'bar',
            //         //  datasetIndex: 0,
            //         stack: '廣告',
            //         data:[120,0,0, 134, 90, 230, 210,10],
            //         itemStyle:{ 
            //            normal:{
            //     color:colorsList[index],
            //     label:{
            //         show:true,
            //         // position:'inside',
            //         position:'insideBottom',
            //         formatter:function(param){
            //             if(param.value>0){
            //                     return param.value
            //             }else{
            //                 return ''
            //             }
            //         },
            //         textStyle:{fontSize:18}
            //     }
            // }
            //     },
            //     {
            //         name:'B',
            //         type:'bar',
            //         stack: '廣告',
            //         // datasetIndex: 0,
            //         data:[220,0, 191, 234, 290, 330, 310,20]
            //     },
            //     {
            //         name:'A',
            //         type:'bar',
            //         // datasetIndex: 0,
            //         stack: '廣告',
            //         data:[0, 232, 0, 154, 190, 330, 410,40]
            //     },
            //     {
            //         name:'D',
            //         type:'bar',
            //         // datasetIndex: 0,
            //         stack: '廣告',
            //         data:[0, 232, 201, 154, 190, 330, 410,80]
            //     },
            // ],

  數據為空清除echarts數據
mychart.clear()