为什么需要使用颜色主题

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

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

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

因为人都是视觉动物

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

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

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

使用默认颜色主题

我们发现的问题

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

真的是看着不是很舒服

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

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

主要是改变颜色

配置颜色的两种方式

对于配置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. 解析和遍历一个HTML文档

    如何解析一个HTML文档: String html = "<html><head><title>First parse</title>< ...

  2. CompletionService简介、原理以及小案例

    博客1:http://www.oschina.net/question/12_11255 博客2: CompletionService简介 CompletionService与ExecutorServ ...

  3. Redis常用技术

    Xml配置: <?xml version='1.0' encoding='UTF-8' ?> <!-- was: <?xml version="1.0" e ...

  4. nacos在nginx下集群以及数据库问题

    持久化mysql时指定数据库编辑application.properties spring.datasource.platform=mysql db.num=1 db.url.0=jdbc:mysql ...

  5. 微信小程序的button按钮设置宽度无效

    亲,你是不是也遇到了微信小程序的button按钮设置宽度无效.让我来告诉你怎么弄 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 1 2 ...

  6. jmeter实际场景应用之测试上传excel文件

    日常工作上测试的时候,会有一些场景是导入/上传文件.我们系统多是excel文件,这里就用excel文件为例,详述一下此次测试遇到的坑.最终结果是成功的,请看到最后! 1.获取接口的一些参数信息 先按F ...

  7. 一个double free相关问题的澄清

    引言 前一阵定位 Oracle 的 OCI 接口相关的一个内存释放问题,在网上看到了链接如下的这篇文章: 一个C++bug引入的许多知识 看到后面说 vector 里的两个单元里的内部成员指针地址是一 ...

  8. Linux制作Raid

    1.启动服务器 2.在服务器出现提示的时候,根据提示进入Raid管理界面(Ctrl + R),Raid管理界面如下: 3.删除原有的Raid 4.新建Raid 第一步:进入新建Raid的界面 第二步: ...

  9. Python - 面向对象编程 - __del__() 析构方法

    del 语句 Python 提供了 del 语句用于删除不再使用的变量 语法 del 表达式 删除变量的栗子 var = "hello" del var print(var) # ...

  10. Python习题集（十一）

    每天一习题,提升Python不是问题!!有更简洁的写法请评论告知我! https://www.cnblogs.com/poloyy/category/1676599.html 题目 如果一个正整数等于 ...