为什么需要使用颜色主题

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

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

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

因为人都是视觉动物

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

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

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

使用默认颜色主题

我们发现的问题

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

真的是看着不是很舒服

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

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

主要是改变颜色

配置颜色的两种方式

对于配置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. go语言初始化结构体指针

    go语言初始化结构体指针 head:=&ListNode{} 或者 head:=new(ListNode)

  2. yum命令报错File "/usr/bin/yum", line 30 except KeyboardInterrupt, e:

    使用yum命令报错File "/usr/bin/yum", line 30 except KeyboardInterrupt, e: 问题出现原因:yum包管理是使用python2 ...

  3. Linux CentOS7 安装配置 IPtables

    2021-08-11 1. 前言 防火墙其实就是实现 Linux 下访问控制功能的,分为硬件和软件的防火墙两种类型.无论在何网络中,防火墙工作的地方一定是网络的边缘.防火墙的策略.规则就是去定义防火墙 ...

  4. Python语法之函数、引用和装饰器

    所谓函数,就是把具有独立功能的代码块组织成为一个小模块,在需要的时候调用 函数是带名字的代码块,用于完成具体的工作 需要在程序中多次执行同一项任务时,你无需反复编写完成该任务的代码,而只需调用该 任务 ...

  5. JS 之 每日一题 之 算法 （ 有多少小于当前数字的数字 ）

    给你一个数组 nums,对于其中每个元素 nums[i],请你统计数组中比它小的所有数字的数目. 换而言之,对于每个 nums[i] 你必须计算出有效的 j 的数量,其中 j 满足 j != i 且 ...

  6. 关于Golang的学习路线

    基础 安装golang环境 Golang基础,流程控制,函数,方法,面向对象 网络编程(自己做一个简单的tcp的聊天室,websocket,http,命令行工具) 并发(可以看一下并发爬虫或者下载器的 ...

  7. 判断input radio选中那个

    var _sex=$("input[name='sex']:checked").val(); if(_sex==null){ layer.msg("请选择性别" ...

  8. aes加解密前后端-后台

    一.web.xml: <filter> <filter-name>fastLoginFilter</filter-name> <filter-class> ...

  9. Java字符串常量池及字符串判等解析

    一.理解"=="的含义 "=="常用于两个对象的判等操作,在Java中,"=="主要有以下两种用法: 1.基础数据类型:比较的是他们的值是否 ...

  10. SQL Server Management Studio --- SSMS语言更换

    问题描述 在安装了En版后,想更换为中文版,但换了中文安装源还是英文. 解决方法 运行 SQL Server Management Studio 通过菜单选择你想要使用的语言: 中文版:"工 ...