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

posted @ 2018-07-09 15:32  红苹果学园  阅读(10144)  评论(0编辑  收藏  举报