echarts 动态获取数据

43 阅读1分钟

踩坑1: 切换路由时候会报错并且echarts图表不显示问题,# There is a chart instance already initialized on the dom

原因就是重复init了,可以在销毁组件时候 将图表销毁下

` onBeforeUnmount(() => {

echarts.dispose(Document.getElementsByClassName('pie-box')[0])

echarts.dispose(Document.getElementsByClassName('line-box')[0])

}) `

踩坑2 :想自适应 echart 使用resize

let pieChart: any = ''
function initPie() {
  // 基于准备好的dom,初始化echarts实例
  if (!pieChart) {
    pieChart = echarts.init(Document.getElementsByClassName('pie-box')[0])
  }
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '总览',
      x: 'center',
      y: 'center',
      textStyle: {
        fontSize: 20,
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'right',
      padding: [10, 20, 0, 0],
      textStyle: {
        color: '#fff',
        opacity: '0.8'
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['35%', '50%'],
        avoidLabelOverlap: false,
        color: ['#B13F4B', '#1A74FE'],
        emphasis: {
          disabled: true
        },
        labelLine: {
          show: false
        },
        label: {
          formatter: '{label|{d}%\n{b}: {c}}',
          rich: {
            label: {
              fontSize: '16px',
              color: '#fff',
              opacity: '0.8'
            }
          }
        },
        data: props.pieData
      }
    ]
  }
  window.addEventListener('resize', () => {
    pieChart.resize()
  })
    // 使用刚指定的配置项和数据显示图表。
      pieChart.setOption(option)
}

`