效果如图
//组合series数据
state.series = [
{
name: “峰”,
type: “bar”,
stack: “值”,
data: fengList,
itemStyle: {
color: state.getThemeConfig.curveConfig[0],
},
},
{
name: “平”,
type: “bar”,
stack: “值”,
data: pingList,
itemStyle: {
color: state.getThemeConfig.curveConfig[1],
},
},
{
name: “谷”,
type: “bar”,
stack: “值”,
data: guList,
itemStyle: {
color: state.getThemeConfig.curveConfig[2],
},
},
];
echartInitThree();
//调用echart方法
const echartInitThree = () => {
const myChart = echarts.init(proxy.$refs.echartThree);
const option = {
title: {
text: state.titleOne + “趋势图”,
x: “left”,
y: “top”,
padding: [0, 10, 15, 20],
textStyle: {
fontSize: 14,
fontStyle: “normal”,
fontWeight: “normal”,
color: “rgba(255, 255, 255, 0.65)”,
},
},
grid: {
top: 50,
right: 20,
bottom: 30,
left: 70,
},
tooltip: {
trigger: "axis",
show: true,
backgroundColor: "#27428d",
borderColor: "#27428d",
textStyle: {
color: "#cbc6c6",
},
//这个是鼠标经过卡片显示的内容
formatter: function (a: any) {
var name: any = "";
if (state.nySurveyThreeData[a[0].dataIndex].elecPriceTypeId === 0) {
name = "峰";
}
if (state.nySurveyThreeData[a[0].dataIndex].elecPriceTypeId === 1) {
name = "平";
}
if (state.nySurveyThreeData[a[0].dataIndex].elecPriceTypeId === 2) {
name = "谷";
}
var data;
data =
'<div class="showBox">' +
'<div style="margin-bottom:10px">' +
a[0].axisValue +
"</div>" +
cascaderAddr.value.selectedLabel +
"(" +
name +
")" +
" : " +
a[0].value +
state.company +
"</div>" +
"</div>";
return data;
},
},
toolbox: {
itemSize: 15,
iconStyle: {
borderColor: "#fff",
},
},
legend: {
icon: "roundRect",
itemWidth: 12,
itemHeight: 12,
right: 13,
left: "20%",
top: 15,
data: ["峰", "平", "谷"],
textStyle: {
color: "#cbc6c6", //字体颜色
},
},
dataZoom: [
//放大缩小
{
type: "inside",
},
],
//x轴为时间
xAxis: {
type: "category",
data: state.time,
axisLabel: {
textStyle: {
color: "#cbc6c6",
},
},
},
//y轴为数据点值
yAxis: {
name: "单位:" + state.company,
type: "value",
nameTextStyle: {
color: "#cbc6c6",
padding: [0, 90, 0, 70],
},
axisLabel: {
textStyle: {
color: "#cbc6c6",
},
},
},
series: state.series,
};
//清空数据,单项时还是原来数据
myChart.setOption(option, true);
};