vue echarts 组件封装
程序员文章站
2024-01-25 20:11:04
...
echarts组件
vue-echarts.js
import echarts from 'echarts';
//使用ResizeObserver制作响应式Vue组件
import ResizeObserver from 'resize-observer-polyfill';
const loadingOption = {
text: '努力加载中',
color: '#409eff',
textColor: '#04beb4',
maskColor: 'rgba(255, 255, 255, 0.8)',
zlevel: 0
};
export default {
// 传入值
props: {
option: Object,//数据
theme: String,// 主题
groupId: String,// 分组
},
mounted() {
this.refreshChart();
this.ro = new ResizeObserver(([entry]) => {
if (entry.contentRect.width && entry.contentRect.height && this.chart && !this.resizing) {
this.resizing = true;
// 动画控制
requestAnimationFrame(() => {
if (this.chart) this.chart.resize();//改变图表尺寸
this.resizing = false;
});
}
});
this.ro.observe(this.$el);
},
destoryed() {
// 实例销毁后调用
if (this.chart) {
this.chart.dispose();
this.chart = undefined;
}
if (this.io) {
this.ro.disconnect();
this.ro = undefined;
}
},
watch: {
theme(value, oldValue) {
if (oldValue === undefined && value !== undefined) {
this.refreshChart();
}
},
option(value, oldValue) {
if (oldValue === undefined && value !== undefined) {
this.refreshOption();
}
},
},
methods: {
refreshOption() {
//刷新数据
if (!this.chart) return;
if (this.option && Object.keys(this.option).length) {
this.chart.setOption(this.option, true);//设置图表配置项
if (this.$el.clientHeight) this.chart.resize();//根据元素大小重新配置图表尺寸
this.chart.hideLoading();//隐藏动画加载的效果
} else {
// 没有数据配置,显示loading状态
this.chart.showLoading('default', loadingOption);
}
},
refreshChart() {
// 刷新整个图
if (this.chart) {
this.chart.dispose();//销毁实例
this.chart = undefined;
}
this.chart = echarts.init(this.$el, this.theme || 'shine');//没有实例,用echarts.init 创建一个新的实例
this.chart.group = this.groupId;//设置图表的分组,用于联动
this.refreshOption();
// http://echarts.baidu.com/api.html#events
//广播出所有echarts 支持的事件 使得触发父组件的自定义事件
[
'click',
'dblclick',
'mousedown',
'mouseup',
'mouseover',
'mouseout',
'globalout',
'legendselectchanged',
'legendselected',
'legendunselected',
'legendscroll',
'datazoom',
'datarangeselected',
'timelinechanged',
'timelineplaychanged',
'restore',
'dataviewchanged',
'magictypechanged',
'geoselectchanged',
'geoselected',
'geounselected',
'pieselectchanged',
'pieselected',
'pieunselected',
'mapselectchanged',
'mapselected',
'mapunselected',
'axisareaselected',
'focusnodeadjacency',
'unfocusnodeadjacency',
'brush',
'brushselected',
].forEach(x => this.chart.on(x, event => this.$emit(x, event, this)));
}
}
};
vue-echarts.vue
<template><div class="vue-echarts"></div></template>
<style lang="scss" src="./vue-echarts.scss"></style>
<script src="./vue-echarts.js"></script>
echarts公共配置
getOption(常用的line,bar)也可以分开配置
export default function () {
return {
title: {
text: ''
},
$legend: {
show: true,
type: 'scroll',
},
legend: {},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999',
}
},
},
toolbox: {
right: 30,
feature: {
magicType: {
show: false, type: ['line', 'bar']
},
restore: {
show: false
},
}
},
grid: {
left: '4%',
right: '4%',
top: 32,
bottom: 10,
containLabel: true,
},
$themeColor: ['#00C8C1', '#fdd67c'],
axisPointer: {
show: true,
label: {
backgroundColor: '#777',
},
},
xAxis: {
show: true,
type: 'category',
data: [],
scale: true,
minInterval: 1,
nameTextStyle: {
fontSize: 13,
color: 'black',
align: 'center',
},
axisLine: {
onZero: false,
lineStyle: {
color: '#838383',
}
},
axisLabel: {
color: '#838383',
},
axisPointer: {},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(0,102,99,0.16)',
}
},
min: 'dataMin',
max: 'dataMax',
},
yAxis: {
show: true,
nameLocation: 'end',
nameGap: 10,
scale: true,
minInterval: 0,
axisLine: {
onZero: false,
lineStyle: {
color: '#838383',
}
},
splitLine: {
show: true,
lineStyle: {
color: '#00c8c1',
opacity: 0.2,
}
},
nameTextStyle: {
fontSize: 13,
color: 'black',
align: 'center',
},
axisLabel: {
color: '#838383',
},
axisPointer: {
label: {},
},
splitArea: {
show: true,
areaStyle: {
color: ['#fff', 'rgba(2, 200, 193, 0.03)'],
}
}
},
dataZoom: [{
type: 'inside',
}],
$series: {
label: {
normal: {
show: false,
position: 'top',
}
},
stacked: false,
polar: false,
connectNulls: true,
},
$markPoint: {
silent: false,
data: [],
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: '#f33206',
}
},
symbol: 'circle',
symbolSize: 8,
},
$themeColors: ['#C1232B', '#27727B', '#FCCE10', '#E87C25', '#B5C334', '#FE8463', '#9BCA63', '#FAD860', '#60C0DD']
};
}
在要展示echarts的组件中
<vue-echarts :option="option" ref="chart"></vue-echarts>
import VueEcharts from '@/components/global/vue-echarts/vue-echarts.vue';
import getOption from '@/views/charts/commonOption.js';
data: {
option: null
},
components: {
VueEcharts
},
getOption是封装的公共echarts配置,然后this.option = getOption() 赋值,并根据不同图的标题,类型等改写对应配置
配置完后刷新数据
setTimeout(() => {
this.$refs.chart.refreshOption();
});
上一篇: 固件信息丢失的恢复
下一篇: JavaScript实现循环轮播图