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

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}%',
     }