DataGear 自定义数据可视化看板的图表主题

DataGear

已于 2022-04-24 09:49:58 修改

阅读量1.9k

点赞数

文章标签：可视化数据可视化大数据数据分析 echarts

于 2020-10-26 20:59:04 首次发布

本文链接：https://blog.csdn.net/datagear/article/details/109298718

版权

DataGear看板的dg-chart-theme属性，提供了简单且强大的自定义图表主题功能。
通常，只需要设置其color、backgroundColor、actualBackgroundColor值即可，看板会根据它们自动生成标题、图例、提示框、高亮框等相关配色。
例如，定义全局图表配色：

<body style="background-color: #17336c"
    dg-chart-theme="{
		color:'#FFF',
		backgroundColor:'#17336c',
		borderWidth:'2px'
	}">

对应的效果图如下：
在这里插入图片描述

当看板有背景图片时，通常希望图表背景色是透明的，此时应设置actualBackgroundColor为与背景图片一致的颜色，例如：

<body style="background-image: url(bg.png)"
    dg-chart-theme="{
		color:'#FFF',
		backgroundColor:'transparent',
		actualBackgroundColor:'#17336c'
	}">

也可以为单个图表<div>元素添加dg-chart-theme，仅定义此图表的主题，例如：

<div dg-chart-widget="fb360c3e3173579036a4"
	dg-chart-theme="{backgroundColor:'green',color:'yellow'}">
</div>

对应的效果图如下（第一个图表）：
在这里插入图片描述

另外，设置dg-chart-theme的graphColors值，可以自定义图表系列条目颜色序列，设置graphRangeColors值，则可以定义图表值域映射颜色（地图区域颜色），例如：

<body style="background-image: url(bg.png)"
    dg-chart-theme="{
		color:'#FFF',
		backgroundColor:'transparent',
		actualBackgroundColor:'#17336c',
		graphColors: ['#EE7942', '#FFFF00', '#EE1289'],
		graphRangeColors: ['#FFFF00', '#EE7942'],
		borderWidth:'2px'
	}">

对应的效果图如下：
在这里插入图片描述
官网地址：http://www.datagear.tech

源码地址：https://gitee.com/datagear/datagear

大屏模板地址：https://gitee.com/datagear/DataGearDashboardTemplate

DataGear

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
DataGear 自定义数据可视化看板的图表主题

DataGear看板的dg-chart-theme属性，提供了简单且强大的自定义图表主题功能。通常，只需要设置其color、backgroundColor、actualBackgroundColor值即可，看板会根据它们自动生成标题、图例、提示框、高亮框等相关配色。例如，定义全局图表配色：<body style="background-color: #17336c" dg-chart-theme="{ color:'#FFF', backgroundColor:'#17336c
复制链接

扫一扫