关于前端: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…