关键词：
ECharts高级-设置主题
前言
- 本篇来学习下ECharts中如何设置图表主题
内置主题
- ECharts 中默认内置了两套主题: light dark
var chart = echarts.init(dom, 'light')
var chart = echarts.init(dom, 'dark')
<!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>ECharts高级--主题</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height: 400px"></div>
<script>
// init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表你需要使用哪一套主题
// 默认内置了两套主题 , light dark
var myCharts = echarts.init(document.getElementById('app'), 'dark')
var option =
xAxis:
type: 'category', // 类目轴
data: ['测试', '研发', '产品']
,
yAxis:
type: 'value' // 数值轴
,
title:
text: '岗位', // 标题文本
link: 'https://blog.csdn.net/IT_heima', // 标题超链接
target: 'blank', // 打开新窗口， self: 当前窗口
textStyle: // 文字样式
color: 'pink', // 颜色
fontWeight: 'bold' // 字体粗细
,
series: [
name: '岗位',
type: 'bar', // 图表类型 bar:柱状图 line:折线图 pie:饼图
data: [10, 90, 20],
barWidth: '30%',
label:
show: true,
rotate: 20
]
myCharts.setOption(option)
</script>
</body>
</html>
- 效果
自定义主题
-
下载主题(保存为js文件)
-
引入主题 js 文件(以主题名称命名的js文件)
-
在 init 方法中使用主题
- 一般是下载时自定义的主题名称(可在下载的主题js文件中找到名称)
- 完整代码
<!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>ECharts高级--主题</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<script src="lib/CustomTheme.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height: 400px"></div>
<script>
// init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表你需要使用哪一套主题
var myCharts = echarts.init(document.getElementById('app'), 'CustomTheme')
var option =
xAxis:
type: 'category', // 类目轴
data: ['测试', '研发', '产品']
,
yAxis:
type: 'value' // 数值轴
,
title:
text: '岗位', // 标题文本
link: 'https://blog.csdn.net/IT_heima', // 标题超链接
target: 'blank', // 打开新窗口， self: 当前窗口
textStyle: // 文字样式
color: 'pink', // 颜色
fontWeight: 'bold' // 字体粗细
,
series: [
name: '岗位',
type: 'bar', // 图表类型 bar:柱状图 line:折线图 pie:饼图
data: [10, 90, 20],
barWidth: '30%',
label:
show: true,
rotate: 20
]
myCharts.setOption(option)
</script>
</body>
</html>
- 效果：与预览效果一致，类目轴颜色修改为浅绿色
33-vue之echarts-仪表盘图(代码片段)
ECharts-仪表盘图前言仪表盘的特点仪表盘的基本实现仪表盘的常见效果前言本篇来学习写仪表盘图仪表盘的特点可以更直观的表现出某个指标的进度或实际情况仪表盘的基本实现ECharts最基本的代码结构准备数据,设置给series下的da... 查看详情
34-vue之echarts高级-调色盘(代码片段)
ECharts高级-调色盘前言调色盘主题调色盘全局调色盘局部调色盘渐变颜色前言本篇来学习下ECharts中调色盘的使用调色盘它是一组颜色，图形、系列会自动从其中选择颜色,不断的循环从头取到尾,再从头取到尾,如此往复主要分... 查看详情
37-vue之echarts高级-交互api(代码片段)
交互API前言全局ECharts对象echartsInstance对象前言本篇来学习下ECharts中交互API的使用全局ECharts对象全局echarts对象是引入echarts.js文件之后就可以直接使用的init：初始化ECharts实例对象，使用主题registerTheme：注册主题echarts... 查看详情
35-vue之echarts高级-样式及自适应(代码片段)
ECharts高级-样式及自适应前言样式直接样式高亮样式自适应前言本篇来学习下样式及自适应的使用样式直接样式这些样式一般都可以设置颜色或者背景或者字体等样式,他们会覆盖主题中的样式itemStyletextStylelineStyleareaStylelabel<!DO... 查看详情
35-vue之echarts高级-样式及自适应(代码片段)
ECharts高级-样式及自适应前言样式直接样式高亮样式自适应前言本篇来学习下样式及自适应的使用样式直接样式这些样式一般都可以设置颜色或者背景或者字体等样式,他们会覆盖主题中的样式itemStyletextStylelineStyleareaStylelabel<!DO... 查看详情
echarts的高级使用(主题调色板颜色渐变)(代码片段)
目录1.主题1.1内置的主题init方法有两个参数，第一个参数代表的是一个dom节点，第二个参数代表你需要使用哪一套主题默认内置了两套主题，light、dark<!DOCTYPEhtml><htmllang="en"><head><metacharset=&#... 查看详情
36-vue之echarts高级-动画的使用(代码片段)
ECharts高级-动画的使用前言加载动画增量动画动画的配置前言本篇来学习下ECharts中动画的使用加载动画showLoading()：显示加载动画，一般在获取图表数据之前显示加载动画hideLoading()：隐藏加载动画，在获取图表数... 查看详情
echarts高级动画的使用交互api(代码片段)
1.1.动画的使用1.1.1.加载动画ECharts已经内置好了加载数据的动画,我们只需要在合适的时机显示或者隐藏即可显示加载动画mCharts.showLoading()一般,我们会在获取图表数据之前显示加载动画 隐藏加载动画mCharts.hideLoading()一般,我们会... 查看详情
36-vue之echarts高级-动画的使用(代码片段)
ECharts高级-动画的使用前言加载动画增量动画动画的配置前言本篇来学习下ECharts中动画的使用加载动画showLoading()：显示加载动画，一般在获取图表数据之前显示加载动画hideLoading()：隐藏加载动画，在获取图表数... 查看详情
php高级自定义字段：主题包和设置(代码片段)
echarts-特殊需求实现代码汇总之饼图篇
2018-07-24 15:36:43 起- 饼图单项不同颜色的设置效果图：实现：说明：其实很简单，就是设置全局的color属性即可。color属性可以是一套数组，里边的样式以字符串格式设置。设置以后饼图每一项会依照顺序使用数组的颜... 查看详情
echarts-特殊需求实现代码汇总之柱图篇
其实包括饼图、线图在内，和柱图都一样的感觉，他们的配置项基本也是对应的那几个，所以想实现某些相似的效果，只要找到对应的属性就可以了。1.柱图渐变色设置 还记得上篇线图中的实现是在areaStyle的里边设置normal状... 查看详情
26-vue之echarts-柱状图(代码片段)
ECharts-柱状图前言柱状图实现步骤柱状图常见效果标记显示前言本篇来学习下柱状图的实现柱状图实现步骤ECharts最基本的代码结构准备x轴的数据准备y轴的数据准备option,将series中的type的值设置为:bar<!DOCTYPEhtml><htmllang=... 查看详情
emscripten教程之优化你的代码
作者：云荒杯倾欢迎加入Wasm和emscripten技术交流群，群聊号码：939206522。这是关于Emscripten的系列文章，更多文章请看下面链接。Emscripten代码移植系列文章Emscripten代码移植主题系列文章是emscripten中文站点的一部分内容。本文是第... 查看详情
请教百度echarts的使用问题
...，通过调用开发包方法，有两种初始化方式，1.varmyChart=echarts.init(document.getElementById("echart"));2.varmyChart=require('echarts').init(document.getElementById("echart"));一般建议使用第一种方法进行初始化操作。第三步，设置opti... 查看详情
云原生之部署wordpress博客及设置圣诞主题风格(代码片段)
...过要等下一年喔）！云原生之部署wordpress博客及设置圣诞主题风格一、前言1.本次实践目的 查看详情
28-vue之echarts-折线图(代码片段)
ECharts-折线图前言折线图特点折线图实现步骤折线图常见效果标记线条控制填充风格紧挨边缘缩放,脱离0值比例堆叠图前言本篇来学习下折线图的实现折线图特点折线图更多的使用来呈现数据随时间的变化趋势折线图实现步骤EChar... 查看详情
易捷框架之echart的使用
...入开发包，以及主题包： <%@includefile="./common/echarts_header.jsp"%>2，普通初始化图表，通过调用开发包eCharts0=ec;myChart0=eCharts0.init(document.getElementById(‘share‘),‘default‘);myChart0 查看详情