A lineOpts of echart is configured
const lineOpts = {
//
tooltip: {
trigger: "axis",
axisPointer:{
type:"shadow"
},
textStyle: {
color: "-sharpccc"
},
position: function (p) { //p
return [p[0] - 70, p[1] - 90];
},
extraCssText: "box-shadow: 0 0 10px 2px rgba(214, 222, 230, 0.8); background: -sharpfff; color: -sharp8E99A1; padding: 20px 20px; line-height: 20px"
},
//
grid: {
top : 40,
bottom: 20,
left: 70,
right: 70
},
//X
xAxis: {
data: ["","","","","",""],//
axisLabel: {
inside: true,
textStyle: {
color: "-sharpfff"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "-sharp999"
}
}
},
series: [
{
type: "bar",
barGap:"-400%",
barCategoryGap:"60%",
barWidth:60,//
itemStyle:{
normal:{
color:"-sharp3398DB"
}
},
shadowColor: "rgba(0, 0, 0, 0.4)",
shadowBlur: 20,
data: [5, 20, 36, 10, 10, 20]
},
]
};then there are five different scenarios that need to be reused
<el-col :span="16">
<div class="line-chart-box" style="height:380px;" v-pChart="rechargeTrendOpts"></div>
</el-col>if you need these five bar charts with different colors and different data, how should you do it
?