echarts 自定义柱状图颜色，并展示图例。

效果如图

//组合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);
};