echarts自定义主题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts自定义主题相关的知识，希望对你有一定的参考价值。
参考技术A (dom: htmlDivElement|HTMLCanvasElement, theme?: Object|string, opts?: devicePixelRatio?: numberrenderer?: string
width?: number|string
height? number|string) => ECharts
*dom： 实例容器，一般是一个具有高宽的div元素。
*theme：应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称
*opts：附加参数。有下面几个可选项：
1. devicePixelRatio：设备像素比，默认取浏览器的值window.devicePixelRatio。
2.renderer：渲染器，支持 'canvas' 或者 'svg'。
3.width：可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
4.height：可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
var theme =
color: [
'#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
'#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
'#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
'#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'
]
echarts.registerTheme('themes', theme)；
// registerTheme函数接收两个参数，第一个是主题的名称，第二个是主题对象。
var myChart = echarts.init(document.getElementById('main'), 'themes');
// 在初始化的时候将你注册的主题名称写入，即可完成注册。
var option=
myChat.setOption(option);
结束！
33-Vue之ECharts高级-设置主题
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>
- 效果：与预览效果一致，类目轴颜色修改为浅绿色
以上是关于echarts自定义主题的主要内容，如果未能解决你的问题，请参考以下文章