Echarts怎样实现点击饼图出现内容并重新渲染-群英

上一篇：JS对象解构有何作用，操作是什么样的下一篇：router动态路由清除怎样做，要点和代码是什么

关于“Echarts怎样实现点击饼图出现内容并重新渲染”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友就继续往下看吧。

当我点击饼图时，出现相应的内容，并重新渲染饼图展示内容饼图点击事件

this.conechart.on('click', (params) => {
    params.name
});

获取的是点击的对应的板块名利用获取的板块名，去接口调取对应的数据，调取数据是异步调用，所以重新渲染视图要在异步中渲染，否则同步渲染不出数据

var options = this.conechart.getOption()
options.series[0].data = res.data
this.conechart.setOption(options)

getoption()是获取当前视图配置项进行重新赋值 setoption()是挂载配置项完整代码

initconechart () {
  this.conechart = this.$echarts.init(document.getElementById('conechart'));
  const option = {
    title: {
      text: '风险占比',
      // subtext: 'Fake Data',
      left: '45%',
      top: "20px",
      textStyle:{
        fontSize:30,
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      left: 'left',
      top:5,
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        left:"10%",
        top:"15%",
        data: this.piedata,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          alignTo: "labelLine",
          distanceToLabelLine: 10,
          edgeDistance: "15%"
        },
        labelLayout: {
          fontSize: "16"
        }
      }
    ]
  };
  this.conechart.setOption(option)
  this.conechart.on('click', (params) => {
    if ( this.isshow == 0) {
      this.getWarnInfoBySecond(params.name)
    }
  });
},

if判断是一个开关，控制只能点击一次

//  更新视图
getWarnInfoBySecond(name) {
  getWarnInfoBySecond(name).then(res => {
    var options = this.conechart.getOption()
    options.series[0].data = res.data
    this.conechart.setOption(options)
    this.isshow = 1
  })
},

总结

到此这篇关于Echarts如何重新渲染的文章就介绍到这了！

感谢各位的阅读，以上就是“Echarts怎样实现点击饼图出现内容并重新渲染”的内容了，经过本文的学习后，相信大家对Echarts怎样实现点击饼图出现内容并重新渲染都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！