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);
};
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts中,可以通过设置柱图例颜色来自定义图例的外观。首先,要在ECharts中设置柱图例颜色,可以使用`legend.data`和`legend.textStyle`属性来实现。 首先,我们需要通过`legend.data`属性来指定图例的名称,以及对应的柱的数据系列。例如,如果我们有两个柱的数据系列,分别为"数据1"和"数据2",可以将这两个名称分别设置到`legend.data`中。 接下来,我们可以使用`legend.textStyle`属性来设置图例的文字样式,包括颜色。通过设置`legend.textStyle.color`属性来指定文字的颜色。可以将所需的颜色值设置为一个字符串,例如"red"表示红色,"#000000"表示黑色。 例如,我们可以通过如下的代码来设置柱图例颜色: ``` option = { ... legend: { data: ['数据1', '数据2'], textStyle: { color: 'red' // 设置图例文字颜色为红色 } }, ... }; ``` 上述代码将柱图例文字颜色设置为红色。 需要注意的是,如果有多个柱的数据系列,可以通过在`color`属性中设置一个颜色数组来为不同的数据系列设置不同的颜色。例如,如果有两个数据系列,可以将颜色数组设置为`color: ['red', 'blue']`,这样第一个数据系列将使用红色,第二个数据系列将使用蓝色。 总之,通过在ECharts中设置`legend.data`和`legend.textStyle`属性,可以自定义图例颜色,使其更符合自己的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值