导航
导航
文章目录
  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的可视化

2017.07.09 hzzly

好久没有更新博客了，但我并没有偷懒哦。因为进入了公司实习，需要熟悉项目需求以及技术栈，公司技术栈用的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