找文章 / 找答案
  • 发帖数2
  • 粉丝1

此人很懒,什么也没有留下

    [可视化] 自定义 echart js 组件,狐火浏览器展示错误问题

    zhao_qiang青铜一 显示全部楼层 发表于 2022-9-9 17:51:19 |阅读模式 打印 上一主题 下一主题

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



    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
      }
    };







    回复

    使用道具 举报

    精彩评论3

    永洪tech-cp铂金四 显示全部楼层 发表于 2022-9-9 19:09:52
    方便把这个组件导出成jar吗?您复制的代码好像缺了一些符号啥的
    回复

    使用道具 举报

    zhao_qiang青铜一 显示全部楼层 发表于 2022-9-13 10:55:49
    永洪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:13
    zhao_qiang 发表于 2022-9-13 10:55
    option = {
      angleAxis: {
        show: false, //隐藏径向轴(半径)

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

    使用道具 举报

    高级模式
    您需要登录后才可以回帖 登录 | 免费注册

    • 官方微信

      欢迎关注永洪服务号!收费为0,价值无限

      扫码关注
    • 新浪微博

      让每位用户轻松挖掘数据价值!

      访问新浪微博
    • 智能客服
    50W

    会员等你来哦

    Copyright   ©2012-2024  北京永洪商智科技有限公司  (京ICP备12050607) 京公网安备110110802011451号 |联系社区管理员|《永洪社区协议》
    返回顶部