【ECharts】事件

窗口缩放自适应

// echarts 窗口缩放自适应
window.onresize = function() {
    myChart.resize();
}

图表的鼠标事件

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
        }
    ]
};

option && myChart.setOption(option);

myChart.on('click', function (params) {
    console.log(params)
});

点击折线点后数据params

多次初始化同一个dom（报错：There is a chart instance already initialized on the dom。）

dom上已经初始化了一个实例，并且如果你图表中定义了点击方法，多次覆盖之后，点击方法会触发多次。更新页面重复加载这个图表实例时就会出现这类警告。

var mychart

if (mychart != null && myChart != "" && myChart != undefined) {
  myChart.dispose()
}

myChart = echarts.init(document.getElementById('container'));

let myChart = this.$echarts.getInstanceByDom(this.$refs[this.chart.type]);
if (myChart == null) {
    myChart = this.$echarts.init(this.$refs[this.chart.type]);
}
myChart.setOption(option);

多次触发点击事件

在点击之前先触发取消事件

var myChart = echarts.init(pieId)
myChart.setOption({
  // ....
});

myChart.off('click')
myChart.on('click', function (params) {
    console.log(params)
});

利用dom中ref属性调用

let myChart = this.$refs.pie ? this.$refs.pie.chart : null;
if (myChart) {
  myChart.off("click")
  myChart.on("click", (e) => {
    console.log(e.name)
  });
}

离开页面销毁

beforeDestroy() {
  if (!myChart) {
    return
  }
  myChart.dispose()
  myChart = null
},