vue中echart使用

最新推荐文章于 2025-03-19 14:28:07 发布

原创最新推荐文章于 2025-03-19 14:28:07 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue #javascript

vue 专栏收录该内容

18 篇文章

订阅专栏

更新于：2021-09-18

vue中echart使用

引入
缩放
提示框文字格式
y轴最大/小值，步进
数据更新

基于vue2和echart(5.1.1)

引入

import * as echarts from "echarts";

缩放

option = {       
    window.addEventListener("resize", this.resizeChart1);
},
resizeChart1() {
    this.myChart1.resize();
},
window.removeEventListener("resize", this.resizeChart1);

提示框文字格式

tooltip: {
    formatter: function (params) {
      let result = params[0].axisValue + "<br>";
      params.forEach(function (item) {
        result +=
          '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
          item.color +
          '"></span>' +
          item.seriesName +
          " : " +
          item.value +
          "</br>";
      });
      return result;
    },
}

y轴最大/小值，步进

let y1Max = Math.ceil(Math.max.apply(null, yList1) / 25) * 25;
let y1Inteval = Math.ceil(y1Max / 5);
option = {
    yAxis: {
        min: 0,
        max: y1Max,
        interval: y1Inteval,
    }
}

数据更新

let option = this.ticketChart.getOption();
option.legend[0].data[0].name = "xxx";
option.series[0].name = "xxx";
option.series[0].data = [];
option.yAxis[0].max = 0.5;
option.yAxis[0].min = 0.5;
this.ticketChart.setOption(option);