echarts 技巧自己的一些記錄

1、不要輸出 window["echarts"].init(chart) ，會卡死。

let chart = document.getElementById("chart_id");//chartid為自定義charts的id
if (chart != null) {
　　let myChart = window["echarts"].init(chart);
　　//console.log("myChart = ", myChart)//千萬別輸出，會卡死
}

2、angularjs中綁定echarts，建議使用ng-repeat綁定數組，否則動態切換echarts會沒有效果。

<div id="chart_my" style="min-height: 300px;" class="sam-Echarts" ng-if="vm.charts!=null" ng-repeat="option in vm.charts" sam-Echarts="option">
</div>

// 為echarts自定義的directives -- samEcharts
export default class directive implements ng.IDirective {
    static $instance = (): ng.IDirective => {
        return new directive();
    };
    constructor() {
    }
    scope = {
        samEcharts: "=",
        samMychart: "="
    };
    restrict = 'AE';
    replace = true;
    link(scope: ng.IScope, element: ng.IRootElementService, attrs: any, ctrl: any) {
        if (scope.samEcharts) {
            var myChart = window["echarts"].init(element[0]);
            myChart.setOption(scope.samEcharts);
            window.addEventListener("resize", x => {
                myChart.resize();
            });
            scope.$on("onShrinkNav", x => {
                myChart.resize();
            });
            if (scope.samMychart) {
                scope.samMychart = myChart;
            }
        }
    };
}
class Controller {
    constructor() {
    }
}

 

3、富文本，a|表示自定義的標簽，|{b}|{c}表示文本內容，貌似c為name，b為value，a為series？

label: {
    normal: {
        formatter: '{a|{c}}\n{b|{b}}\n{hr|}\n\n\n',
        rich: {
            a: {
                fontSize: 18,
                lineHeight: 25,
                align: 'left'
            },
            b: {
                align: 'left',
                fontSize: 12,
                lineHeight: 12,
                color: "#999999"
            },
            hr: { //下划線
                borderColor: 'auto',
                width: '105%',
                borderWidth: 1,
                height: 0,
                margin: [10, 0]
            }
        }
    }
}

4、圖表內部可拖動：dataZoom的type=inside則內部可拖動，為slider則外部有滾動條

// 拖動
dataZoom: [
  {
     type: 'inside',
     // throttle: '50',
     minValueSpan: 5,
     maxValueSpan: 5,
     start: 50,
     end: 100
  }
]

// 底部拖動條
dataZoom: xData.length > 6 ? [{
    type: 'slider',
    show: true,
    xAxisIndex: [0],
    bottom: 55,
    left: 30,
    right: 30,
    backgroundColor: "#f4f4f4",  //組件的背景顏色
    fillerColor: "#CEF0FE",  //選中范圍的填充顏色。
    dataBackground: {
        lineStyle: {
            show: false,
            opacity: 0
        },
        areaStyle: {
            show: false,
            opacity: 0
        }
    },
    textStyle: {
        color: "transparent"
    },
    borderColor: "#fff",
    handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
    handleSize: '300%',
    // handleSize: 0,
    handleStyle: { color: "#CEF0FE" },
    height: "8px",
    // start: ydata.length < 10 ? 0 : Math.floor((ydata.length - 10) * 100 / ydata.length),
    start: (xData.length - 6) * 100 / xData.length,
    end: 100 //初始化滾動條
}] : false,

// 另外附加一個如果自定義了左右切換控件，可以自定義拖動位置
            let chart = document.getElementById("chart_id");//chartid為自定義charts的id
            if (chart != null) {
                let myChart = window["echarts"].init(chart);
                // //獲得圖表數據數組下標
                // let startValue = myChart.getModel().option.dataZoom[0].startValue;
                // let endValue = myChart.getModel().option.dataZoom[0].endValue;
                // //獲得起止位置百分比
                // var startPercent = myChart.getModel().option.dataZoom[0].start;
                let endPercent = myChart.getModel().option.dataZoom[0].end;
                // console.log("myChart = ", startPercent, endPercent, startValue, endValue);
                let option = this.charts[0];
                if (endPercent == 100) {
                    option.dataZoom[0].start = 0;
                    option.dataZoom[0].end = 49;//定義為50的話貌似有點偏差
                }
                else {
                    option.dataZoom[0].start = 50;
                    option.dataZoom[0].end = 100;
                }
                myChart.setOption(option, true);
            }

 5、x軸文字顯示不全的3種解決思路 https://blog.csdn.net/kebi007/article/details/68488694

 6、文字換行 https://www.cnblogs.com/zjjDaily/p/8022944.html

 7、自定義legendName 圖形樣式，基本的就看官網吧，博主用的echart版本是2.*，但調試時卻不能像官網那樣直接用沒有圓形的橫線代表折線，下圖是官網實例 ↓↓↓

在series中添加屬性 symbol:'none' 即可。但在官網3.0和最近新出的4.0版本卻也都不行，難道是因為主題？？？耗了大半天時間最終只好投降使用svg文字，然后設定自己的itemWidth和itemHeight。

icon: "path://M0 13v6c0 0.552 0.448 1 1 1h30c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1h-30c-0.552 0-1 0.448-1 1z"

效果如下 ↓↓↓

8、雙Y軸左右兩側對齊軸線。參考：https://www.jianshu.com/p/5123433d36f8

　 思路是設定最大值max和間隔區間 interval，因為interval包含小數時會被強行自適應導致不對齊，所以要將max設定為能被分割的條數整除，當然從圖表樣式來說這個也應該設定的比正常最大max再稍大一些，要是按照最大max則必然有一個節點是頂到max值的，所以博主給max加了相應區間范圍。

// 小編分了5段，所以設定能被5整除：

    if (_max % 5 != 0) {
        _max += 5 - (_max % 5);
    }
    _max = this.setMax(_max);

// setMax，設定比實際max再大半個度：

    setMax(max) {
        if (max > 5 && max < 10) {
            max = 10;
        }
        else if (max < 100 && max >= 10) {
            max += 5;
        }
        else if (max < 1000 && max >= 100) {
            max += 50;
        }
        else if (max < 10000 && max >= 1000) {
            max += 500;
        }
        else if (max < 100000 && max >= 10000) {
            max += 5000;
        }
        else if (max >= 100000) {
            max += 50000;
        }
        return max;
    }

 9、餅圖（或環圖）設置 label.formatter 在data個數較多時不推薦設置換行，否則會出界並與 legend 交叉。如下圖↓↓↓

 

10、設置字體大小不推薦使用字符串px，應使用數字number，否則會導致圖表兩側與頁邊距產生錯誤差。

textStyle: {
    color: "#A0A5B0",
    fontSize: 10,
    fontFamily: "PingFangSC-Regular"
}