话不多说,先上代码。
组件:
<template>
<div
id="echartsItem"
style="width: 100%; height: 400px"
:legendData="legendData"
:echartsData="echartsData"
></div>
</template>
<script>
import echarts from "@/utils/echars";
export default {
name: "echartsList",
mixins: [mixin],
components: {},
props: {
legendData: {
type: Array,
default: () => [],
},
echartsData: {
type: Object,
default: null,
}
},
data() {
return {
option: {
grid: {
left: "0",
right: "10",
top: "8%",
bottom: "10%",
containLabel: true,
},
tooltip: {
trigger: "axis",
textStyle: {
color: "#79828b",
fontSize: "12px",
},
axisPointer: {
color: "#0FA0F8",
}
},
legend: {
bottom: "0",
icon: "circle",
itemHeight: 10,
textStyle: {
padding: [0, 30, 0, 0],
},
data: this.legendData,
},
toolbox: {
show: true,
feature: {
magicType: { show: true, type: ["stack", "tiled"] },
saveAsImage: { show: true },
},
},
xAxis: {
type: "category",
axisLabel: {
color: "#A9A9A9",
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
data: [],
},
yAxis: {
name: "",
type: "value",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#A9A9A9",
},
splitLine: {
show: false,
},
axisPointer: {
snap: true,
},
},
series: [
{
type: "bar",
itemStyle: {
normal: {
color: "rgba(246, 248, 250,1)",
width: "33px",
},
},
emphasis: {
itemStyle: {
color: "rgba(246, 248, 250,1)",
},
},
zlevel: 0,
data: [],
barGap: "-100%",
barCategoryGap: "20%",
animation: false,
},
{
name: this.legendData[1],
type: "line",
smooth: true,
zlevel: 1,
itemStyle: {
borderColor: "#E7B962",
color: "#E7B962",
},
lineStyle: {
color: "#E7B962",
},
areaStyle: {},
data: [],
},
{
name: this.legendData[2],
type: "line",
smooth: true,
zlevel: 1,
itemStyle: {
borderColor: "#49A4FF",
color: "#49A4FF",
},
lineStyle: {
color: "#49A4FF",
},
areaStyle: {},
data: [],
},
{
name: this.legendData[0],
type: "line",
smooth: true,
zlevel: 1,
itemStyle: {
borderColor: "#8ED83E",
color: "#8ED83E",
},
lineStyle: {
color: "#8ED83E",
},
areaStyle: {},
data: [],
},
],
},
};
},
watch: {
echartsData: {
handler(val) {
this.getChart();
},
deep: true,
},
},
mounted() {
this.getChart();
this.initEchart();
},
computed: {},
methods: {
// echarts数据
initEchart() {
this.myChart = echarts.init(document.getElementById("echartsItem"));
this.setOption();
},
setOption() {
this.option.yAxis.name = this.echartsData.yAxis.name;
this.option.series[0].data = this.echartsData.series[0].data;
this.option.series[1].data = this.echartsData.series[1].data;
this.option.series[2].data = this.echartsData.series[2].data;
this.option.series[3].data = this.echartsData.series[3].data;
this.option.xAxis.data = this.echartsData.xAxis.data;
this.myChart.setOption(this.option, true);
this.myChart.resize();
},
getChart() {
this.$nextTick(() => {
this.initEchart();
});
},
},
beforeDestroy () {
if (this.myChart) {
this.myChart.clear()
}
},
};
</script>
调用组件
<template>
<echartsList :legendData="legendData" :echartsData="echartsData"></echartsList>
</template>
<script>
data() {
return {
//你要传的echarts数据,调用接口后赋值
legendData: ["活动***", "活动***", "活动***"],
echartsData: {
xAxis: {
data: [],
},
yAxis: {
name:"人数"
},
series: [
{data: []},
{data: []},
{data: []},
{data: []},
]
}
}
},
mounted() {this.getData()},
methods: {
getData(){ //获取数据接口
this.echartsData.yAxis.max = this.option.series[0].data[0];
}
}
</script>
不封装的话每次用到都要重新配置,太麻烦,不如封装成组件提高复用性。这里的代码是简化后的,效果什么的根据需求加就好了,若有错误请指出。