如何根据id获取到dom元素来修改图表样式，显隐图表

回复

本帖最后由夏天骑冷月于 2023-3-14 17:46 编辑

以官方的quickchart图表示例来进行操作，首先我们在图表工具中查看对应组件的id

如何根据id获取到dom元素来修改图表样式，显隐图表

这里复制下来id，也就是组件别名，left01_item01_title，接下来在在线开发代码来获取控制
（1）修改样式，代码和效果如下所示

$('div[data-v-alias=left01_item01_title]div div').css({ "color": "rgb(116 43 43)" })

复制代码

（2）控制隐藏，代码和效果如下所示

$('div[data-v-alias=left01_item01_title]div div').css({ "display": "none" })//隐藏
$('div[data-v-alias=left01_item01_title]div div').remove()//删除

复制代码

（3）对整个图表进行显隐操作，可以对整个图表打组，按照下列图片依次操作
1.左键框选选中
如何根据id获取到dom元素来修改图表样式，显隐图表

2.对组命名

3.获取到组名，代码控制显隐

复制代码

4.柱图或图表等样式修改
如何根据id获取到dom元素来修改图表样式，显隐图表

$('div[data-v-alias=left01_item01_progressBar01]div div').on('click', function () {
$('div[data-v-alias=left01_item01_progressBar01]div div').children().children().children().css({ "width": "19.28px" })
});//修改了对应柱图的宽度

复制代码

依旧是获取对应的图表id，根据id可添加点击事件来进行图表的样式等修改，修改后样式如下：
如何根据id获取到dom元素来修改图表样式，显隐图表

夏天骑冷月 · 发表于 2023-2-22 17:31:09

加载多套图表的话需要在第二套图表的参数上加上 reuse: true,
例如：

// 引入一键图表脚本
THING.Utils.dynamicLoad(['/static/ScenePreview/chart/PreviewChartControl.js'], function () {
// 创建图表
new PreviewChartControl({
url: '/api/chart/63f588dcee63ce1d897ab776',
tag: '1',
isLoad: true, // 加载页，默认为true
isApplyBackground: false, // 是否应用图表背景，启用该参数会替换app.background的值，默认false
autoResize: { // 图表自适应
enable: false, // 自适应图表分辨率，默认为false
orgin: 'center center' // 自适应的基准点，第一个参数取值为:left、center、right，第二个参数取值为:top、center、bottom，默认值为“center center”
},
complete: function(){
new PreviewChartControl({
url: '/api/chart/63f329adee63ce1d897ab6e1',
tag: '1',
isLoad: true, // 加载页，默认为true
reuse: true,
isApplyBackground: false, // 是否应用图表背景，启用该参数会替换app.background的值，默认false
autoResize: { // 图表自适应
enable: false, // 自适应图表分辨率，默认为false
orgin: 'center center' // 自适应的基准点，第一个参数取值为:left、center、right，第二个参数取值为:top、center、bottom，默认值为“center center”
},
complete: function(){
}
});
}
});
})

复制代码

[分享] 如何根据id获取到dom元素来修改图表样式，显隐图表