为什么需要使用颜色主题

随着用户审美越来越高，不再是过去那样只注重功能。

所以对界面的颜色样式都具有一定的审美要求

此时颜色是否好看就非常重要了

因为人都是视觉动物

对界面的第一印象肯定都是颜色。

如果颜色好看，用户肯定会被吸引的。

所以我们不得不去配置一下颜色

使用默认颜色主题

我们发现的问题

我们发现红色和黑色进行搭配

真的是看着不是很舒服

好不客气的讲就是难看到爆炸

所以我们需要对颜色进行自定义。

主要是改变颜色

配置颜色的两种方式

对于配置echarts的颜色。

有小伙伴们会立刻想到在echarts渲染的时候

配置每一个echarts的颜色

如果echarts不是很多的话，还是可以接受的

但是如果图表很多，那么一个一个的设置还是很麻烦的

所以我们需要对项目进行整体设置。

echarts自定义颜色主题(使用第二种方式)

echarts配置颜色主题的地址:https://echarts.apache.org/zh/theme-builder.html

这里有很多种颜色主题。

我们可以进行选择自己喜欢的

如果你选择好了之后。

点击下载主题，下载好之后。在你的项目种引入就ok了

下面我看看引入后的颜色是不是比之前好看一些了。

在项目种使用颜色主题

01==>下载好主题色之后在项目引入。在echarts之后引入

    <script src="./macarons.js"></script>

02==> 设置颜色主题

     需要我们在初始化echats时指定主题名称即可，

     主题名(macarons)称就是主题的文件名(macarons)，

     var myChart = echarts.init(document.getElementById("main6"),"macarons");

详细代码和图表展示情况

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

    <!-- 引入你刚刚下载的颜色主题配置文件 -->

    <script src="./macarons.js"></script>

  </head>

  <body>

    <div

      id="main6"

      style="width: 1200px;height: 400px; background-color: #ccc;"

    ></div>

    <script>

     //需要我们在初始化echats时指定主题名称即可，

     //主题名(macarons)称就是主题的文件名(macarons)，

      var myChart = echarts.init(document.getElementById("main6"),"macarons");

      var option = {

        tooltip: {

          trigger: "item",

        },

        legend: {

          top: "5%",

          left: "center",

        },

        series: [

          {

            type: "pie",

            radius: ["50%", "70%"],

            avoidLabelOverlap: false,

            label: {

              show: false,

              position: "center",

            },

            // 饼状图不要中间的文字提示信息

            emphasis: {

              label: {

                show: false, //将这个设置为false

              },

            },

            labelLine: {

              show: false,

            },

            data: [

                { value: 12, name: "华为手机" },

                { value: 11, name: "苹果手机" },

            ],

          },

        ],

      };

      myChart.setOption(option);

    </script>

  </body>

</html>

关于颜色主题的注意点

 echarts.registerTheme('macarons', {

        "color": [

            "#2ec7c9",

            "#b6a2de",

            "#5ab1ef",

            "#ffb980",

            "#d87a80",

            "#8d98b3",

            "#e5cf0d",

            "#97b552",

            "#95706d",

            "#dc69aa",

            "#07a2a4",

            "#9a7fd1",

            "#588dd5",

            "#f5994e",

            "#c05050",

            "#59678c",

            "#c9ab00",

            "#7eb00a",

            "#6f5553",

            "#c14089"

        ],

这是我们下载echarts颜色主题的一部分代码

我们发现颜色主题一共有20个

换一句话说就是如果数据不止20条

那么echarts种的颜色会重复

恭喜你回答正确。

就算你不去配置echarts的颜色主题

数据超过20条的时候颜色同样也会重复。

如果不相信肯下面这张图片

下面这个echarts没有进行任何配置，但是颜色已经重复

这个图说明了：就算你echarts没有配置颜色,数据超过20条，颜色同样会重复！

这个跟是否配置颜色主题没有半毛钱的关系

所以大家不必要去纠结颜色重复这个问题了

vue项目中如何去配置颜色了

第一步：引入需要的颜色主题

import  'echarts/theme/macarons.js'  //我使用的是这个颜色主题

// import  'echarts/theme/shine.js'

// import  'echarts/theme/vintage.js'

第二步：配置使用

let demo = echarts.init(document.getElementById("demo"),'macarons')

效果

可怜的哀求

如果你觉得我写的不错的话，请给我一个推荐或者打赏

这是我写下去的动力

感谢各位看官，感谢

听说推荐或者打赏的都找到女盆友或者男盆友了

不信你试一试

国庆总结:echarts自定义颜色主题,保证你看的明明白白的更多相关文章

  1. echarts自定义颜色主题

    1. 进入地址:  https://echarts.baidu.com/theme-builder/ 2. 配置主题 2.1. 可以选择挑选默认方案 2.2 可以进行一些样式配置 2.3 配置背景颜色 ...

  2. Vue3.2中的setup语法糖,保证你看的明明白白！

    vue3.2 到底更新了什么? 根据原文内容的更新的内容主要有以下 5 块: 1.SSR:服务端渲染优化.@vue/server-renderer包加了一个ES模块创建, 与Node.js解耦,使在非 ...

  3. vue下一代状态管理Pinia.js 保证你看的明明白白！

    1.pinia的简单介绍 Pinia最初是在2019年11月左右重新设计使用Composition API的 Vue 商店外观的实验. 从那时起,最初的原则相同,但 Pinia 适用于 Vue 2 和 ...

  4. vue混入mixin的使用，保证你看的明明白白！

    场景描述 有些时候,我们发现有些组件部分功能代码是几乎是一样的. 这个时候,我们就可以将相同的逻辑代码抽离出来 此时我们的主角混入mixin就登场了 下面我们有a-test和b-test两个组件,点击 ...

  5. vscode自定义颜色主题插件并发布

    生成一个新的颜色主题 运行命令 npm install -g yo generator-code yo code 这时默认文件目录已经帮你创建好了 vscode中按下F5可以帮你打开调试,预览创建好的 ...

  6. ECharts切换主题

    初始化接口,返回ECharts实例,其中dom为图表所在节点,theme为可选的主题,内置主题('macarons', 'infographic')直接传入名称,自定义扩展主题可传入主题对象.如: v ...

  7. Ubuntu 下 CodeBlocks 修改用户自定义颜色主题 及 更新CodeBlocks到最新版本

    Code::Blocks默认的白色编辑器界面看久了眼睛很累, 所以想换成dark的主题, 眼睛会舒服些. 1. 安装好codeblocks后, 先运行一次, 关闭, 这时程序会提示你是否要保存defa ...

  8. vue——echarts更换主题

    链接:https://blog.csdn.net/Sunshine0508/article/details/90067437 //等配置安装好了以后 在main.js里引入echarts主题的js,一 ...

  9. echarts 自定义主题

    https://blog.csdn.net/flitrue/article/details/52841338 import $echarts from 'echarts' import  'echar ...

随机推荐

  1. uwp 动画之圆的放大与缩小

    xml code --------------------------------------------------- <Page x:Class="MyApp.MainPage&q ...

  2. C# 排序列表（SortedList）

    SortedList 类代表了一系列按照键来排序的键/值对,这些键值对可以通过键和索引来访问. 排序列表是数组和哈希表的组合.它包含一个可使用键或索引访问各项的列表.如果您使用索引访问各项,则它是一个 ...

  3. mycat<三>

    server.xml文件 <?xml version="1.0" encoding="UTF-8"?> <!-- - - Licensed u ...

  4. ubuntu开机自启设置 Ubuntu16.04下测试OK

    在~/.config/autostart/目录下,添加xxx.desktop文件,内容如下: [Desktop Entry] Type=Application Name=start apps NoDi ...

  5. ORB_SLAM2 Tracking流程

  6. 2021年哪个低代码平台更值得关注？T媒体盘点国内主流低代码厂商

    2020年圣诞前夜,国内知名创投科技媒体T媒体旗下的T研究发布了2020中国低代码平台指数测评报告.报告除了对国内低代码行业现状进行总结外,还对主流低代码厂商的市场渗透和曝光进行测评. 报告认为,低代 ...

  7. centos7 修改时间

    2021-07-28 查看日志时发现系统时间不正确,故修改时间 # 查看当前系统时间 date # 修改当前系统时间 date -s "2021-7-28 17:03:00" # ...

  8. C语言编译步骤

    C语言编译步骤:   1.预处理(hello.i ):宏定义展开.条件编译等,同是将代码中的注释删除,这里并不会检查语法 2.编译(hello.s):检查语法,将预处理后文件编译生成汇编文件. 3.汇 ...

  9. vue 元素拖动效果

    <draggable v-model="preface" chosenClass="chosen" ghost-class="ghost&quo ...

  10. client-go实战之一：准备工作

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...