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
}
},