Problem description

Suppose you have a requirement that the horizontal axis of a bar chart is uncertain. There may be three, five, ten or eight bars, but there are only three colors, and no matter how many, the three colors are recycled. Let’s take a look at the final renderings

rendering

When we click the button to redraw the Echarts, the three colors are still used in a loop.

Using the step

The first step is to download and use the Echarts plug-in

NPM download

npm install echarts --save

Introduced in main.js and mounted on the prototype

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

Used in the second step component

<template>
  <div>
    <div class="echartsBox" id="main"></div>
    <el-button size="small" type="primary" @click="change">Alter table</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xData: ["On Monday"."Tuesday"."On Wednesday"."Thursday"."Friday"."Saturday"."Sunday"].yData: [115.198.88.77.99.123.176].grid: {
        // Grid line configuration
        show: true.lineStyle: {
          color: ["#e9e9e9"].width: 1.type: "solid",}}}; },watch: {
    xData() {
      this.echartsInit();
    },
    yData() {
      this.echartsInit(); }},mounted() {
    // Call Mounted to render echarts
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      let main = document.getElementById("main"); // Get the DOM element as a container for EachArts
      this.$echarts.init(main).setOption({ // Call the echarts method to draw the echarts diagram
        xAxis: {
          type: "category"./ / class
          data: this.xData, // The value of the X-axis category
          splitLine: this.grid, // Add grid lines to the X-axis
        },
        yAxis: {
          type: "value".splitLine: this.grid, // Add a grid line to the Y-axis
        },
        series: [{data: this.yData,
            type: "bar".// The type is bar graph
            barWidth: 40.// The width of the bar chart
            itemStyle: {
              normal: {
                barBorderRadius: [20.20.0.0].// Add rounded corners corresponding to (clockwise left, right, right, left)
                // Color refers to the callback function for each color
                color: function (params) {
                  console.log("Color parameters", params); // Here we have seven bar charts, seven copies of data, so it will print 7 times.
                  // params.dataIndex refers to the index subscripts of each bar chart being 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
                  var colorArr = ["#baf"."#bfa"."#cde"]; // colorarr. length is 3, and you can recycle the color by modulating it
                  returncolorArr[params.dataIndex % colorArr.length]; },},},},],}); },change() {
      // In the click event, directly modify data can be successfully modified, but the page does not change, because the data is changed, but
      // Canvas drawing is still the original drawing, so to monitor data and data changes, we need to re-execute the drawing method to get the effect
      this.xData = ["Sun Wukong"."Pig Eight Quit"."Sand Monk"."Tang's monk"];
      this.yData = [55.66.77.88]; ,}}};</script>
Copy the code

EchartsInit ()–>series–>itemStyle–>normal–>color = series–>itemStyle–>normal–>color The official portal attached echarts.apache.org/zh/option.h…