关于在 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 )

关于在 vue项目中对echarts图表的一些控制

猜你喜欢