关于在 vue项目中对echarts图表的一些控制（及数组对象去重）

1.利用replace对后台返回的json数据做替换处理
(不管是多么复杂的数据结构，都可以利用这样的方法去全部匹配)

var json = [{'real-name':'lolo'},{'real-name':'abc'},{'real-name':'LILI'}]
var list = JSON.parse( JSON.stringify(json).replace(/real_name/g,'name').replace(/index/g,'data'));
console.log( list )
// [{'name':'lolo'},{'name':'abc'},{'name':'LILI'}]

2.数组对象去重
（如下图，从后台得到这样一个json数据）

var list =
JSON.parse(JSON.stringify(json.result.teacher_num).replace(/real_name/g,'name').replace(/index/g,'data'));
var hash = {};
var i = 0;
var res = [];
list.forEach(function(item) {
   item.data = [item.num,item.data]
   var name = item.name;
   var teacher_uid = item.teacher_uid;
   hash[teacher_uid] ? res[hash[teacher_uid] - 1].data.push(item.data) : hash[teacher_uid] = ++i &&res.push({
       data:[item.data],
       name: name,
       teacher_uid:item.teacher_uid,
       type: 'line',
       show:true
   })
 });
console.log(res)
// [
    {
        data:[[1,6],[2,7],[2,8],[2,9],[2,10]],
        name:'全部',
        show:true,
        teacher_uid:0,
        type:'line'
    },
    {
        data:[[1,6],[2,7],[2,8],[2,9],[2,10]],
        name:'杨剑',
        show:true,
        teacher_uid:2781716,
        type:'line'
    }
]

3.控制 echarts 图表里面的 legend 线条的展示、影藏状态

  //第一步，我们在vue项目中，拟定一个方法来绘制图表，将echarst里面的option 和mychart 定义为全局变量，方便后期数据更改的时候重新调用方法改变变量，从而重新绘制图表

 getDistribution:function(){
     this.mychart = echarts.init(document.getElementById('distribution'));    //在vue的deta定义全局
     this.option = {                                                  //即：mychart=null,option=null
         backgroundColor: '#fff',
         tooltip: {
             trigger: 'axis',
             axisPointer: { type: 'cross'},
             show:true
         },
         legend: {
             show:true, orient:'horizontal',borderColor:'transparent',
             data:this.distributionList,
             y: 'bottom',
             selected:{}
         },
         xAxis: {
             data: this.column_list, 
             show:true,
             name:'分数区间',
         },
         yAxis: {
             type: 'value', show:true,name:'份数'
         },
         series:this.distributionLine,
     };
     this.mychart.setOption(this.option);
 },

//第二步，当某个数据发生改变
var obj = {name:'杨剑',show:true}
this.option.legend.selected[obj.name] = obj.show;
this.mychart.setOption( this.option )
this.getDistribution()  //调用期初定义的方法，重新绘制

4.在vue项目中，直接全局引入 echarts 是非常大的，也会给数据加载带来一定的困扰，所以我们采用 按需引入的方式来控制代码的体积：

//第一步：在vue项目的main.js入口文件中这样写：
//echarts 按需引入，line线性折线
require('echarts/lib/chart/line');
require("echarts/lib/component/legend");

//第二步，在需要用到echarts图表的地方这样写：
var echarts = require('echarts/lib/echarts');   //引入 echarts
var myCharts  = echarts.init(document.getElementById('distribution'));
var option  = { ......}
myCharts.setOption( option )

5.echarts自定义tooltip提示框内容

tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross'},
    show:true,
    formatter:function (params) {
        var res='<div><p>所在区间：'+params[0].name+'</p></div>'
        for(var i=0;i<params.length;i++){
            res+=`<p>${params[i].seriesName}:${params[i].value}</p>`
        }
        return res;
    }
},

6.设置X轴的数据超出多少字自动换行

 axisLabel: {
    formatter : function(params){
        var newParamsName = "";//拼接加\n返回的类目项
        var paramsNameNumber = params.length;
        var provideNumber = 8;//每项显示文字个数
        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
        if (paramsNameNumber > provideNumber) {
            for (var p = 0; p < rowNumber; p++) {
                var tempStr = "";//每次截取的字符串
                var start = p * provideNumber;//开始截取的位置
                var end = start + provideNumber;//结束截取的位置
                if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                } else {
                    tempStr = params.substring(start, end) + "\n";
                }
                newParamsName += tempStr;
            }

        } else {
            newParamsName = params;
        }
        return newParamsName
    },
    interval : 0,
    showMinLabel: true,
},