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...