echarts的学习(五)内置主题与自定义主题的学习

ECharts的高级使用(主题、调色板、颜色渐变) 目录 1. 主题 1.1 内置的主题 init方法有两个参数,第一个参数代表的是一个dom节点,第二个参数代表你需要使用哪一套主题 默认内置了两套主题,light、dark <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n 阅读详情

内置主题

在这里插入图片描述

默认内置了两套主题 , light dark
在这里插入图片描述

创建charts对象的时候,多了一个参数,里面的值就可以写默认的2个值

代码是

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    // init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表你需要使用哪一套主题
    // 默认内置了两套主题 , light  dark
    var mCharts = echarts.init(document.querySelector("div"), 'dark')
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: yDataArr,
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60
          },
          barWidth: '30%'
        }
      ]
    };
    mCharts.setOption(option)
  </script>
</body>

</html>

当参数是dart 的时候,图形是

在这里插入图片描述

当参数是light 的时候

在这里插入图片描述
以上就是默认的两个背景颜色。

自定义主题

在这里插入图片描述
在线编辑主题 https://echarts.apache.org/zh/theme-builder.html

从以上的网址里面自定义主题,并且下载主题
以上 的网址打开是这样的

在这里插入图片描述
我们自定义完成,点击下载

在这里插入图片描述
在这里插入图片描述
以上就是我们下载的主体

引入到我们的代码里面

在这里插入图片描述
就可以使用了

在这里插入图片描述
引入之后就和默认的主体的使用方式一样了。

从零开始的echarts学习(1.初始化与颜色主题) 开头简述 作为echarts系列第一部分,首先来了解一下最基本的配置,echarts的初始化我在下面会简单说明,万事开头难,所以我主动让它降低一些难度。 echarts安装 echarts和jquery、bootstrap等等API一样,只要直接引用即可,模块化的引用方式可以参考这个,如果你得项目中只包含其中几种类型的图表,那你完全可以只引用相应的文件,而不需要引用完整的echarts //fro... 阅读详情

相关推荐

STC15单片机双串口通信实战:串口2配置与多设备交互

本文详细介绍了STC15单片机双串口通信的实战配置,重点解析串口2的硬件连接、寄存器设置及多设备交互实现。通过实际项目案例和完整代码示例,帮助开发者快速掌握STC15串口2的配置技巧,解决常见通信问题,提升嵌入式系统开发效率。

weixin_29174013的博客 258

echarts默认的颜色

echarts默认的颜色方案是 [‘#c23531’,‘#2f4554’, ‘#61a0a8’, ‘#d48265’, ‘#91c7ae’,‘#749f83’, ‘#ca8622’, ‘#bda29a’,‘#6e7074’,‘#546570’, ‘#c4ccd3’]

weixin_50885665的博客 3107

企业级Windows 10镜像封装实战:从规划到部署的完整指南

系统部署与镜像封装是企业IT运维中的核心基础技术,其原理在于通过创建预配置的系统模板,实现大规模计算机环境的快速、标准化部署。这项技术的核心价值在于将重复性手动操作转化为自动化流程,显著提升运维效率,保障环境一致性,并强化安全基线管理。在实际应用场景中,它尤其适用于新设备批量初始化、系统恢复和标准化环境构建。本文聚焦于Windows 10镜像的封装实践,深入探讨了使用Sysprep进行系统通用化处理以及通过DISM工具捕获WIM格式镜像的具体方法,为企业IT人员提供从零构建标准化系统镜像的完整路径。

weixin_33843947的博客 359

echarts 默认颜色

echart默认颜色

fivestar2009的博客 3305

奥比中光Gemini335L SDK实战:从标定参数到3D点云转换

本文详细介绍了奥比中光Gemini 335L深度相机的SDK实战应用,重点讲解如何跳过繁琐的棋盘格标定,直接调用出厂预标定参数实现高效的3D点云转换。通过解析内参、外参获取及四种核心坐标转换模式,并结合OpenCV等工具,指导开发者快速将相机集成到机器人抓取、三维测量等项目中,实现开箱即用的3D视觉解决方案。

raspberrypi5的博客 643

STM32 移植LwIP 实现网线插拔自动恢复

STM32 移植LwIP 之后,能正常联网通讯,但是发现2个问题, 1、上电初始化前,未插入网线,之后就无法获取到IP地址(DHCP) 2、正常通讯过程中,拔掉网线,然后插回去,不知道如何复位 先看一下LWIP初始化代码 /** * LwIP initialization function */ int MX_LWIP_Init() { /* Initilialize the LwIP stack with RTOS */ tcpip_init( NULL, NULL );

tiantangmoke的博客 8075

Echart 数据可视化图表基础

Echarts 是一个开源的免费的成熟的商业级图表可视化框架,是 Apache 开源社区的顶级项目之一,也是国内使用最多和最为广泛的可视化图表框架之一。数据可视化图表框架并没有一个统一的行业标准,比较常见的有 D3、Highcharts 等,Echarts 因其图表丰富、主题多样美观大方、开源免费、文档资料健全,逐渐成为国内用户的首选,是事实上的行业标准。

我乐了的博客 6174

UCIE Specification详解(二)

UCIe架构概述。

Crazzy_M的博客 3312

「ECharts」主题这样配置才能更绚丽

本文主要介绍 ECharts 主题相关配置,和动画加载效果如何使用。

imByte的博客 7594

基于 Simulink 的双向 DC/AC 逆变器中 IGBT/MOSFET 寄生参数影响分析实战教程

摘要:本教程详细解析了Simulink中IGBT/MOSFET寄生参数对双向DC/AC逆变器的影响。通过对比理想模型与含寄生参数(如20nH内部电感、50nH回路电感)的仿真,揭示了电压尖峰、高频振荡等实际问题。建模步骤包括搭建基准电路、引入寄生参数、配置高精度求解器(步长10ns),并给出抑制措施:添加RC缓冲电路、调整驱动电阻。关键发现:寄生参数会显著增加开关损耗和EMI噪声,需通过参数扫描优化设计。教程还提供了代数环报错、仿真速度优化等实战技巧,帮助工程师从理想仿真过渡到高保真分析。

xiaoheshang_123的博客 69

高云FPGA系列教程(1):FPGA和ARM开发环境搭建

至此,高云FPGA和MCU开发环境就搭建完成了,整体还是比较简单的,几乎是一键完成,下一篇文章我们进行实际的FPGA和MCU开发。本文是高云FPGA系列教程的第1篇文章。

whik1194的博客 6195

echarts常用图表颜色

FF4343#FCA146#F6D54A#45DBF7#44AFF0#4777F5#FF7811#2ED1CB#21DC2F#F845F1#AD46F3#5045F6。

收集、分享 1729

使用Python实现深度学习模型:智能极端天气事件预测

在本项目中,我们成功利用Python和Keras库构建了一个基于LSTM的极端天气预测模型。通过时间序列数据,模型能够识别天气趋势并预测未来的极端天气事件。尽管这是一个简化的示例,但它为实际应用中如何利用深度学习进行天气预测提供了一个很好的基础。随着更精确的数据和更多的特征信息,类似的模型可以进一步扩展到其他极端事件预测上,如风暴预警、气象灾害评估等。

Echo_Wish 730

vue中 echarts 自定义主题,切换主题,属性配置

1、获取主题js文件(在echarts官网上下载官方提供的主题,或者自定义主题) https://echarts.baidu.com/theme-builder/ 2、将下载得到的themejs文件引用到页面中 node_model中的主题文件是默认配置,每次更新都会回到初始值 import 'echarts/theme/shine' 自定义存放管理时,报错 主题文件js报错ECh...

u010969088的博客 9722

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

VUE中Echatrs主题的使用(官方主题、自定义主题)

本文主要分享了如何使用ECharts官方提供的主题以及如何引入自定义的主题;

Willing卡卡的博客 5172

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

echarts 自定义主题

echarts 自定义主题

weixin_43931625的博客 4469

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

ECharts学习--主题设置

(1)内置主题 echarts中默认主题有两个:light、dark 在初始化对象方法中,init可以指明: (1)dark var mCharts = echarts.init(document.querySelector('div'),'dark') (2);light var mCharts = echarts.init(document.querySelector('div'),'light') (二)自定义主题 (1)在主题编辑器中编辑主题 网址:https://.

有一种陪伴叫做jay的博客 1475

vue echarts引入 自定义主题

vue echarts引入 自定义主题vue echarts引入 自定义主题首先安装echarts在main.js中引入在vue文件中使用下载自定义主题在vue文件中引入 2019/10/30 vue echarts引入 自定义主题 首先安装echarts npm install echarts --save 在main.js中引入 import echarts from 'echarts'...

weixin_43640258的博客 5224

34-Vue之ECharts高级-设置主题

Vue之ECharts高级-设置主题

小白的博客 2465

react中使用echarts 主题自定义

依赖: yarn add echarts echarts-for-react --save 引入: import ReactEcharts from 'echarts-for-react'; import echarts from 'echarts'; 主题自定义JS: 到官网进行下载主题颜色的json,js https://echarts.baidu.com/theme-buil...

Daisy 5773

Echarts 开发图表自定义主题,并实现动态切换

文章目录一、下载官方主题二、引入主题JS文件三、初始化主题 - 静态配置四、动态切换主题配置五、完整源代码 好文章 记得收藏+点赞+关注额 !!! ---- Nick.Peng 一、下载官方主题 下载地址:官网 Echarts 主题下载,除了下面官方提供的主题外,还可以定制你自己的主题 将下载的主题js文件,保存在项目同级theme文件夹下 二、引入主题JS文件 指定 Echarts 的...

Nick.Peng's Blogs 5130

React Native ECharts自定义主题教程:打造品牌专属的图表样式

想要为你的React Native应用创建独特、品牌化的图表吗?React Native ECharts提供了强大的主题定制功能,让你可以轻松打造专属的图表样式!🎨 本教程将带你深入了解如何通过自定义主题,让你的数据可视化图表与品牌设计完美融合,提升应用的专业性和用户体验。 ## 为什么需要自定义主题?🤔 在移动应用开发中,图表不仅是数据展示的工具,更是品牌形象的重要组成部分。使用默认的图

gitblog_00994的博客 618

Flutter ECharts扩展指南:如何集成自定义主题与第三方插件

Flutter ECharts是一个功能强大的Flutter组件,它允许开发者以响应式方式在Flutter应用中使用Apache ECharts。通过本指南,你将学习如何轻松集成自定义主题和第三方插件,为你的数据可视化项目增添个性化和功能性。 ### 为什么选择Flutter ECharts? Flutter ECharts将Apache ECharts的强大数据可视化能力与Flutter的跨

gitblog_00853的博客 844

echarts图表自定义按钮导出和echarts内置导出设置

自定义按钮导出 var option = { title : { text: '一周气温变化', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['最高气温','最低气温'] }, ...

weixin_44446223的博客 3521

高级 ECharts 技巧:自定义图表主题与样式

ECharts 的主题是指定义图表样式的配置项,包括颜色、字体、线条样式等。通过预设主题,你可以快速更改图表的整体风格,而自定义主题则允许你在此基础上进行个性化设置。定义主题的基本属性(如颜色、字体等)。结合 ECharts 提供的主题 API 注册自定义主题。在图表初始化时使用自定义主题。color:设置图表的主色调数组。title:设置标题的样式。textStyle:全局文本样式。grid:设置图表网格的样式。linebarpie等:各类图表的特定样式。

1893

VUE中Echatrs主题的使用(官方主题、自定义主题),JavaScript的常用内置函数

后记总结一下这三次面试下来我的经验是:一定不要死记硬背,要理解原理,否则面试官一深入就会露馅!代码能力一定要注重,尤其是很多原理性的代码(之前两次让我写过Node中间件,Promise.all,双向绑定原理,被虐的怀疑人生)!尽量从面试官的问题中表现自己知识的深度与广度,让面试官发现你的闪光点!多刷面经!

2401_84092727的博客 1061
上一篇: echarts的学习(四)饼图,地图相关的学习
下一篇: echarts的学习(六)调色盘的学习
一写代码就开心
博客等级 码龄7年 2万+粉丝 1037原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一写代码就开心

你的打赏将是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值