百度echarts常用问题解决代码（js控制图例echarts）

来源：互联网发布：淘宝直通车如何开通编辑：程序博客网时间：2024/05/14 07:33

1.使用tab，图表宽度变小

  $("#li2" + result.name).css('height', $("#li2n1").height());  $("#li2" + result.name).css('width', window.innerWidth * 0.93);

2.tooltip鼠标显示提示加颜色

formatter: function(params) {    var result = '';    params.forEach(function (item) {        result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';    });    return result;}

3.点击图例跳转

  myChart.on('click', function (params) {                var citys ={json字符串};                citys.forEach(function (e) {                    if (e.DepartmentName == params.name) {                        window.location.href = "/sanying_data/city_lpzb?ParentKeyId=" + e.DepartmentKeyId;                    }                })            });

4.格式化金钱逗号隔开

    function toThousands(str) {        var newStr = "";        var count = 0;        if(str.indexOf(".")==-1){            for(var i=str.length-1;i>=0;i--){                if(count % 3 == 0 && count != 0){                    newStr = str.charAt(i) + "," + newStr;                }else{                    newStr = str.charAt(i) + newStr;                }                count++;            }//                str = newStr + ".00"; //自动补小数点后两位            return newStr;        }        else        {            for(var i = str.indexOf(".")-1;i>=0;i--){                if(count % 3 == 0 && count != 0){                    newStr = str.charAt(i) + "," + newStr;                }else{                    newStr = str.charAt(i) + newStr; //逐个字符相接起来                }                count++;            }            str = newStr + (str + "00").substr((str + "00").indexOf("."),3);            return str;        }    }

5.showTip 打开页面提示就显示一会就自动关闭

  setTimeout(function () {                        myChartPreservationbaoben.dispatchAction({                            type: 'showTip',                            seriesIndex:0,                            dataIndex:0,                            // 可选，数据名称，在有 dataIndex 的时候忽略                            name: 1,                            position: ['80%', '50%']                        });                    },1000);                }

6.格式化百分比

 function initnum2(str) {        if (str == undefined) {            return 0;        } else {            return (str * 100).toFixed(2) + "%";        }    }

7.js控制图例

这里写图片描述

              <input type="button" onclick="ck_legend(this)" ck="true" style="width: 50px"  value="实勘率">  function ck_legend(obj) {        var ck =$(obj).attr("ck");        $(obj).attr("ck",ck=="true"?"false":"true")        $(".chartsbox").each(function () {            var echaertobj= echarts.getInstanceByDom(document.getElementById($(this).attr("id")))            if(ck=="true"){                echaertobj.dispatchAction({                    type: 'legendUnSelect',                    // 图例名称                    name: $(obj).val()                })            }else{                echaertobj.dispatchAction({                    type: 'legendSelect',                    // 图例名称                    name: $(obj).val()                })            }        })    }

显示加前面带颜色的小圆圈

          tooltip: {                            trigger: 'axis',                            axisPointer: { // 坐标轴指示器，坐标轴触发有效                                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'                            },                            formatter: function (params) {                                var html="";                                if(params.length>1){                                    html=params[0].axisValue+"</br>"                                }                                params.forEach(function (item,i) {                                    html+= '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+item.color+'"></span>' +                                            item.seriesName+"："+item.value+'%</br>'                                })                                return html                            }                        },tooltip: {   trigger: 'axis',       formatter: '{b}<br /><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#c23531"></span>{a0}:{c0}%',     }

阅读全文

0 0