• 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("
    ");
                            // } 
                        },
                    }
                ],
                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()

  • 相关阅读:
    SQL Server CHARINDEX和PATINDEX详解
    MVC ListBoxFor raises “value cannot be null” exception
    jquery.uploadify动态传递表单元素
    C# 判断一字符串是否为合法数字(正则表达式)
    jquery 操作Listbox
    JQuery 操作 ListBox间移动和ListBox内移动
    jQuery获取Select选择的Text和 Value
    SQL 语句的执行效率
    JSON 序列化长度限制问题
    C#中利用FileSystemWatcher对单个文件内容的监视
  • 原文地址:https://www.cnblogs.com/xiaoyaoweb/p/9284056.html
Copyright © 2020-2023  润新知