2018-01-16

Vue项目中对EChart的应用

EChart是目前一个应用较为广泛的图表工具，可高度个性化定制的数据可视化图表。
由于项目中需要用到的图表比较多，这里简单的总结一下，使用面向对象的方法，定义chart类，来初始化&更新图表，不喜欢面向对象封装的，可以直接看最下面。

安装

1	npm install echarts --save

定义chart类

创建chart.js，这里要注意的是，必须引入所有需要用到的echart模块，可以按需引入的模块列表见‘EChart’

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar'；
…… 

export default class Chart{
    constructor(el){
        this.chart = echarts.init(el);	//初始化，传入dom对象
        this.options = {};	//配置项
    }

    show(op){
        this.options = _.assignIn(this.defaults, op);
        this.chart.clear();
        this.chart.setOption(this.options);
        return this;
    }

    resize(){	
        let chart = this.chart;
        window.onresize = function(){
            chart.resize();
        }
        return this;
    }
}

调用resize方法可以实现，随窗口改变刷新图表大小，在使用时需要保证图表自身是适应大小的，而不是固定的

应用chart创建图表类

import Chart from './Chart';

export default class DemoChart extends Chart{
    constructor(el, data) {	//dom对象和数据
        super(el);
        this.data = data;
    }

    get defaults() {
        return {
            //配置项options
        }
    }
}

关于配置项options，不过多介绍，详见‘EChart配置项手册’

实例图表对象

<div ref="chartInstance" class="w-100 h-100"></div>
……
import DemoChart from './DemoChart';

methods:{
    initChart(){
        let instance = this.$refs.chartInstance;
        let chart = new DemoChart(instance, this.data);
        chart.show().resize();
    }
}

这样一来一个实例化的chart就可以成功显示了，当我们需要更多chart时，只需要继续创建图标类，更改配置项就可以方便的添加更多种类的chart了。

简单粗暴的解决方法

什么？面向对象？EXM？好吧，我也发现了，这么写虽然封装的比较完善，但是对于需求较少的项目，显得太过复杂，接下来说一下直接用的方式吧。

import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line'
// 引入各种需要的模块

export function initChart (el, data) {
    let myChart = echarts.init(el);
    setOption(myChart, data);
    return myChart;
}

export function setOption (chart, data) {
    let options = getOptions(data);
    chart.setOption(options)
}

function getOptions (data) {
    return {
        // options
    }
}

这里将init方法跟setOption分开写，是为了在数据变化时重新设置options，当然，直接再次初始化chart也可以。
getOptions方法用来整理数据，由于项目只用到了一个chart，所以我直接写了一起，需要使用较多次的话，传参或者从其他文件引入吧。
应用chart:

<div ref="chartContent"></div>

import { initChart, setOption } from '../../assets/js/chart';

if (!this.chart) {
    this.chart = initChart(this.$refs.chartContent, this.report);
} else {
    setOption(this.chart, this.report)
}

本文标题:Vue项目中对EChart的应用

文章作者:Li Yu

发布时间:2018-01-16, 15:05:17

最后更新:2019-08-04, 19:02:00

原始链接:https://www.liyu.fun/2018/01/16/echart/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。