管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-01-16 21ddc9ec1b1b76d2ce20e512328e65acaf1af2bf
src/components/echart22.vue
@@ -10,7 +10,7 @@
  components: {},
  data() {
    //这里存放数据
    return { myChart };
    return { myChart: null };
  },
  mounted() {
    this.lineChart();
@@ -29,7 +29,7 @@
        '管理数据',
      ];
      // prettier-ignore
      let data =  [1200,500,1000,200,200];
      let data = [1200, 500, 1000, 200, 200];
      let yMax = 500;
      let dataShadow = [];
      for (let i = 0; i < data.length; i++) {
@@ -38,6 +38,7 @@
      let option = {
        title: {
          text: '数据下载量',
          top: 15,
          textStyle: {
            color: '#fff',
          },
@@ -142,13 +143,12 @@
      const zoomSize = 6;
      this.myChart = this.$echarts.init(document.getElementById('echart22'));
      this.myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        this.myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[
              Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
            Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
            ],
        });
      });
@@ -159,16 +159,18 @@
      });
    },
  },
  created() {},
  created() { },
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.echart22_box {
  padding: 20px;
}
#echart22 {
  width: 100%;
  height: 100%;
}
#echart22 {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
}
</style>