echarts 技巧自己的一些记录

let chart = document.getElementById("chart_id");//chartid为自定义charts的id
if (chart != null) {
　　let myChart = window["echarts"].init(chart);
　　//console.log("myChart = ",myChart)//千万别输出，会卡死
}

<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() {
    }
}

label: {
    normal: {
        formatter: ‘{a|{c}}n{b|{b}}n{hr|}nnn‘,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]
            }
        }
    }
}

// 拖动
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);
            }