导航
导航
文章目录
  1. 一、配方
  2. 二、参考案例
  3. 三、实践
    1. 3.1安装 echarts
    2. 3.2vue dom 结构
    3. 3.3在vue中引入echarts
      1. 3.3.1全部引入
      2. 3.3.2按需引入
      3. 3.3.3动态改变ECharts的配置(option)
    4. 3.4结果
  4. 四、参考

vue与echarts的可视化

好久没有更新博客了,但我并没有偷懒哦。因为进入了公司实习,需要熟悉项目需求以及技术栈,公司技术栈用的react与dva,所以需要现学现卖。趁着周末写写vue,美滋滋,哈哈哈。

一、配方

  • vue
  • echarts

二、参考案例

三、实践

3.1安装 echarts

1
npm install echarts --save

3.2vue dom 结构

1
<div id="charts" style="height:300px;width:300px"></div>

3.3在vue中引入echarts

因为ECharts初始化必须绑定dom,所以我们只能在vue的mounted生命周期里初始化。

3.3.1全部引入

可以直接在项目代码中 require(‘echarts’) 或 import 得到 ECharts,我这里通过es6的import来引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import echarts from 'echarts'
mounted () {
this.initChart()
},
methods: {
initChart () {
this.chart = echarts.init(document.getElementById('charts'))
let option = {
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
this.chart.setOption(option)
}
}

3.3.2按需引入

默认使用 require(‘echarts’) 得到的是已经加载了所有图表和组件的 ECharts 包,因此体积会比较大,如果在项目中对体积要求比较苛刻,也可以只按需引入需要的模块。

例如上面示例代码中只用到了柱状图,提示框和标题组件,因此在引入的时候也只需要引入这些模块,可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。

1
2
3
4
5
6
7
8
9
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入柱状图
import 'echarts/lib/chart/bar'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
// 后面的跟上面的就一样了

3.3.3动态改变ECharts的配置(option)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//第一种 watch options变化 利用vue的深度 watcher,options一有变化就重新setOption
watch: {
options: {
handler(options) {
this.chart.setOption(this.options)
},
deep: true
},
}
//第二种 只watch 数据的变化 只有数据变化时触发ECharts
watch: {
seriesData(val) {
this.setOptions({series:val})
}
}

3.4结果

vue-echarts
到这我们在页面上就可以显示图表了,实现可视化数据,是不是很酷炫。

四、参考

在 webpack 中使用 ECharts

支持一下
谢谢你请我吃糖果