永洪社区

标题: 自定义组件写的echarts柱状图，全屏自适应缩放页面异常问题 [打印本页]

作者: a杰 时间: 2023-9-22 17:29
标题: 自定义组件写的echarts柱状图，全屏自适应缩放页面异常问题
如图：设置是全屏自适应，目前是一屏展示

缩放浏览器后，渲染的还是之前大小的图，导致X轴显示不了，有什么办法让这个也能自适应吗？

这个脚本不起作用
window.addEventListener('resize', function(){
myChart.resize()
})

作者: yhdata_lyaa 时间: 2023-9-22 18:13
是echarts的代码没有生效吗

作者: a杰 时间: 2023-9-25 10:08
缩放页面 echarts组件渲染的图表不能同步缩放

作者: yhdata_yzm 时间: 2023-9-25 11:20
1.产品不支持window类函数
2.应该是可以自适应的呢

作者: a杰 时间: 2023-9-26 14:40
本帖最后由 a杰于 2023-9-26 15:10 编辑

yhdata_yzm 发表于 2023-9-25 11:20
1.产品不支持window类函数
2.应该是可以自适应的呢

页面设置全屏自适应，echarts要重新刷新页面才会自适应

作者: yhdata_yzm 时间: 2023-9-26 15:12

a杰发表于 2023-9-26 14:40
页面设置全屏自适应，echarts要重新刷新页面才会自适应

产品版本麻烦提供下呢

作者: a杰 时间: 2023-9-26 15:23

yhdata_yzm 发表于 2023-9-26 15:12
产品版本麻烦提供下呢

9.4.6

作者: yh-mijie 时间: 2023-9-26 16:43
测试 94 版本，报表设置全屏自适应；
当浏览器resize触发报表重绘时，自定义绘图组件也会自动重绘；
方便提供自定义JS代码吗？

测试使用代码如下：
// 请先依次绑定一个维度、一个度量列后执行查看数据引用效果
option = {
xAxis: {
type: 'category',
   /*原始维度
   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   */
   data: options.column1 // column1为绑定的第一列,是一个维度,例如产品种类
},
yAxis: {
   type: 'value'
},
series: [
   {
      /*原始度量
      data: [120, 200, 150, 80, 70, 110, 130]
      */
      data: options.column2, // column2为绑定的第二列,是一个度量,例如销量
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
         color: 'rgba(180, 180, 180, 0.2)'
      }
   }
]
};

作者: a杰 时间: 2023-9-26 17:14

yh-mijie 发表于 2023-9-26 16:43
测试 94 版本，报表设置全屏自适应；
当浏览器resize触发报表重绘时，自定义绘图组件也会自动重绘；
方便提 ...

就是从echarts官网复制的代码

欢迎光临永洪社区 (https://club.yonghongtech.com/)