这几天公司里边有一个项目,叫做日控制台,该项目是在webview下的一个webapp,使用vue构建,项目中要求使用许多自定义的图表。考察了许多图表组件之后,发现echarts是所有表库中,最灵活,特效最好看的一种。
一、构建基础公共组件
1. 实现基础功能
在echart官网上搜索到,如何使用
# 1. 获取一个用于挂在 echarts 的 DOM 元素
let $echartsDOM = document.getElementById('echarts-dom')
# 2. 初始化
let myEcharts = echarts.init($echartsDOM)
# 3. 设置配置项
let option = {...}
# 4. 为 echarts 指定配置
myEcharts.setOption(option)
使用echart的步骤也就这几部,就是先获取到承载echart实例的dom实例,然后调用init()方法初始化图标实例,最后调用setOption()方法传入配置项
这几步都要在vue的mounted方法下实现.
mounted() {
let $echartsDOM = document.getElementById('echarts-dom')
let myEcharts = echarts.init($echartsDOM)
let option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
myEcharts.setOption(option)
}
}
注:在 Vue 中,首先我们需要使用 import echarts from 'echarts' 以引入 echarts。
二、组件化
思路很简单,就是将业务上用到的图表,比如柱状图、折线图,通通封装成组件,然后再main app文件中调用,通过分析,可以通过传props,来改变setOption()方法中的对象,达到封装不同图表组件的目的。
<ocEcharts class="echarts-container" :options="ocoptions" />
将之前的options转移到main app中的data对象之中。
注:echarts图表要求承载的容器具有固定的宽高才能正常显示
.echarts-container{
width: 100%;
height: 20rem;
}