echarts 柱状图颜色设置-WPSExcel：使直方图上的每个条形显示不同的颜色

WPSExcel中的条形图默认每个条形使用相同的颜色echarts 柱状图颜色设置，如何使不同的条形显示不同的颜色？如何使直方图上的负数和正数显示不同的颜色？

每个条形都设置为不同的颜色。

有些同事可能会说，单击每个条形并逐个设置颜色。这没有错，但它效率太低，你必须考虑什么颜色搭配起来好看。

Excel 中的最佳做法应该是在插入图表时选择颜色图表。

在WPS表中执行此操作的最快方法是：单击任意条形echarts 柱状图颜色设置，选择所有条形，右键单击，单击“格式化数据系列”，单击“填充和腰线”，选中“按数据点着色”，立即您将看到每个条形的颜色不同。

然后您可以进一步调整图表的细节，例如调整条形的长度、将水平坐标轴调整到底部以及设置图表样式。这样，您将在文章开头获得第一个图表。您似乎对此栏的颜色不是很满意，单击“更改颜色”按钮，可以快速切换到新的配色方案。

如何设置正互补色。

若要使负数和正数在图表上更突出，可以设置补色。与设置彩色条类似，单击系列格式“填充和腰围”选项中的“互补色中的负值”，然后分别设置负条和正条的颜色。

同样，您可以在图表工具中快速更改颜色，但只会更改负数的颜色。

感谢您的阅读，每天晚上学习一点，以节省时间来丰富您的其他能力。欢迎喜欢、评论、关注和头像。

实现目标：图例和直方图相结合。渲染：

从上图可以看出，不同图例对应的文字颜色为红色，但文字掩码的颜色与图例的颜色相同echarts中柱状图颜色设置颜色设置，echarts 的配置文件如下：

显然，textBorderColor 不支持函数调用，因此需要不同的方法来实现动态颜色遮罩函数。

使用 legend.textStyle.rich 和 legend.formatterecharts中柱状图颜色设置颜色设置，legend 配置如下：

legend: {
 data: [],
 type: 'scroll',
 orient: 'vertical',
 left: '3%',
 textStyle: {
  color: '#ffffff',
  textBorderWidth: 2,
  rich: {}
 },
 formatter: function (name){
   let index = LEGEND.indexOf(name);
   let border = `color${index}`;
   return `{${border}|${name}}`;
    },
}

动态填充丰富的数据：

    //使用rich，来动态展示legend.title 以不同的颜色描边
    for (let i = 0;i < COLOR_LIST.length;i++){
        let key = 'color' + i;
        option.legend.textStyle.rich[key] = {
            textBorderColor: COLOR_LIST[i]
        }
    }

让颜色存储在COLOR_LIST字段中并遍历COLOR_LIST字段，那么 rich 中的数据大致如下：

rich :{
 color0: {
  textBorderColor: '#2c7be5'
 },
 //...
}

此时，富文本配置了具有

不同颜色遮罩的富文本样式，然后配置了格式化程序：

 formatter: function (name){
   let index = LEGEND.indexOf(name);
   let border = `color${index}`;
   return `{${border}|${name}}`;
    },

通过在legend.data中区分传递名称的索引，构造键，得到{${border}|${name}}，并用反破折号假设index=0，则js将被解释为{color0|电子元件制造}。

注意：textBorderWidth 必须设置一个值，否则会出现问题。