echarts component encapsulation dynamic multiplexing to generate N
Because when we are working on a project, the same echarts chart may be reused multiple times, and it may be on the same page. Let's not talk about the picture to understand my application scenario.
The above page uses multiple echarts charts. The chart types are the same line chart, but the data in each chart is different, and the number of charts to be rendered is uncertain. The rendering is determined according to the data returned by the search criteria Several charts. Not much to say about the code:
<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>
The above is the code in the echarts component we encapsulated. We introduce the component on the required page and use it after registration. How can we dynamically generate as many as we want? Let's go on:
<!-- 图表 -->
<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>
In this way, the echarts chart is dynamically generated in a loop, and the big announcement is made.
The following is my process of processing the echarts chart data format. If you are interested, you can take a look. It is purely a personal record without comments.
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
}
},