Echarts功能碎片化整理

Echarts功能碎片化整理

  本文主要是把之前项目里用到的echarts功能进行一个整理，如果大家需要用到echarts，可以参考本篇文章的一些功能使用，能够节省一些时间去做更有意义的事情。(注：由于系统中的echarts都是在后台进行数据封装之后，到前台进行展示的，所以有些截图效果，我只能使用官网提供的例子进行举例)

---

1、曲线中的数据标记（markPoint）

• 应用场景：在一组数据中，需要特别标出一些点作为重点展示。

  series : [
        {
            name:'最高气温',
            type:'line',
            data:[11, 6,3, 13, 12, 13, 10],
            markPoint : {
                data : [
                  {
                    name:'哈哈哈',
                    value:'10',
                    xAxis:'周三',//控制标注在x轴方向的位置
                    yAxis:'3'//控制标注在y轴方向的位置
                  }
                ],
               symbolSize :50//控制标注大小
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]

• 应用场景：输入一组数据，自动标记最大最小值，并且自动画出平均线

 series : [
        {
            name:'最高气温',
            type:'line',
            data:[11, 6,3, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]

2、自定义鼠标悬浮提示框内容格式及位置控制

• 应用场景：在提示框内容较多或有其它特殊需求，需要自定义提示框内容，以及展示位置。

            tooltip : {
                    trigger: 'axis',
                    formatter: function(params) {//可以在这里自定义提示框内容
                        var res = params[0].name+'<br/>';
                        for(var i=0;i<params.length;i++){
                            if(i%2==1){
                                res+=params[i].seriesName+' : '+params[i].data+'<br/>';
                            }else{
                                res+=params[i].seriesName+' : '+params[i].data+'&nbsp&nbsp&nbsp';
                            }
                        }
                        return res;  
                    },
                    position: function (point, params, dom, rect, size) {
                         // 固定在顶部
                         return [point[0]*0.7, '10%'];//这里可以控制提示框的位置
                    }
            },

3、字体大小颜色等样式控制

• 应用场景：不同的系统对字体及其颜色可能有所不同

            title : {
                text: '清洗前',
                subtext: '',
                textStyle:{
                    fontSize: 14
                    fontWeight: 'bolder'
                    color: '#333'
                }
             },
             legend: {
                    data:chartMap.legendData[0],
                    textStyle : {
                        color : 'white'
                    },
             },
             dataZoom : {
                    textStyle:{
                        color : 'white'
                    },
                    show : true,
                    realtime : true,
                    start : 0,
                    end : 100
            },
            axisLabel : {
                    show : true,
                    textStyle : {
                        color : 'white',
                        fontFamily : 'sans-serif'
                    }
            },