vue中动态循环渲染柱状图颜色之趣谈！

2023-10-24 04:53:18

使用 Vue 和 ECharts 动态循环柱状图颜色

需求场景

在开发单页应用程序时，我们经常需要使用图表展示数据。柱状图是一种常见的图表类型，可以直观地显示数据之间的差异。在某些情况下，我们可能需要在柱状图中循环使用一组特定的颜色，无论数据项的数量如何。

实现步骤

引入必要库

npm install vue echarts --save

准备数据

定义一个包含数据项名称和值的数组：

const data = [
  { name: '数据项1', value: 100 },
  { name: '数据项2', value: 200 },
  { name: '数据项3', value: 300 }
];

配置 ECharts 选项

使用 ECharts 选项对象配置图表类型、数据和颜色等属性：

const echartsOption = {
  color: ['#3399FF', '#FF9933', '#66CC99'],
  xAxis: {
    type: 'category',
    data: data.map(item => item.name)
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: data.map(item => item.value)
  }]
};

渲染 ECharts 图表

使用 Vue 中的 ECharts 组件渲染图表：

<template>
  <div>
    <ECharts :option="echartsOption" />
  </div>
</template>

<script>
import ECharts from 'echarts/components/ECharts.vue';
import { ref } from 'vue';

export default {
  components: { ECharts },
  setup() {
    const echartsOption = ref({});
    return { echartsOption };
  },
  mounted() {
    this.echartsOption = echartsOption;
  }
};
</script>

循环颜色

要实现循环颜色效果，可以在 ECharts 选项中使用 itemStyle.color 属性。此属性接受一个函数，该函数返回一个特定数据项的颜色。我们可以使用数组索引来循环一组固定颜色：

series: [{
  type: 'bar',
  data: data.map(item => item.value),
  itemStyle: {
    color: (params) => {
      const index = params.dataIndex % 3;
      return echartsOption.color[index];
    }
  }
}]