echarts实现屏幕自适应以及鼠标滚轮缩放的功能

实现屏幕自适应

html

<div id="myEcharts" :style="width:50%;height:400px;"></div>

script

export default {
  data() {
    return {
      myChart: {},
      option:{…}
    };
  },
  created() {
    this.$nextTick(() => {
      this.loadEchart();
    });
  },
  mounted() {
    let _this = this;
    window.onresize = function() {
      _this.myChart.resize();
    };
  },
  methods: {
    loadEchart() {
      this.myChart = echarts.init(document.getElementById("myEcharts"));
      this.myChart.setOption(this.option);
    }
  }
};

实现滚轮缩放

//折线图
option : {
        xAxis: {
          type: "category",
          data: ["one","two","three","four"],
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false
          }
        },
        tooltip: {
          trigger: "axis"
        },
        //设置echarts图随滚轮缩放
        dataZoom: [
          {
            type: "inside"
          }
        ],
        series: [
          {
            color: "#0f95ca",
            data: [1,2,4,3],
            type: "line",
            symbolSize: 8,
            itemStyle: {
              normal: {
                borderColor: "#0f95ca",
                lineStyle: { width: 4 }
              }
            }
          }
        ]
      };