永洪社区

标题: 自定义 Echarts [打印本页]

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

作者: yhdata_ruby 时间: 2023-5-29 14:57
两个绘图代码发一下看看

作者: yhdata_FIvjlmFg 时间: 2023-5-29 15:11

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
使用的什么版本，这边用94测试是会动画变化的

作者: yhdata_FIvjlmFg 时间: 2023-5-29 15:31

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

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

作者: yhdata_ruby 时间: 2023-5-29 15:35

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

复制俩个就不会了

作者: yhdata_FIvjlmFg 时间: 2023-5-29 15:39

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

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

作者: yhdata_ruby 时间: 2023-5-29 15:41

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

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

作者: yhdata_FIvjlmFg 时间: 2023-5-29 15:53

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

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

作者: yhdata_ruby 时间: 2023-5-29 15:59

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

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

作者: yhdata_FIvjlmFg 时间: 2023-5-29 16:01

yhdata_ruby 发表于 2023-5-29 15:59
这个不会影响什么吧，问题是一样的图为什么要在界面放两个

这样设计的

作者: yhdata_FIvjlmFg 时间: 2023-5-29 16:10

yhdata_ruby 发表于 2023-5-29 15:59
这个不会影响什么吧，问题是一样的图为什么要在界面放两个

试了下不一样的图，加上动画效果也不会一起执行

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