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实现仪表盘

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~