找文章 / 找答案
精选问答 更多内容

[可视化] 自定义 Echarts

yhdata_FIvjlmFg白银三 显示全部楼层 发表于 2023-5-29 14:07:24 |阅读模式 打印 上一主题 下一主题
1
未解决

【可视化】 自定义 Echarts

2377 11
一个报告里有两个自定义图表,同时自定义图表用到了echart的动作事件 dispatchAction,通过定时器轮播展示。--现在有两个问题 --
一、两个自定义图表没办法同时轮播,一个动一个不动。--
二、报告初始化打开,自定义的图表不会动。--

回复

使用道具 举报

精彩评论11

yhdata_ruby铂金一 显示全部楼层 发表于 2023-5-29 14:57:54
两个绘图代码发一下看看
回复

使用道具 举报

yhdata_FIvjlmFg白银三 显示全部楼层 发表于 2023-5-29 15:11:59
yhdata_ruby 发表于 2023-5-29 14:57
两个绘图代码发一下看看

// 为保证正常绘图,代码格式与所选格式需保持一致;
// 请输入JS代码或前往官网复制示例代码;
// 复制完代码后,请先将代码中的数据列替换为绑定的数据列,绑定的数据列从上至下依次为column1、column2......,option部分请添加options.data以引用绑定列,chart绘制的DOM id会自动替换为变量$container
var colorList = [ '#74AFFF','#98CD96','#F09766']
var dataList = [
  { value: '480', name: '郑煤机集团', percent: ''},
  { value: '235', name: '关联方', percent: ''},
  { value: '410', name: '外销', percent: ''}
]

// series 3个选项对应3个圆环 以此从里到外
option = {
  color: colorList,
  tooltip: {
    show: false,
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  series: [
    {
      type: 'pie',
      radius: ['49.5%', '50%'],
      hoverAnimation: false,
      data: dataList ,
      itemStyle: {
        color: '#999'
      },
      labelLine: {
        show: false
      },
      label: {
        formatter: function (params) {
                                  return (
                                          '{a|' + params.value + '}\n' +
                                          '{b|' + params.percent + '%}'
                                  );
                          },
                          rich: {
                                  a: {
                                          color: '#d8d8d8',
                                          fontSize: 14,
                                          backgroundColor: '#21293e'
                                  },
                                  b: {
                                          color: '#d8d8d8',
                                          fontSize: 14,
                                          backgroundColor: '#21293e'
                                  }
                          },
        show: true,
        position: 'center',
        fontSize: 14,
        textStyle: {
          color: '#d8d8d8',
        }
      },
    },
    {
      type: 'pie',
      radius: ['55%', '70%' ],
      hoverAnimation: false,
      itemStyle: {
        borderColor: '#21293e',
        borderWidth: 3,
        opacity: 0.2,
      },
      label: {
        show: false,
        position: 'inner',
        fontSize: 14
      },
      labelLine: {
        show: false
      },
      data: dataList
    },
    {
      type: 'pie',
      radius: ['70%', '80%'],
      //hoverAnimation: false,
      itemStyle: {
        borderColor: '#21293e',
        borderWidth: 3
      },
      labelLine: {
        length: 0,
        color: 'inherit',
      },
      label: {//{b|{b}}\n{d}%        
        formatter:function(data) {
          if (data.name.length > 2) {
            data.name = insertStr(data.name, [2, 5], '\n')
          }
          if (data.name === '关联方') {
            return data.name +'      \n'+ data.percent +'%      '
          }
          return data.name +'\n'+ data.percent +'%'
        },
        borderWidth: 1,
        borderRadius: 4,
        color: 'inherit',
        fontSize: 16,
        rich: {
        
        },
        position: 'outside',
      },
      emphasis: {
        scaleSize: 10
      },
      data: dataList
    }
  ]
};


var chartIndex = 0;
var timer2 = null;
timer2 = setInterval(() => {
    myChart.dispatchAction({
        type: 'downplay',
        dataIndex: [...new Array(dataList.length).keys()]
    })
    myChart.dispatchAction({
        type: 'highlight',
        dataIndex: chartIndex
    })
    chartIndex++
    if (chartIndex >= dataList.length) chartIndex = 0
}, 2000)

let insertStr = (soure,start, str) => {
  start.forEach(v => {
    soure = soure.slice(0, v) + str + soure.slice(v)
  })
  return soure;
}



回复

使用道具 举报

yhdata_ruby铂金一 显示全部楼层 发表于 2023-5-29 15:23:18
使用的什么版本,这边用94测试是会动画变化的
回复

使用道具 举报

yhdata_FIvjlmFg白银三 显示全部楼层 发表于 2023-5-29 15:31:14
yhdata_ruby 发表于 2023-5-29 15:23
使用的什么版本,这边用94测试是会动画变化的

94的 ,复制两个同时都会变化吗?
回复

使用道具 举报

yhdata_ruby铂金一 显示全部楼层 发表于 2023-5-29 15:35:45
yhdata_FIvjlmFg 发表于 2023-5-29 15:31
94的 ,复制两个同时都会变化吗?

复制俩个就不会了
回复

使用道具 举报

yhdata_FIvjlmFg白银三 显示全部楼层 发表于 2023-5-29 15:39:56
yhdata_ruby 发表于 2023-5-29 15:35
复制俩个就不会了

什么原因呢,时echart代码问题还是说,两个定时器有问题
回复

使用道具 举报

yhdata_ruby铂金一 显示全部楼层 发表于 2023-5-29 15:41:06
yhdata_FIvjlmFg 发表于 2023-5-29 15:39
什么原因呢,时echart代码问题还是说,两个定时器有问题

不确定,但是一样的数据应该就冲突了,你换个不同代码看看
回复

使用道具 举报

yhdata_FIvjlmFg白银三 显示全部楼层 发表于 2023-5-29 15:53:40
yhdata_ruby 发表于 2023-5-29 15:41
不确定,但是一样的数据应该就冲突了,你换个不同代码看看

一样的数据是指什么,echart里的value值吗
回复

使用道具 举报

yhdata_ruby铂金一 显示全部楼层 发表于 2023-5-29 15:59:55
yhdata_FIvjlmFg 发表于 2023-5-29 15:53
一样的数据是指什么,echart里的value值吗

这个不会影响什么吧,问题是一样的图为什么要在界面放两个
回复

使用道具 举报

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

  • 官方微信

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

    扫码关注
  • 新浪微博

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

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

会员等你来哦

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