自定义 Echarts

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

两个绘图代码发一下看看

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

使用的什么版本，这边用94测试是会动画变化的

yhdata_ruby 发表于 2023-5-29 15:23
使用的什么版本，这边用94测试是会动画变化的

94的 ，复制两个同时都会变化吗？

yhdata_FIvjlmFg 发表于 2023-5-29 15:31
94的 ，复制两个同时都会变化吗？

复制俩个就不会了

yhdata_ruby 发表于 2023-5-29 15:35
复制俩个就不会了

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

yhdata_FIvjlmFg 发表于 2023-5-29 15:39
什么原因呢，时echart代码问题还是说，两个定时器有问题

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

yhdata_ruby 发表于 2023-5-29 15:41
不确定，但是一样的数据应该就冲突了，你换个不同代码看看

一样的数据是指什么，echart里的value值吗

yhdata_FIvjlmFg 发表于 2023-5-29 15:53
一样的数据是指什么，echart里的value值吗

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