Vue中使用echarts实现常用图表总结

一、使用echarts前准备

1、安装echarts

控制台输入安装echarts

npm install echarts --save

2、vue main.js中注册

import echarts from 'echarts' //引入echarts

二、Vue组件中使用

1、先找一个要放置图表的dom节点

<template> <div class="hygrometer" ref="hygrometer"></div> </template>

2、对echarts图表进行初始化

// vue中获取到dom节点并对echarts图表初始化，vue中的$refs相当于原生js中的id let hygrometer = this.$echarts.init(this.$refs.hygrometer)

3、编写图表option配置

let option = { 图表的各项配置 }

4、使用刚指定的配置项option显示图表

hygrometer.setOption(option)

三、常用图表使用总结

折线图：Vue中使用echarts实现折线图 柱状图：Vue中使用echarts实现柱状图（双柱） 饼图： 温度计：Vue中使用echarts实现温度计 水球图：Vue中使用echarts实现水球图 仪表盘：Vue中使用echarts实现仪表盘