problem description
the environmental background of the problems and what methods you have tried
< template >
< div: class= "className": id= "id": style= "{height:height,width:width}" > < / div >
< / template >
< script >
import echarts from "echarts"
import resize from". / mixins/resize"
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chart"
},
id: {
type: String,
default: "chart"
},
width: {
type: String,
default: "100%"
},
height: {
type: String,
default: "700px"
},
pieData: {
type: Object,
required: true
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
title: {
text: this.pieData.title,
textStyle: {
fontWeight: "bold",
fontSize: 24,
color: "-sharp333333"
},
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)",
show: true,
axisPointer: {
lineStyle: {
color: "-sharp57617B"
}
}
},
legend: {
bottom: "0",
itemWidth: 20,
itemHeight: 10,
itemGap: 10,
data: this.pieData.legendData,
left: "center",
textStyle: {
fontSize: 16,
color: "-sharp333333"
}
},
grid: {
top: 20,
left: "3%",
right: "4%",
bottom: "2%",
containLabel: true
},
series: [{
type: "pie",
radius: this.pieData.radius,
center: ["50%", "50%"],
itemStyle: {
// normal: {
// color: "rgb(137,189,27)",
// borderColor: "rgba(137,189,2,0.27)",
// borderWidth: 12
// },
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
data: this.pieData.seriesData
}],
color: this.pieData.color
})
}
}}
< / script >
related codes
/ / Please paste the code text below (do not replace the code with pictures)
pieData: {
title: "",
radius: "70%",
color: ["-sharpcd5c5c", "-sharpff7f50", "-sharp87cefa", "-sharpda70d6", "-sharp32cd32", "-sharp6495ed", "-sharpff69b4", "-sharpba55d3"],
legendData: [""],
seriesData: [{
value: 1547,
name: ""
}]
},
axios:
this.pieData.legendData = response.data.data.legendData
this.pieData.seriesData = response.data.data.seriesData
what result do you expect? What is the error message actually seen?
console result value has been assigned, but the chart is immutable