echarts柱状体改变颜色同时对应legend

张张的猿

已于 2022-04-07 16:43:38 修改

阅读量3.2k

点赞数

文章标签： echarts vue

于 2022-04-07 16:41:58 首次发布

本文链接：https://blog.csdn.net/weixin_45750509/article/details/124020163

版权

本文介绍如何在Echarts中为柱状图设置不同的颜色，并确保颜色变化与Legend保持同步。通过调整Echarts配置，可以解决柱状图颜色与X轴数据对齐的问题。

摘要由CSDN通过智能技术生成

echarts柱状体改变颜色同时对应legend

1.echarts改变柱状图的颜色，每个柱状图显示不同的颜色

写的时候一直x轴和柱状图对不齐，当把x轴的data删除后，就没问题了

 endchartes() {
   
      let chart4 = this.$echarts.init(
        document.getElementById("end_zz_echartes"),
        "light"
      );
      let option4 = {
   
        tooltip: {
   
          trigger: "axis",
          axisPointer: {
   
            type: "shadow",
          },
        },
        legend: {
   
          orient: "vertical",
          top: "25%",
          x: "70%", //图例位置，设置right发现图例和文字位置反了，设置一个数值就好了
          y: "center", //延Y轴居中
        },
        grid: {
   
          left: "5%",
          right: "35%",
          bottom: "5%",
          containLabel: true,
        },

        xAxis: [
          {
   
            axisTick:</