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轴坐标
下一篇: 反射的学习与使用