DataGear 制作折柱图数据可视化图表

DataGear

已于 2022-04-24 09:48:36 修改

阅读量1k

点赞数 1

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

于 2021-06-14 11:46:52 首次发布

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

版权

利用 DataGear 看板的自定义图表选项（dg-chart-options）功能，可以很方便地制作折柱图（或者折线-饼图、柱状-饼图）数据可视化图表。

假设有如下CSV数据集，包括名称和两个指标值数据：

名称, 指标0, 指标1
1月,  35,     118
2月,  50,     60
3月,  60,     40
4月,  80,     90

首先，新建柱状图表：

名称：折柱图
图表类型：基本柱状图
数据集：上述数据集
数据标记：
  名称  -> 名称 (name)
  指标0 -> 数值 (value)
  指标1 -> 数值 (value)

然后，新建看板，插入上述图表，并设置 dg-chart-options，将第一个系列类型设置为柱状图（bar），第二个系列类型设置为折线图（line）：

<!DOCTYPE html>
<html>
...
<body>
...
<div dg-chart-options="{series:[{type:'bar'},{type:'line'}]}"
	dg-chart-widget="..."></div>
...
</body>
</html>

同理，折线-饼图的配置项为：

<!DOCTYPE html>
<html>
...
<body>
...
<div dg-chart-options="{series:[{type:'line'},{type:'pie',radius:'50%',center:['80%','55%']}]}"
	dg-chart-widget="..."></div>
...
</body>
</html>

柱状-饼图配置项为：

<!DOCTYPE html>
<html>
...
<body>
...
<div dg-chart-options="{series:[{type:'bar'},{type:'pie',radius:'35%',center:['20%','35%']}]}"
	dg-chart-widget="..."></div>
...
</body>
</html>