1.安装echarts插件
npm install echarts -S
2.引入
可以选择全局引入也可以选择局部引入
①全局引入就是在main.js中
import * as echarts from 'echarts'
还可以在vue实例上添加$echarts属性
Vue.prototype.$echarts=echarts
如果添加了，那么之后在方法中初始化时，需要通过
let myChart = this.$echarts.init(DOM)
②局部引入就通过在单个使用的组件中单独使用 import * as echarts from 'echarts' 引入
初始化就通过
let myChart = echarts.init(DOM)
（注意：以上还有以下操作在methods中初始化的方法中定义，并且要在mounted中调用，也就是DOM挂载之后进行图表的渲染）
3.配置option项
主要的配置项有以下几个：tooltip提示工具、grid网格、legend图例、dataZoom区域缩放、yAxis Y轴、xAxis X轴、series指定图的类型
4.绑定配置项
通过setOption()为选定区域绑定配置项
myChart.setOption(option)
5.调用
在mounted钩子函数中调用这个函数
6.应用
在实际应用中一个图表可能会在多处使用，但是渲染的数据却也是不同的，这时我们更多的是将单个图表单独封装成带有动态变量的可以进行复用的组件
也就是在props中定义自定义属性，完成数据从父组件向子组件的传递
在子组件中固定的属性只需要书写定值在子组件中即可，那些不确定的数值以及配置，则由变量获取，通通定义在一个专门用来接收父组件数据的变量中，然后通过 对象.属性 的方法给对应的配置项赋值
对于大量配置项都是动态的状况，例如series中可能会有很多需要从父组件传递过来的数据，但是，series本身就是一个复杂数据类型的数据结构，直接进行对象.属性的方法取值很明显是不方便的，这时可以定义一个函数，它的返回值就是series的值，形参对应的就是传递过来变量的每一项数据，这些数据要提前从原始数据中解构出来，其实原理还是一样的，就是相当于脱了一层壳子，如下：
以下代码有几个需要注意的点：
①这里是通过this.$echarts进行图表的初始化操作，所以这里echarts是全局引入的
②获取DOM的方法是通过this.$refs,也就是说，需要在模板中渲染图表的地方添加ref属性
③echartsData是自定义属性，用来接收父组件传递过来的数值, series是传过来的其中一个属性，在子组件用新的对象变量接收
④在mounted钩子函数中调用初始化函数
⑤从父组件接收过来的数据需要在watch函数中进行侦听（要深度侦听），保证跟随数据的变化重新渲染图表
mounted () { this.initChart( ) } // 调用初始化图表时机
watch:{
echartsData:{ handler( newVal,oldVal ){
this.echartsData=newVal
this.initChart ( ) }, deep:true } } // 侦听数据的变化，从新赋值渲染图表
methods：{
// 初始化图表，这里着重体现series的配置理念
initChart(){
let seriesList=[ ]; // 用来接收传过来的数据
let seriesObj=this.echartData.series[0]; // 取出需要的数据 这里的echartData.series是通过自定义属性从父组件传过来的图表参数，也就是说在父组件中定义赋值然后传给图表组件
seriesList.push( this.pushData( seriesObj .color,seriesObj .yData,seriesObj.name )) // 调用函 数得到series配置
let myChart=this.$echarts.init( this.$refs.XXX) // 初始化图表
let option={
XAxis:{},YAxis:{} , ....series:seriesList } // 设置配置项
myChart.setOption( option ) // 配置
}，
pushData( color , data , name ){
let seriesData={ color:color; name:name; data:data }
return seriesData
} }// 这个方法是用来专门定义series配置项的，没有定值的就先用形参代替，之后在初始化方法中调用函数并且传入实参
网友评论