本文包含在vue项目中如何使用echarts，以及项目中经常会遇到的图表样式的写法
https://echarts.baidu.com/echarts2/doc/example.html
（echart实例，包含饼状图、柱状图等等图表例子，你可以找到你所需要的图表类型）
https://echarts.baidu.com/echarts2/doc/doc.html
（echarts 使用文档，里面有很多属性和方法可供参考哦）
1.安装echarts包
cnpm install echarts --save
2.引入到项目中
a.全局引入 （在main.js中引入）
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
这种方法是直接绑定在vue实例上，所以在项目中任何页面，直接 this.$echarts 即可
b.局部引入（在所需页面引入）
import echarts from 'echarts'
3.初始化echarts
a.首先在你需要echarts的页面中得创建一个dom元素
<div id="myCharts" ref="myCharts"></div>
b.其次，在mounted中初始化echarts( 不能写在created中哦)（ 以下例子为折线图）
mounted(){
以下三步即可完成echarts的初始化使用,代码注释的详解别忘了看看
1. const myCharts = this.$echarts.init(this.$refs.myCharts);
2. let options = {
title: {
text: '未来一周气温变化', //图表顶部的标题
subtext: '纯属虚构' //副标题
},
tooltip: { //鼠标悬浮框的提示文字
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
xAxis : [{ //x轴坐标数据
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}],
yAxis : [{ //y轴坐标数据
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}],
series: [ //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
{
name:"最高气温",
type: "line", //pie->饼状图 line->折线图 bar->柱状图
data:[11, 11, 15, 13, 12, 13, 10],
},
{
name:"最低气温",
type: "line", //pie->饼状图 line->折线图 bar->柱状图
data:[1, -2, 2, 5, 3, 2, 0],
}
]}
3. myCharts.setOption(options);
}
4.效果图
折线图
echarts中常用方法 https://www.jianshu.com/p/4f459d16e8b4
好好学习，天天向上
