为什么需要使用颜色主题

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

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

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

因为人都是视觉动物

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

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

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

使用默认颜色主题

我们发现的问题

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

真的是看着不是很舒服

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

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

主要是改变颜色

配置颜色的两种方式

对于配置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. 链表LinkedList、堆栈Stack、集合Set

    链表LinkedList LinkedList 也像 ArrayList 一样实现了基本的 List 接口,但它在 List 中间执行插入和删除操作时比 ArrayList 更高效.然而,它在随机访问 ...

  2. 参数化SQL

    原文:http://www.cnblogs.com/aito/archive/2010/08/25/1808569.html 避免SQL注入的方法有两种:一是所有的SQL语句都存放在存储过程中,这样不 ...

  3. RabbitMq四种模式介绍和授权

    rabbitmqctl change_password admin admin123 修改admin密码 界面管理和授权操作 1新增用户 rabbitmqctl add_user admin amin ...

  4. MySQL高可用主从复制简介

    原文转自:https://www.cnblogs.com/itzgr/p/10233932.html作者:木二 目录 一 简介 1.1 概述 二 技术原理 2.1 支持的复制类型 2.2 技术特点 2 ...

  5. Win10 安装WSL2与 Linux子系统

    Win10安装Linux子系统 1. 正常情况 步骤1 - 启用 Windows Linux版本子系统(Windows Subsystem for Linux) dism.exe /online /e ...

  6. 🏆【Alibaba工具型技术系列】「EasyExcel技术专题」摒除OOM！让你的Excel操作变得更加优雅和安全

    前提概要 针对于后端开发者而言的,作为报表的导入和导出是一个很基础且有很棘手的问题!之前常用的工具和方案大概有这么几种: JXL(Java Excel API 工具服务),此种只支持xls的文件格式, ...

  7. 一个简单的URL访问权限校验

    前言 目前最流行的两大安全框架:SpringSecruity.Shiro 权限控制,无非就是:前端控件是否可见.是否允许请求/访问URL 本文分享一个简单的URL访问权限校验,支持/./*./**等情 ...

  8. idea配置tomcat及中文乱码解决

    放在前面:不要使用tomcat10,访问自己的页面会报404错误,目前无解,在这个坑爬了一下午,最终换了tomcat 9才解决.所以我选择了tomcat 9 + idea 2021.2版本 配置步骤: ...

  9. python 加速运算

    原文链接:https://blog.csdn.net/qq_27009517/article/details/103805099 一.加速查找 1.用set而非list import time dat ...

  10. Walker

      emmm.......随机化.   好吧,我们不熟.   考虑随机选取两组数据高斯消元消除结果后带入检验,能有超过1/2正确就输出.   其实方程就四个,手动解都没问题.   只是要注意看sin与 ...