echarts vue组件封装

echarts vue组件封装

为什么封装echarts组件

1、原生echarts不是vue组件风格的,不爽

2、原生echarts需要操作dom,麻烦

3、原生echarts没有响应式系统,太菜

在vue项目中使用echarts,步骤如下：

（1）安装echarts依赖

npm install echarts -S 

（2）引入echarts,可全局引入和按需引入

全局引入：

// 引入echarts  --- 在 main.js 中
import echarts from 'echarts'
Vue.prototype.$echarts = echarts 

在 echarts.vue 中，初始化echarts实例进行绘制图形。

this.charts = this.$echarts.init(document.getElementById(id));

按需引入：

//在 echarts.vue 中
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

（3）项目案例：

1.实现方式：

创建一个待渲染的dom

<template>
  <div>
    <div id="myLine" :style="echartStyle"></div>
  </div>
</template>

绘制函数：

// 绘制折线图
drawLine(id){
  this.charts = this.$echarts.init(document.getElementById(id));
  this.charts.on("click", this.eConsole);
  this.charts.setOption({
  	title: {
  		left: 'center',
	        text: this.titleText, //标题文本
	    },
	    tooltip: {
	        trigger: 'axis'
	    },
	    legend: {
	    	left: 'left',
	        data: this.opinion // 区域名称
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    toolbox: {
	        feature: {
	            saveAsImage: {}
	        }
	    },
	    xAxis: {   // x 轴
	        type: 'category',
	        boundaryGap: false,
	        data: this.x
	    },
	    yAxis: {   // y 轴
	        type: 'value'
	    },
	    series: this.opinionData  // 区域数据
  })
}

初始化挂载到页面上：

mounted(){
	this.$nextTick(function() {
		this.drawLine('myLine')
	})
},

props:

echartStyle: {  // 样式 - 1
	type: Object,
	default() {
		return {}
	}
},
titleText: {   //标题文本 - 1
	type: String,
	default: ''
},

opinion: {    //区域名称 - 1
	type: Array,
	default() {
		return []
	}
},
opinionData: {   // 区域数据 - 1
	type: Array,
	default() {
		return []
	}
},
x: {  // x 轴
	type: Array,
	default() {
		return []
	}

}

2.控件使用

调用实例：

<m-line
  :echartStyle="s"
  :titleText="title"
  :opinion="barName"
  :opinionData="info"
  :x="barX">
</m-line>

传递数据：

import mLine from '../components/line' 
export default {
    components: {
        mLine,
    },
	data() {
		return {
	        s: {
	          height: ''
	        },
	        title: '动态统计',
	        barName: ['文档数', '任务数'],
	        barX: ['2019/03/01','2019/03/02','2019/03/03','2019/03/04','2019/03/05','2019/03/06','2019/03/07'],
	        info: [
	  	        {
	  	            name:'文档数',
	  	            type:'line',
	  	            stack: '总量',
	  	            data:[120, 132, 101, 134, 90, 230, 210]

	  	        },
	  	        {
	  	            name:'任务数',
	  	            type:'line',
	  	            stack: '总量',
	  	            data:[220, 182, 191, 234, 290, 330, 310]
	  	        }
	  	    ],
		}

	},

	created(){
	  this.s.height = 300 + 'px'

	},
}

这里主要传递四个参数到组件中，title、legend、series、xAxis，分别表示文章标题、区域名称、区域数据以及X轴坐标