Echarts如何重新渲染實例詳解

更新時間：2022年05月30日 15:31:49 作者：雪予歌

這篇文章主要給大家介紹了關(guān)于Echarts重新渲染的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

當(dāng)我點擊餅圖時，出現(xiàn)相應(yīng)的內(nèi)容，并重新渲染餅圖展示內(nèi)容餅圖點擊事件

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

獲取的是點擊的對應(yīng)的板塊名利用獲取的板塊名，去接口調(diào)取對應(yīng)的數(shù)據(jù) ，調(diào)取數(shù)據(jù)是異步調(diào)用，所以重新渲染視圖要在異步中渲染，否則同步渲染不出數(shù)據(jù)

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

getoption()是獲取當(dāng)前視圖配置項進行重新賦值 setoption()是掛載配置項完整代碼

initconechart () {
  this.conechart = this.$echarts.init(document.getElementById('conechart'));
  const option = {
    title: {
      text: '風(fēng)險占比',
      // 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判斷是一個開關(guān)，控制只能點擊一次

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

總結(jié)

到此這篇關(guān)于Echarts如何重新渲染的文章就介紹到這了,更多相關(guān)Echarts重新渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: