当前位置：首页 > news >正文

vue 项目对 echarts 组件的封装使用

news 来源：原创 2024/5/2 14:22:01

在vue项目中使用echarts,

1 我们要在项目中安装 echarts 依赖包

命令 ： npm install echarts -S

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

全局引入：
在main.js 文件中引入

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

然后我们创建一个echarts.vue 文件。
在 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轴坐标

可以看看官网对echarts
的介绍和使用
https://echarts.apache.org/examples/zh/index.html