Echarts背景透明和布局

登录

本帖最后由 0.618 于 2024-10-28 14:55 编辑

我想做一个看板，图表用的Echarts，有3个需求：

1、无法设置图表背景透明度

测试过backgroundColor: 'transparent',或backgroundColor:"rgba(255,255,255,0)",都无法生效，请问如何设置？
option = {

  //backgroundColor: 'transparent', // 设置图表背景为透明
  backgroundColor:"rgba(255,255,255,0)",
  xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
type: 'value'
  },
  series: [
{
   data: [150, 230, 224, 218, 135, 147, 260],
   type: 'line'
}
  ]
};

2、横坐标轴下方的空白空间如何处理？
3、右上角红框的图标能否隐藏？

Shawn.Liu · Shawn.Liu

大佬，ECharts单元格背景透明的问题可以参考下面帖子的方法设置css，右上角图标不属于echarts代码引入的吗

echart想让背景透明 10.0.3
https://gcdn.grapecity.com.cn/showtopic-223395-1-1.html
(出处: 葡萄城开发者社区)

0.618 · 0.618

横坐标轴下方的空白空间如何处理？

Shawn.Liu · Shawn.Liu

本帖最后由 Shawn.Liu 于 2024-10-25 16:26 编辑

可以参考下这篇博客 Echarts grid组件：调整图表的位置-CSDN博客或者设计器内置的ECharts示例应用 - 折线图堆叠图表

0.618 · 0.618

问题已解决，谢谢

Shawn.Liu · Shawn.Liu

0.618 · 0.618

当把echarts放入图文列表时，图文列表内部没有页面加载，没法使用推荐的方法。
页面在载入图文列表时，已经完成了JavaScript命令的执行，还是会造成后加载的图文列表中的背景无法透明。
目前是等图文列表载入后，通过一个按钮去实执行JavaScript命令才能实现透明。

还有就是不建议使用自定义单元格名称的方法去修改样式，如果对象多了去修改JavaScript命令中对象的名称也麻烦，还不知道图文列表中各个块会不会存在名称冲突的问题。
建议用插件的css类名的方式去设置div的背景透明，附js命令：
$('.echarts > div:first-child').css('background', 'transparent');
//把插件的css类名设置成echarts

最终还是希望官方能把background:white的属性给去掉，让用户自己来设置背景。

Shawn.Liu · Shawn.Liu

收到，感谢大佬分享和建议，这边测试了下，为图文列表模版页面的ECharts单元格设置CSS类名后，在页面的加载命令执行上面的JS命令可以在初始化时达到设置背景透明的效果

		自动登录	找回密码
密码			立即注册

[已处理] Echarts背景透明和布局

本帖子中包含更多资源

7 个回复

本帖子中包含更多资源

本帖子中包含更多资源

活字格认证

活字格高级认证