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,4,1.8,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