vue中封装echarts公共组件过程
时间：2022-08-04 10:03:45|栏目：vue|点击： 次
定义图表公共样式是为了统一同一网站各页面图表的基础样式baseOption.js（轴线、区域、色系、字体），统一封装后页面需要直接引入，传入所需参即可覆盖基础样式。
以下示例封装图表组件Echart.vue。
1、安装echarts
npm install echarts --save npm install lodash --save // 若已安装请忽略
2、在mian.js中全局引入
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
3、下面开始封装图表
baseOption.js文件：公共样式定义，为了统一同网站各种图表的基础样式，比如轴线、图各板块颜色，值仅供参考）：
// baseOption.js
export default {
color: [
"#0067E1",
"#0CC1FF",
"#00D1B3",
"#85E814",
"#FFA082",
],
tooltip: {},
legend: {
orient:'horizontal',
type:'scroll',
pageIconSize:12,
pageIconColor:'#aaa',
pageIconInactiveColor :'#2f4554',
pageTextStyle:{
color:'#999999'
},
itemWidth:20,
itemHeight:12,
top:0,
textStyle:{
color:'#999999'
},
},
grid: {
top: "13%",
left: "3%",
right: "10%",
bottom: "2%",
containLabel: true,
},
xAxis: [
{
axisLine: {
lineStyle: {
color: "rgba(65, 97, 128, 0.15)",
// type: "dashed",
},
},
axisTick: {
show: false,
},
axisLabel: {
interval:0,
color: "#rgba(0, 0, 0, 0.25)",
textStyle: {
fontSize: 10,
}
},
nameTextStyle:{
color:'#999999',
fontSize: 10,
},
},
],
yAxis: [
{
axisLabel: {
color: "#rgba(0, 0, 0, 0.25)",
textStyle: {
fontSize: 11,
},
},
axisLine: {
lineStyle: {
color: "rgba(65, 97, 128, 0.15)",
},
},
splitLine: {
lineStyle: {
color: "rgba(65, 97, 128, 0.15)",
},
},
axisTick: {
show: false,
},
nameTextStyle:{
color:'#999999',
fontSize: 10,
padding:[0,20,0,0]
},
minInterval: 1
},
],
};
Echart.vue文件：图本身组件
// Echart.vue <template> <div :id="elId" style="height:100%,width:100%" /> </template>
<script>
import echarts from "echarts";
import { merge, debounce } from "lodash";
// 引入公共样式
import baseOption from "./baseOption"
export default {
data() {
return {
elId: "",
vOption: {
series: [],
},
};
},
props: {
optionData: Object,
},
computed: {
// 合并配置对象
option() {
return merge({}, baseOption, this.vOption, this.optionData);
},
},
created() {
this.elId = this.uuid();
},
mounted() {
// 实例化echarts对象
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
watch: {
optionData: {
deep: true,
handler: function() {
this.$nextTick(() => {
this.initChart();
});
},
},
},
methods: {
// 生成唯一uuid做为唯一标识符
uuid() {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
var r = (Math.random() * 16) | 0,
v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
},
// 绘图
initChart() {
if(!document.getElementById(this.elId)) return
this.chart = echarts.init(document.getElementById(this.elId));
this.chart.setOption(this.option);
const that = this;
window.addEventListener(
"resize",
debounce(() => { // 引入debounce，防止频繁更改浏览页尺寸出现页面抖动
if (that.chart) {
that.chart.resize();
}
}, 100)
);
},
},
};
</script>
4、接下来只需要在需要显示图表的地方引入Echart.vue
传入目标数据就可以了，以下示例数据为饼图：
// index.vue
<template>
<div class="chartBox">
<Chart :optionData="chartData"></Chart>
</div>
</template>
<script>
// 引入Echart.vue组件
import Chart from "./Echart.vue";
export default {
components: {
Chart,
},
data() {
return {
// 图目标数据
chartData: {
tooltip: {
show:true,
trigger:'item',
formatter: "{b} : {c} ({d}%)",
},
xAxis: [{ show: false }],
yAxis: [{ show: false }],
series: [
{
name: "访问来源",
type: "pie", // 饼图
radius: ["30%", "45%"], // 饼图大小
data: [
{ value: 1048, name: "搜索引擎" },
{ value: 735, name: "直接访问" },
{ value: 580, name: "邮件营销" },
{ value: 484, name: "联盟广告" },
{ value: 300, name: "视频广告" },
],
},
],
},
};
},
};
</script>
此时好看的饼图就出现啦~~
