欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 封装的 echarts 组件

程序员文章站 2024-01-25 20:02:04
...

在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轴坐标