问题形容
假如有这样一个需要：应用柱状图横轴不确定，可能有三个、五个、十个八个柱状图，然而色彩就只有三种，不论有多少种，都是循环应用这三种色彩。咱们先看一下，最终的效果图
效果图
当咱们点击按钮，从新绘制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...