登录/注册

首页 › Wyn 商业智能专区 › 产品教程 › 查看内容

229 主题	2673 帖子	5984 积分

Rank: 8 Rank: 8

积分: 5984

34647
金币
229
主题
2673
帖子

最新发帖

[仪表板] 仪表板Echarts图表个性化调整

讲师达人认证

悬赏达人认证

活字格认证

Wyn认证

超级版主 / 发表于：2024-12-30 18:53 / 查看：37 / 回复：0

本帖最后由 James.Lv 于 2024-12-30 19:00 编辑

Wyn仪表板中集成了Echarts图表，并且支持用户可以随意的对Echarts图表进行个性化改造调整，以满足不同的图表需求和用户场景，本贴就来介绍仪表板上Echarts图表如何进行个性化调整，以及一些调整示例参考。

具体操作步骤：

1.创建仪表板，选择使用echarts图表
仪表板中有多种不同类型的图表，有部分图表集成了echarts图表，还有一部分是自研的图表以及拓扑图3D场景等，需要选择Echarts图表来可以直接调整echarts配置项实现个性化，图表名称包含Echarts或者图表属性有自定义属性的，就代表这个图表是Echarts图表，支持自定义

image.png235444945.png

image.png235444945.png

2.绑定数据，进行个性化调整
比如我这里使用的是一个柱形图，绑定分类和数值之后会绘制出这个柱形图
image.png275838927.png

image.png275838927.png

场景1：
基于这个基本图表我想进行一些个性化调整，比如分类也就是X轴的标签文本过长，我希望每隔4个字符换行显示
可以修改图表的自定义属性，添加如下代码：
image.png149611510.png

image.png149611510.png

option.xAxis.axisLabel.formatter = function (value) {
if (value.length > 4) {
return value.slice(0, 4) + '\n' + value.slice(4);
}
return value;
}
return option;

复制代码

预览即可看到效果：

image.png524184875.png

场景2：
在这个柱形图基础上，添加上系列，然后显示图例
image.png695156860.png

image.png695156860.png

然后我希望这个系列可以调整跟图表的间距距离等等属性，首先图表本身属性可以调整系列的位置和字体
image.png347200621.png

image.png347200621.png

然后在这个基础上希望进一步调整图例间距等，可以通过自定义属性配置实现，添加如下代码：

option.legend = {
...option.legend,
top: '50', // 距离顶部 50px
left: '50', // 距离左边 50px
itemGap: 20, // 图例项目之间的间隔
itemWidth: 20, // 图例标记的宽度
itemHeight: 14, // 图例标记的高度
}
return option;

复制代码

image.png934620361.png

保存即可看到效果：

image.png439862059.png

当然还有更多场景，大家根据自己实际的需求来进行设计，具体配置可以参考Echats的配置项来实现，Echarts配置项文档：
https://echarts.apache.org/zh/option.html#title

收藏

回复

0 个回复