管道基础大数据平台系统开发-【前端】-新系統界面
suerprisePlus
2024-06-05 7d6ab2c59d244de2acb0a3ef920f7a2b7728efbe
src/components/echart13.vue
@@ -10,7 +10,7 @@
  components: {},
  data() {
    //这里存放数据
    return { myChart };
    return { myChart:null };
  },
  mounted() {
    this.lineChart();
@@ -43,9 +43,11 @@
      let option = {
        title: {
          text: '各类数据存储分布',
          top:'15',
          textStyle: {
            color: '#fff',
          },
          show: false
        },
        tooltip: {
          trigger: 'axis',
@@ -54,6 +56,7 @@
          },
        },
        grid: {
          top: '10',
          left: '0%',
          right: '0%',
          bottom: '0%',
@@ -150,7 +153,7 @@
      const zoomSize = 6;
      this.myChart = this.$echarts.init(document.getElementById('echart2'));
      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)],
@@ -174,9 +177,11 @@
//@import url(); 引入公共css类
.echart2_box {
  padding: 20px;
}
#echart2 {
  width: 100%;
  height: 100%;
}
#echart2 {
   width: calc(100% - 40px);
  height: calc(100% - 40px);
}
</style>