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文档。官方传送门附上 echarts.apache.org/zh/option.h…