echarts组件封装动态复用生成N个
由于我们在做项目的时候,相同的echarts图表可能会复用多次,还有可能在同一页面,话不多说上图片,了解一下我的应用场景。
上面的页面用到多个echarts图表,图表的类型都是一样的折线图,只是图表里面数据每个都不一样,然后渲染的图表个数是不确定的,根据搜索条件返回的数据来决定渲染几个图表。话不多说上代码:
<template>
<div>
//这里我是用ref获取dom元素,id是传进来的
<div :ref="id" class="right"></div>
</div>
</template>
<script>
export default {
data() {
return {
myChart: null,
};
},
mounted() {
this.$nextTick(() => {
//页面加载先渲染一次
this.initQuanProgress(this.id);
});
},
props: {
//传进来ref值,唯一值
id: {
type: String,
},
//传进来的数据
showData: {
type: Array,
default() {
return [];
},
},
},
watch: {
//深度监听传进来的数据,只要数据变化就刷新echarts图表
showData: {
deep: true,
handler(newVal, oldValue) {
this.$nextTick(() => {
this.initQuanProgress(this.id);
});
},
},
},
created() {
this.$nextTick(() => {
this.initQuanProgress(this.id);
});
},
methods: {
initQuanProgress(id){
if (!this.$refs[id]) return;
this.myChart = this.$echarts.init(this.$refs[id]);
//获取完元素之后,先清理一次画布,避免图表有缓存数据
this.myChart.clear()
this.setQuanProgress();
window.addEventListener("resize", () => {
if (this.myChart) {
this.myChart.resize();
}
});
},
setQuanProgress() {
let option = {
title: {
subtext: "μg/m³",
left: "10",
top: "20",
},
tooltip: {
trigger: "item",
//formatter: "{a} <br/>{b} : {c}",
},
legend: {
type:'scroll',
top: 8,
left: "center",
icon: "circle", // 这个字段控制形状 类型包括 circle,rect ,roundRect,triangle
itemWidth: 12, // 设置宽度
itemHeight: 12, // 设置高度
itemGap: 20, // 设置间距
},
axisLabel:{
interval:0
},
xAxis: {
type: "category",
name: "x",
splitLine: {
show: false },
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
axisLabel:{
interval:0
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
},
series: this.showData,
};
this.myChart.setOption(option);
},
},
};
</script>
<style lang="less" scoped>
.right {
width: 100%;
height: 272px;
}
</style>
以上是我们封装的echarts组件里面的代码,我们在需要的页面引入组件,注册后使用,那我们怎样动态想生成多少个就生成多少个呢?我们接着看:
<!-- 图表 -->
<div class="rmcl-chart-wrapper">
//chartlist这里是我接口拿到的数据处理过的,然后循环这个数据的同时把我们封装的echarts组件包裹在里面
<div class="rmcl-char-item" v-for="item in chartlist" :key="item.code">
<div class="rmcl-chart-item-title">
<h3>{
{
item.siteName}}{
{
curradio}}</h3>
</div>
//这里是我们的echarts组件,传入一个唯一值绑定ref,然后再传入每一个的图表的具体数据
<linechart :id="item.siteCode" :showData="item.secris"></linechart>
</div>
</div>
这样动态循环生成echarts图表,就大公告成了。
下面是我处理echarts图表数据格式的过程,如果感兴趣可以看看,纯属个人记录就不带注释了
getmolehart() {
let params = {
startYear:moment(this.value2[0]).format("YYYY"),
endYear:moment(this.value2[1]).format("YYYY"),
...this.form,
};
statistiHttp.getSiteMmolEhart(params).then((res) => {
if(res.code == 0){
res.result.forEach(item =>{
this.$set(item,'secris',this.getformatone(item.data ? item.data : []))
})
this.chartlist = res.result;
}
});
},
getformatone(arr){
if(arr === []){
return []
}else{
arr.forEach(item =>{
item['NO₂'] = item.months.map(ite => ite.no2);
item['PM₁₀'] = item.months.map(ite => ite.pm10);
item['PM₂.₅'] = item.months.map(ite => ite.pm25);
item['SO₂'] = item.months.map(ite => ite.so2);
item['CO'] = item.months.map(ite => ite.co);
item['O₃'] = item.months.map(ite => ite.o3);
})
arr = arr.map(item =>{
return {
name:item.year,
type: "line",
symbol:'circle',//拐点设置为实心
symbolSize:8,//拐点大小
data:item[this.radio2]
}
})
return arr
}
},