本文为个人近期学习总结，若有错误之处，欢迎指出！
Echarts在vue2中的基础使用
- 一、简单介绍
- 二、基本使用（vue2中）
- 1.npm安装
- 2.main.js引入
- 3.使用步骤
- (1)准备带有宽高的DOM容器；
- (2)初始化echarts实例；
- (3)定义图表的配置项和数据；
- (4)为echarts实例设置配置项和数据。
一、简单介绍
一个基于 JavaScript 的开源可视化图表库，支持用户交互和个性化定制，提供折线图、柱状图、饼图、散点图、关系图、树图、地图、仪表盘等各种图表类型，功能非常强大。
这里提供几个官网相关地址：
官网地址：https://echarts.apache.org/zh/index.html
官网使用手册：https://echarts.apache.org/handbook/zh/get-started/
官网图表示例地址：https://echarts.apache.org/examples/zh/index.html，
图表配置项手册地址：https://echarts.apache.org/zh/option.html#title，
图表API地址：https://echarts.apache.org/zh/api.html#echarts
在绘制具体图表时，可在配置项里查阅各个属性和其代表含义；涉及图形交互时，可查看API的使用。
再推荐俩关于echarts的社区网站，可参考学习（逛一逛，你一定会惊叹网友的智慧，个人也会受益匪浅哦_）。
网站一：https://www.makeapie.cn/echarts
网站二：https://echarts.zhangmuchen.top/#/index
二、基本使用（vue2中）
1.npm安装
npm install echarts --save
这里个人安装的版本是5.4.3
所以，安装命令为：npm install echarts@5.4.3 --save
注意：不同版本的echarts，部分属性的书写格式可能存在差异。后续更文中图表的属性写法，皆是5.4.3版本。
2.main.js引入
// 引入Echarts
import * as echarts from 'echarts'// 将ECharts实例化函数设为vue的原型函数，便于全局访问
Vue.prototype.$echarts = echarts
组件内使用时，用this.$echarts.xxx。
3.使用步骤
主要步骤分为4步：
(1)准备带有宽高的DOM容器；
<div ref="chartArea" :style="{width: '300px',height: '100px'}" />
(2)初始化echarts实例；
let myChart = this.$echarts.init(this.$refs.chartArea)
(3)定义图表的配置项和数据；
常规配置如下：
option={color:[],//系列(如：柱子、折线、饼块)的颜色（若不写，则取默认值）tooltip:{},// 悬浮框，会在鼠标悬停或者触摸某个数据点时显示legend:{},//图例grid:{},//直角坐标系绘图网格xAxis:[],//x轴yAxis:[],//y轴//系列图表series:[{name: '销量', // 系列名称type: 'bar', // 系列图表类型data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容}]
}
注意：
①这些配置属性中，color、xAxis、yAxis、series属性是数组（color里的元素是字符串，而xAxis、yAxis、series里的元素是对象），其它属性是对象；
②若series系列中的对象设置了name属性值，则legend.data可以不必写，只需写其它相关图例配置。
各个配置属性对应图像中的位置如下：
(4)为echarts实例设置配置项和数据。
myChart.setOption(this.option, true)
PS：绘图时，让图表跟随屏幕自适应
window.addEventListener('resize', () => {myChart.resize()
})
好了，echarts在vue2项目中的使用基础就讲完了，后面咱就可以逐步开始绘制具体的各类图表啦！
