echarts图表主题--马卡龙macarons--自己配置主题颜色

article/2025/9/8 5:47:04

用过echarts的人都几道,他的官网风格颜色对比强烈,这样儿式的:
在这里插入图片描述
大多时候和你的项目风格难免冲突,它有一些风格配置,我觉得马卡龙这个配色就很好:
在这里插入图片描述
当然,既然是配置项,肯定不止这一种好看的,在官网上找到文档里的echarts样式编辑,里面有一个主题编辑器编辑器入口,打开如下:
在这里插入图片描述
看左边框选的地方,都是官方进行的配色方案,都挺好看的,完全可以满足需求,如果觉得实在无法满足,也可以看下面的配置菜单,自己配颜色,完了之后上面有一个导出配置,是一个.json文件,把这个文件放进你的项目里,用的时候引入:

// 假设主题名称是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {echarts.registerTheme('vintage', JSON.parse(themeJSON))var chart = echarts.init(dom, 'vintage');
})

然后你就能看到灰常美丽的图表了。


http://chatgpt.dhexx.cn/article/DrwrjlSN.shtml

相关文章

若依vue --雷达图封装使用

大概效果: 如下 1:封装 <template><div :class"className" :style"{ height: height, width: width }" /> </template><script> import echarts from "echarts"; require("echarts/theme/macarons"); // e…

vuejs集成echarts的一些问题

最近在做Beetlex的数据分析平台&#xff0c;在开发这个产品过程中涉及到大量的数据图表展示功能&#xff1b;由于产品前端使用的是vuejs开发&#xff0c;所以在集成echarts或多或少会碰到一些问题&#xff0c;在这里主要讲解一下碰到的问题和解决方法。 在讲解之前先分享一下实…

Echarts主题构建工具的使用

Echarts自带丰富的主题配色&#xff0c;对于有独立的UI设计&#xff0c;主题的应用范围不是很广泛&#xff0c;但是官方的配色还是具有很大的参考价值的。 传送门&#xff1a;https://echarts.apache.org/zh/theme-builder.html 下载或复制以下的主题保存至 *.js 文件&#x…

Echarts-主题切换

从网上搜索了相关的方法&#xff0c;是主题之前的切换&#xff0c;但是用的是下拉框类型的&#xff0c;也可以设置div样式&#xff0c;参考官网那种 设置一个div&#xff0c;通过三个图片的点击效果实现切换主题的功能 我用的jQuery和Echarts是cdn&#xff0c;如果您想引用js文…

vue项目中Echarts图表完整引入、按需加载以及修改主题色

一、完整引入Echarts 下载安装echarts包 npm install echarts -Soryarn add echarts 定义图表显示的容器&#xff0c;并进行渲染 <template><div id"myChart" ref"myChart"></div> </template><style>#myChart {widt…

动态创建多个echarts图表

效果: <template> <div class"wrapper"><Row v-for"(items, index) in secondeData" :key"index"><Col span"12" v-for"m in items" :key"m"><div class"chart" :ref"…

echarts基础应用

第一步&#xff1a;下载相应的js文件&#xff1a;echarts.min.js和macarons.js&#xff0c;其中macarons.js文件时主题文件。 第二步&#xff1a;编写index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">&…

关于在vue中动态渲染echart组件,渲染失败的问题

以下chart是在正常页面中&#xff08;不在蒙层中&#xff09;&#xff1a; 用echart组件时&#xff0c;渲染数据多数情况下会是动态添加&#xff0c;也就是前台获取数据&#xff0c;通过props传递给echart组件。对于vue生命周期函数执行顺序不熟悉的小伙伴儿&#xff0c;会碰…

echart vue

文档&#xff1a; https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 1、条形 <template><div> <!-- 包其他内容需要有个外div --><div :class"className" :style"{height:height,width:…

Vue + Echarts自定义图标颜色及柱状图动态伸缩(定时)

1、效果图&#xff1a; 2、Vue代码 <template><!--区域分布数量柱状图--><div class"emp-area"></div> </template><script>require(/assets/theme/chalk)require(echarts/theme/macarons)export default {name: "StaffA…

如何使用pyecharts中的主题样式?

如何使用pyecharts中的主题样式&#xff1f; pyechart为用户提供了一套使用方便的主题风格。 本篇图文将总结pyecharts.globals中ThemeType所有主题风格并进行详细的解释。 class _ThemeType:BUILTIN_THEMES ["light", "dark", "white"]LIGH…

python亲和数_用 Python 分析了 5 万条相亲数据,告诉你男女相亲背后的秘密

作者| 叶庭云 责编 | 张文 来源 | 转载自修炼 Python(ID&#xff1a;yetingyun_python) 前言 数据来源&#xff1a;https://www.zhenai.com/zhenghun/ 本文利用 Python 分析了按城市寻找所有地区的征婚信息&#xff0c;看看相亲男女的画像。 数据查看和预处理 导入用到的库 …

vue中echarts使用案例:饼图(可直接使用)

目录 功能、效果图&#xff1a; 代码实现 1、下载echarts包&#xff1a;终端运行 2、代码 3.运行项目&#xff1a;终端运行 4、可能遇到的错误 具体代码详解&#xff1a; 功能、效果图&#xff1a; 1.点击对应模块&#xff0c;放大并显示数据 2、点击下方图标&#xff0c…

Python绘制柱状图之可视化神器pyecharts(一)

目录 pyecharts介绍 特性 优势 展示 柱状图模板系列 水晶柱状图 解决X轴标签过长的柱状图 自定义平均刻度标签&#xff08;方便查看超出范围&#xff09; 翻转X Y轴柱状图 可以移动的X轴柱状图&#xff08;适合数据类别过多&#xff09; 可以移动的Y轴柱状图&#x…

已解决:vue echart 动态获取数据且定时刷新

文章目录 写在前面需求①需求②需求③无效的解决办法1&#xff1a;无效的解决办法2有效的解决办法 写在前面 我太难了&#xff0c;搞一个echart仪表盘&#xff0c;需求一步步分解&#xff1a; ①一开始是写死的假数据&#xff0c;图表成功显示在页面上; ②和后台约定数据类型格…

Python绘制柱状图之可视化神器pyecharts(二)

目录 主题介绍 图表参数 主题详解 柱状图模板系列 海量数据柱状图动画展示 收入支出柱状图&#xff08;适用于记账&#xff09; 我们在日常的生活中&#xff0c;有收入也有支出&#xff0c;这个模板就是把收入和支出直观的展示在读者面前。 三维数据叠加 柱状图与折线…

day07 pyecharts制图

目录 Python配置安装pyecharts 一、柱状图的使用二、折线图三、饼图四、地图五、词云六、组合图 Python配置安装pyecharts Python配置国内镜像源 pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple pycharm配置pyecharts 一、柱状图的使用 # 导入…

vue-echarts主题切换+选择面板实现

通过实现主题选择面板&#xff0c;更方便的对echarts图表进行主题的切换&#xff0c;并且支持饼状图、折线图、柱状图等多类型echarts图表。 目录 1、实现过程 1.1、导入echarts主题JS文件 1.2、添加选择按钮图片 1.3、添加按钮 1.4、主题选择面板实现 1.5、初始化echart…

echarts 2.0 macarons主题安装

2019独角兽企业重金招聘Python工程师标准>>> 主题下载: http://echarts.baidu.com/doc/example/theme/macarons.js 其他主题改名字就好了.[无责任猜测] 这里采用AMD加载方式 [博主用的是requirejs] 在main.js中 require.config({paths:{echarts:js/echarts/echarts…

魔法值及魔法值处理方法

魔法值 什么是魔法值 所谓的魔法值就是在代码中直接出现的数字。   PS&#xff1a;代码中有魔法值会造成代码可读性低&#xff08;与代码量成正比&#xff09;。还会造成维护困难&#xff0c;改动一个数值便要大动干戈&#xff0c;牵一发而动全身。应当尽力消灭或减少魔法值…