vue中echarts问题集

1、获取echarts实例的信息方法 echarts.getOption()打印的结果

配置信息.png

2、echarts监听legend点击事件echarts.on("legendselectchanged", function (params) {console.log(params))}里面的params可以看到当前点击legend名称legend中的数据是否选中，是否高亮；

legend高亮.png

设置初始legend高亮个数及高亮名称的时候在chart设置option的legend中增加selected对象属性，里面是键值对的形式;

chart.setOption({
          legend: {
                orient: "vertical",
                x: "right",
                y: "center",
                // width: '250px',
                left: "75%",
                height: 400,
                itemGap: 28,
                itemWidth: 10,
                data: ['娃哈哈','乳娃娃'],
                selected: {
                    "娃哈哈":true,
                    "乳娃娃":false}
               }
})

3、tooltip数据格式化

tooltip: {
       trigger: "axis",
       formatter: function (params) {
          // let param = params.slice(0,that.trueLength)
             let html = params[0].name;
              params.forEach((item, index) => {
                  html += `
${item.marker + item.seriesName}: ${
                  item.value === 0.1 ? 0 : item.value
                }`;
             });
           return html;
           },
      },

4、There is a chart instance already initialized on the dom.”警告

生命全局变量，判断是否存在，存在销毁，不存在初始化

if (myChart !== null && myChart !== '' && myChart !== undefined) {
    myChart.dispose()
 }
myChart = chart.init(document.getElementById("mycharts"));

echarts的dispose()方法和clear()方法的区别类似于v-if与v-show.