关于前端:vue中使用echarts动态循环渲染柱状图颜色

问题形容

假如有这样一个需要：应用柱状图横轴不确定，可能有三个、五个、十个八个柱状图，然而色彩就只有三种，不论有多少种，都是循环应用这三种色彩。咱们先看一下，最终的效果图

效果图

当咱们点击按钮，从新绘制 echarts 的时候，仍然是三种色彩循环应用。

应用步骤

第一步 下载并应用 echarts 插件

npm 下载
npm install echarts --save
在 main.js 中引入并原型上挂载
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

第二步 组件中应用

<template>
  <div>
    <div class="echartsBox" id="main"></div>
    <el-button size="small" type="primary" @click="change"> 扭转数据表 </el-button>
  </div>
</template>

<script>
export default {data() {
    return {xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      yData: [115, 198, 88, 77, 99, 123, 176],
      grid: {
        // 网格线配置 
        show: true,
        lineStyle: {color: ["#e9e9e9"],
          width: 1,
          type: "solid",
        },
      },
    };
  },
  watch: {xData() {this.echartsInit();
    },
    yData() {this.echartsInit();
    },
  },
  mounted() {
    // 在通过 mounted 调用让 echarts 渲染
    this.echartsInit();},
  methods: {echartsInit() {let main = document.getElementById("main"); // 获取 dom 元素作为 eacharts 的容器
      this.$echarts.init(main).setOption({ // 调用 echarts 办法去绘制 echarts 图
        xAxis: {
          type: "category", // 类别
          data: this.xData, // x 轴类别对应的值
          splitLine: this.grid, // 给 x 轴加上网格线
        },
        yAxis: {
          type: "value",
          splitLine: this.grid, // 给 y 轴加上网格线
        },
        series: [
          {
            data: this.yData,
            type: "bar", // 类型为柱状图
            barWidth: 40, // 柱状图的宽度
            itemStyle: {
              normal: {barBorderRadius: [20, 20, 0, 0], // 加圆角 对应（顺时针左上，右上，右下，左下）// 这里的 color 指的是每个色彩的回调函数
                color: function (params) {console.log("色彩参数", params); // 这里咱们有七个柱状图，七份数据，所以会打印 7 次。// params.dataIndex 指的是每个柱状图的索引下标 别离为 0 1 2 3 4 5 6 7 8 9
                  var colorArr = ["#baf", "#bfa", "#cde"]; //colorArr.length 为 3，通过取模的形式就能够循环应用色彩了
                  return colorArr[params.dataIndex % colorArr.length];
                },
              },
            },
          },
        ],
      });

    },
    change() {
      // 在点击事件中，间接批改 data 是能批改胜利，然而页面不会有变动，因为数据是扭转了，然而
      // canvas 画图还是原来的图，所以要监听数据，数据变动，就从新执行一次画图的办法就出成果了
      this.xData = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
      this.yData = [55, 66, 77, 88];
    },
  },
};
</script>

重点是 echartsInit()–>series–>itemStyle–>normal–>color 的函数的逻辑写法，灵便应用能够实现很多难看的成果，尽管官网给的效果图有点丑，当然具体的一些弱小的配置项，还是要去官网去看 api 文档。官网传送门附上：https://echarts.apache.org/zh…