一、Vue中使用echarts
echarts是一个国产的、十分优秀的可视化库，针对于大量数据处理和可视化具十分强大的支撑力。下面准备边学习echarts的基础知识，边配合vue来封装相应的更好的，更完美的组件。vue我也是刚刚学习，还很生疏。
- vue-cli创建项目并初次使用echarts
vue create echarts-vue
//创建一个vue项目
- 安装echarts（这里建议使用npm安装，而且要指定echarts的版本号，最好不要使用最新的echarts的版本。）
npm install echarts@4.9.0 --save
尽量安装@4.90以下版本的echarts，这样的才不会遇到很多奇奇怪怪的错误信息。
- 安装好echarts之后，需要使用先引入echarts，并使用echarts。（main.js中配置）
import echarts from 'echarts'
//先引用在使用
Vue.use(echarts)
- 组件化的思想使用echarts
在vue项目的src/components/文件夹下创建echarts文件夹，以后就可以在这里面去封装自己的echarts私有组件了。
具体的组件文件的代码如下，配合着代码中的注释来理解在Vue项目中使用echarts：
<template>
<div>
// 1.准备好一个放着echarts图表的容器，一定要有宽度和高度，否则看不到渲染的图形
<div id="main"></div>
</div>
</template>
<script>
//2.引用echarts库
import echarts from 'echarts'
export default {
data() {
return {
//在data中去设置图标的数据
students:['小明','小红','小黄','小蓝','小绿'],
fenshu: [88,64,98,88,92]
}
},
mounted() {
//先初始化echarts，得到一个echarts对象
//创建一个echarts对象的方法是echarts中的init()方法
let mycharts = echarts.init(document.getElementById("main"));//初始化echarts对象
//创建并初始化一个echarts的配置项对象option，所有的echarts图标的数据样式都是
//来自于这个option对象的配置，其实这个option可以写在data中，或者通过父组件等其他
//组件传值过来使用。
const option = {
//这个是echarts对象中的X轴坐标组件
//type的属性值category代表着类目，就是横轴上面的表示事物
//data表示类目对应的数据
xAxis: {
type: 'category',
data: this.students
},
//echarts对象的Y轴组件
//type同样表示y轴要表示的数据来源和类型是什么
yAxis: {
type: "value",
},
//series是系列的意思，代表着整个图标的核心，具体表现在数据上和整个图标的类型和样式上
series: [
{
name: '数学', //表示折线图表示的是英语的成绩
type: 'line', //type表示的是这组数据的用什么类型的图标去渲染，很明显是折线图
data: this.fenshu //表示折线图的数据来源是data中的fenshu
},{
name: '英语',//表示的英语科目使用的是柱状图
type: 'bar', //同理，该图标既用了折线图又用了柱状图
data: this.fenshu //数据来源相同，表示数学和英语成绩是一样的，
//当然现实中是不可能的。
}
]
}
//最后在使用echarts对象来设置提前写好的数据，来展现图标
mycharts.setOption(option);
},
}
</script>
<style scoped>
#main{
width: 500px;
height: 500px;
}
</style>
echarts对象的初始化和最后的echarts对象的数据的设置都是在钩子函数mounted中去设置的，这样不会因为加载的问题导致渲染和试图的不一致。最后使用命令：
在App.vue中去使用你封装的组件，然后再终端中运行下面命令：
npm run serve
运行程序并查看程序运行结果！
