为什么需要使用颜色主题

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

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

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

因为人都是视觉动物

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

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

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

使用默认颜色主题

我们发现的问题

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

真的是看着不是很舒服

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

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

主要是改变颜色

配置颜色的两种方式

对于配置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. 信号量-Semaphore、SemaphoreSlim

    核心类:Semaphore,通过int数值来控制线程个数. * 通过观察构造函数 public Semaphore(int initialCount, int maximumCount);: * in ...

  2. redis并发锁

    1.应对并发场景 避免操作数据不一致 将对redis加锁 2.考虑到异常状况无法释放锁,导致死锁 将代码块进行try-catch处理 3.考虑try时宕机依然导致死锁 对锁添加时效性,添加过期时间 4 ...

  3. JFrame显示刷新

    1 import java.awt.BorderLayout; 2 import java.awt.Font; 3 import java.awt.event.ActionEvent; 4 impor ...

  4. 打印菱形图案（PTA）

    打印菱形图案 本题要求编写程序,打印一个高度为n的.由"*"组成的正菱形图案. 标题输入格式 输入在一行中给出一个正的奇数n. 输出格式 输出由n行星号"*"组 ...

  5. jwt《token》

    payload与claims只能存在一个这部分是jwt源码:依赖如下:官方文档的依赖 <dependency> <groupId>io.jsonwebtoken</gro ...

  6. 解决移动端click事件300ms延迟的问题

    方法1.部分浏览器的<meta>标签加上width=device-width就能解决. 方法2.引入fastclick.js库 <!DOCTYPE html> <html ...

  7. Learning ROS: Managing System dependencies

    Download and install the system dependencies for turtlesim: roscd turtlesim cat package.xml rosdep i ...

  8. centos7 Tomcat 多项目配置

    2021-07-30 1. Tomcat 各目录功能说明 bin :脚本文件目录,存放启动和关闭 Tomcat 的脚本文件conf:存放 Tomcat 的配置文件,server.xml 尤其重要log ...

  9. 记一次 .NET 某机械臂智能机器人控制系统MRS CPU爆高分析

    一:背景 1. 讲故事 这是6月中旬一位朋友加wx求助dump的故事,他的程序 cpu爆高UI卡死,问如何解决,截图如下: 在拿到这个dump后,我发现这是一个关于机械臂的MRS程序,哈哈,在机械臂这 ...

  10. Spring系列之不同数据库异常如何抽象的？

    前言 使用Spring-Jdbc的情况下,在有些场景中,我们需要根据数据库报的异常类型的不同,来编写我们的业务代码.比如说,我们有这样一段逻辑,如果我们新插入的记录,存在唯一约束冲突,就会返回给客户端 ...