永洪社区

标题: 自定义 echart js 组件，狐火浏览器展示错误问题 [打印本页]

作者: zhao_qiang 时间: 2022-9-9 17:51
标题: 自定义 echart js 组件，狐火浏览器展示错误问题

火狐浏览器刷新报错。在横拉浏览器宽度后，变为正常。

google 浏览器无异常，怎么刷新都正常 : : :

以下为  js  代码  ：：：

// 为保证正常绘图，代码格式与所选格式需保持一致;
// 请输入JS代码或前往官网复制示例代码;
// 复制完代码后，请先将代码中的数据列替换为绑定的数据列，绑定的数据列从上至下依次为column1、column2......，option部分请添加options.data以引用绑定列，chart绘制的DOM id会自动替换为变量$container
let  allCount = 0;

options.data.map((i)=>{
  allCount+=i.column2
})

option = {
  angleAxis: {
show: false, //隐藏径向轴（半径）
type: 'value',
splitLine: {
   show: true
},
min: 0,
max: allCount,
axisTick: {
   show: true
}
  },
  barMaxWidth: 50, //设置圆环最大宽度
  radiusAxis: {
// splitArea: {
// show: true,
// areaStyle: {
//    color: ['#3e3c3d']
// }
// },
data: ['数','b','c',
show: true, //隐藏径向轴（半径）
axisLine: {
   show: false
},
axisLabel: {
   color: 'white',

},
splitNumber: 1,
axisTick: {
   show: false
}
  },
  polar: {
radius: [40, 90, //总体的最小半径，最大半径
tooltip: {
   show: true
},
center: ['50%', '50%'
  },
  series: [
{
   type: 'bar',
   data:options.column2,
   barWidth: '50%',
   coordinateSystem: 'polar',
   roundCap: true, //柱状图末端呈现圆角
   name: 'Without Round Cap',
   itemStyle: {
      color: (params) => {
      let data = ['#5EBFE5', '#ED926B', '#E2B553';
      return data[params.dataIndex;
      },
      animationEasing: 'bounceOut', //初始动画
      opacity: 0.8
   }
}
  ,
  legend: {
show: false
  }
};

作者: 永洪tech-cp 时间: 2022-9-9 19:09
方便把这个组件导出成jar吗？您复制的代码好像缺了一些符号啥的

作者: zhao_qiang 时间: 2022-9-13 10:55

永洪tech-cp 发表于 2022-9-9 19:09
方便把这个组件导出成jar吗？您复制的代码好像缺了一些符号啥的

option = {
  angleAxis: {
show: false, //隐藏径向轴（半径）
type: 'value',
splitLine: {
   show: true
},
min: 0,
max: 20000,
axisTick: {
   show: true
}
  },
  barMaxWidth: 50, //设置圆环最大宽度
  radiusAxis: {
// splitArea: {
// show: true,
// areaStyle: {
//    color: ['#3e3c3d']
// }
// },
data: ['数','b','c'],
show: true, //隐藏径向轴（半径）
axisLine: {
   show: false
},
axisLabel: {
   color: 'white',

},
splitNumber: 1,
axisTick: {
   show: false
}
  },
  polar: {
radius: [40, 90], //总体的最小半径，最大半径
tooltip: {
   show: true
},
center: ['50%', '50%']
  },
  series: [
{
   type: 'bar',
   data:[2000,3000,10000],
   barWidth: '50%',
   coordinateSystem: 'polar',
   roundCap: true, //柱状图末端呈现圆角
   name: 'Without Round Cap',
   itemStyle: {
      color: (params) => {
      let data = ['#5EBFE5', '#ED926B', '#E2B553'];
      return data[params.dataIndex];
      },
      animationEasing: 'bounceOut', //初始动画
      opacity: 0.8
   }
}
  ],
  legend: {
show: false
  }
};

作者: yhdata_yzm 时间: 2022-9-13 11:29

zhao_qiang 发表于 2022-9-13 10:55
option = {
angleAxis: {
show: false, //隐藏径向轴（半径）

能导出这个组件导出成jar吗，我在火狐上测试没啥问题呢

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