根据条件循环生成并模块化echarts图表
2022-10-30 本文已影响0人
空格x
- 此次将循环生成多个图表，每个图表根据条件展示不同的图表，并将echarts的每个配置项抽离出来，进行灵活配置。
1.循环生成echarts图表并根据条件生成不同的图表
1.1 准备需要展示图表的模型
<template>
<div class="echarts-body">
<div class="echarts-form" v-for="item in 9" :key="item"></div>
</div>
</template>
<script>
export default {
name: "",
props: {},
components: {},
data() {
return {};
},
computed: {},
watch: {},
created() {},
methods: {},
mounted() {},
};
</script>
<style scoped lang="less">
.echarts-body {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.echarts-form{
width: 32%;
height: 32%;
border: 1px solid rgba(151, 151, 151, 0.25);
}
}
</style>
效果图
1.2 引入echarts并循环渲染图表
...
<script>
import * as echarts from "echarts";
export default {
name: "",
props: {},
components: {},
data() {
return {};
},
computed: {},
watch: {},
created() {},
methods: {
echartsBody() {
if (
this.myChart !== null &&
this.myChart !== "" &&
this.myChart !== undefined
) {
this.myChart.dispose(); // 销毁
}
// const that = this
// 获取
// 基于准备好的dom，初始化echarts实例
const dom = document.querySelectorAll(".echarts-form");
Array.from(dom).map((x, index) => {
this.myChart = echarts.init(x);
this.myChart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
color: ['#a9df96','#ffe176'],
series: [
{
name: "Precipitation",
type: "bar",
data: [150, 230, 224, 218, 135, 147, 260],
},
{
name: "Temperature",
type: "line",
data: [150, 230, 224, 218, 135, 147, 260],
},
]
});
});
},
},
mounted() {
this.echartsBody();
},
};
</script>
...
效果图
- 到此为止，只是对容器进行了循环并渲染出图表，但9份图表一模一样，这不是想要的结果，本次是希望不同的条件/满足某些条件渲染出不同的图表，并且数据是独立的，每个容器相对于其他容器都是独立的。
- 当然有很多办法可以实现，只是繁琐程度而已。
- 如果在echarts内部写的话，限制很很大，只能使用其提供的回调函数，没办法写那么灵活，或者在循环时根据判断写多种类型的图表，其实不如把echarts的每个配置项抽离出来，将其模块化，根据需要输入不同的模块
2 抽离echarts图表配置项
2.1. 模块化处理
...
methods: {
// echarts 提示窗
echartsTooltip() {
return {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
};
},
// x轴
echartsXaxis() {
return {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
};
},
// y轴
echartsYaxis() {
return {
type: "value",
};
},
// 为了操作起来更方便将下面会将其拆开
// // 数据/配置
// echartsSeries() {
// return [
// {
// name: "Precipitation",
// type: "bar",
// data: [150, 230, 224, 218, 135, 147, 260],
// },
// {
// name: "Temperature",
// type: "line",
// data: [150, 230, 224, 218, 135, 147, 260],
// },
// ];
// },
// 数据/配置 bar
echartsSeriesBar() {
return {
name: "Temperature",
type: "bar",
data: [150, 230, 224, 218, 135, 147, 260],
color: "#a9df96"
}
},
// 数据/配置 line
echartsSeriesLine() {
return {
name: "Temperature",
type: "line",
data: [150, 230, 224, 218, 135, 147, 260],
color: "#ffe176"
}
},
echartsBody() {
if (
this.myChart !== null &&
this.myChart !== "" &&
this.myChart !== undefined
) {
this.myChart.dispose(); // 销毁
}
// const that = this
// 获取
// 基于准备好的dom，初始化echarts实例
const dom = document.querySelectorAll(".echarts-form");
Array.from(dom).map((x, index) => {
this.myChart = echarts.init(x);
this.myChart.setOption({
tooltip: this.echartsTooltip(),
xAxis: this.echartsXaxis(),
yAxis: this.echartsYaxis(),
// series: this.echartsSeries(),
series: [this.echartsSeriesBar(), this.echartsSeriesLine()],
});
});
},
},
...
效果图
- 此时会发现将配置项抽离出来后，原来渲染的图表没有任何变化，还是可以正常展示。
- 虽然模块化，但每个图表还不是独立的。
2.2 根据条件渲染不同的图表
- 本次只改改数据与展示形式等，x,y轴等有兴趣可可以试试（随便改几个，大致写法没区别）
...
methods: {
// echarts 提示窗
echartsTooltip() {
return {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
};
},
// x轴
echartsXaxis() {
return {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
};
},
// y轴
echartsYaxis() {
return {
type: "value",
};
},
// 为了操作起来更方便将下面会将其拆开
// // 数据/配置
// echartsSeries() {
// return [
// {
// name: "Precipitation",
// type: "bar",
// data: [150, 230, 224, 218, 135, 147, 260],
// },
// {
// name: "Temperature",
// type: "line",
// data: [150, 230, 224, 218, 135, 147, 260],
// },
// ];
// },
// 数据/配置 bar
echartsSeriesBar(index) {
if (index !== 0 && index !== 8 && index !== 4) {
return {
name: "Temperature",
type: "bar",
data: [150, 230, 224, 218, 135, 147, 260],
color: "#a9df96",
};
} else if (index === 4) {
} else if (index === 8) {
return {
name: "Temperature",
type: "bar",
data: [15, 110, 144, 118, 235, 147, 260],
color: "#b5b6e8 !important",
};
} else {
return {
name: "Temperature",
type: "line",
data: [100, 130, 184, 118, 135, 147, 160],
color: "#ccc",
};
}
},
// 数据/配置 line
echartsSeriesLine(index) {
if (index === 5) {
// 当满足条件可以做些图表之外的操作 改改数据 页面样式啥的
} else {
return {
name: "Temperature",
type: "line",
data: [150, 230, 224, 218, 135, 147, 260],
color: "#ffe176",
};
}
},
echartsBody() {
if (
this.myChart !== null &&
this.myChart !== "" &&
this.myChart !== undefined
) {
this.myChart.dispose(); // 销毁
}
// const that = this
// 获取
// 基于准备好的dom，初始化echarts实例
const dom = document.querySelectorAll(".echarts-form");
Array.from(dom).map((x, index) => {
this.myChart = echarts.init(x);
this.myChart.setOption({
tooltip: this.echartsTooltip(),
xAxis: this.echartsXaxis(),
yAxis: this.echartsYaxis(),
// series: this.echartsSeries(),
series: [this.echartsSeriesBar(index), this.echartsSeriesLine(index)],
});
});
},
},
...
效果图
- 通过传入的索引值进行判断，当满足条件时输出不一样的图表。
3 完整代码
<template>
<div class="echarts-body">
<div class="echarts-form" v-for="item in 9" :key="item"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "",
props: {},
components: {},
data() {
return {};
},
computed: {},
watch: {},
created() {},
methods: {
// echarts 提示窗
echartsTooltip() {
return {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
};
},
// x轴
echartsXaxis() {
return {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
};
},
// y轴
echartsYaxis() {
return {
type: "value",
};
},
// 为了操作起来更方便将下面会将其拆开
// // 数据/配置
// echartsSeries() {
// return [
// {
// name: "Precipitation",
// type: "bar",
// data: [150, 230, 224, 218, 135, 147, 260],
// },
// {
// name: "Temperature",
// type: "line",
// data: [150, 230, 224, 218, 135, 147, 260],
// },
// ];
// },
// 数据/配置 bar
echartsSeriesBar(index) {
if (index !== 0 && index !== 8 && index !== 4) {
return {
name: "Temperature",
type: "bar",
data: [150, 230, 224, 218, 135, 147, 260],
color: "#a9df96",
};
} else if (index === 4) {
} else if (index === 8) {
return {
name: "Temperature",
type: "bar",
data: [15, 110, 144, 118, 235, 147, 260],
color: "#b5b6e8 !important",
};
} else {
return {
name: "Temperature",
type: "line",
data: [100, 130, 184, 118, 135, 147, 160],
color: "#ccc",
};
}
},
// 数据/配置 line
echartsSeriesLine(index) {
if (index === 5) {
// 当满足条件可以做些图表之外的操作 改改数据 页面样式啥的
} else {
return {
name: "Temperature",
type: "line",
data: [150, 230, 224, 218, 135, 147, 260],
color: "#ffe176",
};
}
},
echartsBody() {
if (
this.myChart !== null &&
this.myChart !== "" &&
this.myChart !== undefined
) {
this.myChart.dispose(); // 销毁
}
// const that = this
// 获取
// 基于准备好的dom，初始化echarts实例
const dom = document.querySelectorAll(".echarts-form");
Array.from(dom).map((x, index) => {
this.myChart = echarts.init(x);
this.myChart.setOption({
tooltip: this.echartsTooltip(),
xAxis: this.echartsXaxis(),
yAxis: this.echartsYaxis(),
// series: this.echartsSeries(),
series: [this.echartsSeriesBar(index), this.echartsSeriesLine(index)],
});
});
},
},
mounted() {
this.echartsBody();
},
};
</script>
<style scoped lang="less">
.echarts-body {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.echarts-form {
width: 32%;
height: 32%;
border: 1px solid rgba(151, 151, 151, 0.25);
}
}
</style>
