Apache Echarts 自学笔记 6. 概念篇 - 【ECharts 中的样式简介】 6.2 调色盘

逃离我推掉我的手 2024-03-27 16:46 75阅读 0赞

#### Apache Echarts 自学笔记 ####

> 学习资料：【Echarts官网：https://echarts.apache.org/】
> 
> ![在这里插入图片描述][ed49ea46aba24fa5a4e1db2f8a894345.png_pic_center]
> 
> 如侵立删

##### 6. 概念篇 - 【ECharts 中的样式简介】 #####

###### 6.2 调色盘 ######

调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。

可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

默认样式：

![在这里插入图片描述][f9d6d1544d5e47969df610d3b26e0150.png_pic_center]

加上调色盘：

option = {
      // 全局调色盘。
      color: [
        '#c23531',
        '#2f4554',
        '#61a0a8',
        '#d48265',
        '#91c7ae',
        '#749f83',
        '#ca8622',
        '#bda29a',
        '#6e7074',
        '#546570',
        '#c4ccd3'
      ],
    
      series: [
        {
          type: 'bar',
          // 此系列自己的调色盘。
          color: [
            '#dd6b66',
            '#759aa0',
            '#e69d87',
            '#8dc1a9',
            '#ea7e53',
            '#eedd78',
            '#73a373',
            '#73b9bc',
            '#7289ab',
            '#91ca8c',
            '#f49f42'
          ]
          // ...
        },
        {
          type: 'pie',
          // 此系列自己的调色盘。
          color: [
            '#37A2DA',
            '#32C5E9',
            '#67E0E3',
            '#9FE6B8',
            '#FFDB5C',
            '#ff9f7f',
            '#fb7293',
            '#E062AE',
            '#E690D1',
            '#e7bcf3',
            '#9d96f5',
            '#8378EA',
            '#96BFFF'
          ]
          // ...
        }
      ]
    };

![在这里插入图片描述][5091a290543b42ef82951dc0444bce23.png_pic_center]

![在这里插入图片描述][43825755b2034027a008c0a2f4c9e737.png_pic_center]

[ed49ea46aba24fa5a4e1db2f8a894345.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1006e778da7a49df820f84c57f69d500.png
[f9d6d1544d5e47969df610d3b26e0150.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/490270d5dc81497cb8ff6e4095de7ff0.png
[5091a290543b42ef82951dc0444bce23.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/4b485e7dc60c46d681e5475c155d7f91.png
[43825755b2034027a008c0a2f4c9e737.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/cb2ac1a8ae8b4c399169aa033ece2546.png