zoukankan      html  css  js  c++  java
  • 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}}
    {b|{b}}
    {hr|}
    
    
    ',
            rich: {
                a: {
                    fontSize: 18,
                    lineHeight: 25,
                    align: 'left'
                },
                b: {
                    align: 'left',
                    fontSize: 12,
                    lineHeight: 12,
                    color: "#999999"
                },
                hr: { //下划线
                    borderColor: 'auto',
                     '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"
    }
  • 相关阅读:
    PAT (Advanced Level) Practice 1054 The Dominant Color (20 分)
    PAT (Advanced Level) Practice 1005 Spell It Right (20 分) (switch)
    PAT (Advanced Level) Practice 1006 Sign In and Sign Out (25 分) (排序)
    hdu 5114 Collision
    hdu4365 Palindrome graph
    单链表查找最大值、两个递增的链表合并并且去重
    蓝桥杯-最短路 (SPFA算法学习)
    蓝桥杯-最大最小公倍数
    Codeforces-470 div2 C题
    蓝桥杯-地宫取宝
  • 原文地址:https://www.cnblogs.com/jying/p/10340556.html
Copyright © 2011-2022 走看看