echarts配色

最新推荐文章于 2025-02-01 06:05:01 发布

我也秃了

最新推荐文章于 2025-02-01 06:05:01 发布

阅读量5.6k

点赞数 9

分类专栏： JS学习 React 入坑学习文章标签： javascript reactjs

本文链接：https://blog.csdn.net/qq_40044912/article/details/108467305

版权

React 入坑学习同时被 2 个专栏收录

49 篇文章

订阅专栏

JS学习

15 篇文章

订阅专栏

自己找了一点配色集，有几个也是我自己配的，
虽然有可能不是很好看，但我觉得还是看着比原来的主题配色好一些

//新特性
  const colors1 = [
    '#63b2ee',
    '#76da91',
    '#f8cb7f',
    '#f89588',
    '#7cd6cf',
    '#9192ab',
    '#7898e1',
    '#efa666',
    '#eddd86',
    '#9987ce',
    '#63b2ee',
    '#76da91',
  ];

  //科技风
  const colors2 = [
    '#05f8d6',
    '#0082fc',
    '#fdd845',
    '#22ed7c',
    '#09b0d3',
    '#1d27c9',
    '#f9e264',
    '#f47a75',
    '#009db2',
    '#024b51',
    '#0780cf',
    '#765005',
  ];

  //朴素风
  const colors3 = [
    '#9DC8C8',
    '#58C9B9',
    '#519D9E',
    '#D1B6E1',
    '#FFEEE4',
    '#F17F42',
    '#CE6D39',
    '#D4DFE6',
    '#8EC0E4',
    '#56A902',
    '#f15c5c',
    '#EFDC05',
    '#E53A40',
    '#566270',
    '#8CD790',
    '#F6B352',
    '#F68657',
    '#9055A2',
    '#011638',
    '#EC7357',
    '#8FBC94',
    '#44633F',
  ];

  //明艳风
  const colors4 = [
    '#b7eb8f',
    '#faad14',
    '#d3f261',
    '#fa8c16',
    '#eb2f96',
    '#2f54eb',
    '#1890ff',
    '#7cb305',
    '#13c2c2',
    '#ffe58f',
    '#91d5ff',
    '#f5222d',
    '#ffbb96',
    '#87e8de',
    '#ffa39e',
    '#52c41a',
    '#ffd591',
    '#ffec3d',
    '#ffadd2',
    '#722ed1',
    '#fa541c',
    '#b37feb',
  ];

  //马卡龙风
  const colors5 = [
    '#CD9786',
    '#E1C7C0',
    '#AE7681',
    '#C3959F',
    '#C8CDE1',
    '#AF9D99',
    '#B89D74',
    '#97BFC4',
    '#D1E8F2',
    '#DAC9BD',
    '#C67D6E',
    '#93708C',
    '#BFCFE9',
    '#F2BB9F',
    '#EA9761',
    '#BE6377',
    '#E0D0C9',
    '#936260',
    '#A48398',
  ];

使用方法：
在OPTION方法中，设置color，下面的例子就是选用了科技风的配色

let Option = (sales, stores) => {
    return {
      color: colors2,
      title: {
        ...
      },
      legend: {
        ...
      },
      series: [
       ...
      ],
    };
  };