zoukankan      html  css  js  c++  java
  • 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()

  • 相关阅读:
    javascript使用jQuery加载CSV文件+ajax关闭异步
    流媒体服务器+EasyDarwin+EasyPusher+VLC+Red5+OBS+Unity+RTSP+RTMP+FFMPEG
    C#中的垃圾回收机制与delegate
    C#调用DLL报“试图加载格式不正确的程序”
    VS2017编译Poco1.9.0的64版本
    在线生成Cron表达式
    com.alibaba.fastjson.JSONException: For input string: "8200-12-31"
    spring定时任务
    org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection
    主键和索引
  • 原文地址:https://www.cnblogs.com/xiaoyaoweb/p/9284056.html
Copyright © 2011-2022 走看看