郭世朋提交走航车监测日报页面

guoshipeng

2022-11-07 13906d0efa0d3411ee5cd4f01d086a56632ee74d

 src/components/Echarts/LineChart.vue

@@ -1,5 +1,8 @@
<template>
  <!-- <div> -->
  <!-- <div>1111111111111111111111111111111111111111</div> -->
  <div :class="className" :style="{ height: height, width: width }" />
  <!-- </div> -->
</template>

<script>
@@ -13,28 +16,28 @@
  props: {
    className: {
      type: String,
      default: 'chart',
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%',
      default: '100%'
    },
    height: {
      type: String,
      default: '350px',
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true,
      default: true
    },
    chartData: {
      type: Object,
      required: true,
      required: true
    },
    interval: {
      type: Number,
      default: 1,
    },
      default: 1
    }
    // xdata: {
    //   type: Array,
    //   required: true
@@ -42,7 +45,7 @@
  },
  data() {
    return {
      chart: null,
      chart: null
    }
  },
  watch: {
@@ -50,8 +53,8 @@
      deep: true,
      handler(val) {
        this.setOptions(val)
      },
    },
      }
    }
    // xdata: {
    //   deep: true,
    //   handler(val) {
@@ -74,36 +77,26 @@
    this.chart = null
  },
  methods: {

    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions(val) {
      function fontSize(res){
       let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 1920);
        return res*fontSize;
   }

      // console.log('组件设置的数据')

      console.log(val)
      this.chart.setOption(
        {
      // console.log(val)
      this.chart.setOption({
          title: {
            text: val.text,
            textStyle: {
              color: '#000000',
            },
            color: '#000000'
          }
          },
          xAxis: {
            data: val.xAxis.slice(0, 24),
          data: val.xAxis,
            boundaryGap: false,
            axisTick: {
              show: false,
            },
            show: false
          }
            // axisTick: { // 决定是否显示坐标刻度
            //   alignWithLabel: true,
            //   show: true
@@ -120,24 +113,25 @@
          grid: {
            left: '5%',
            right: '5%',
            top:'5%',
          bottom: '20%',
          top: '10%',
            containLabel: true,
            height:fontSize(3.3),
          x: 120
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none',
              yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {},
            },
            saveAsImage: {}
          }
          },
          tooltip: {
            trigger: 'axis',
            position: function (pt) {
              return [pt[0], '10%']
            },
          }
          },
          // tooltip: {
          //   trigger: 'axis',
@@ -148,8 +142,8 @@
          // },
          yAxis: {
            axisTick: {
              show: false, // 轴线刻度
            },
            show: false // 轴线刻度
          }
            // axisLine: {
            //   lineStyle: {
            //     color: '#000000'
@@ -159,29 +153,18 @@
          legend: {
            data: val.title,
            tooltip: {
              show: true,
            show: true
          }
            },
            textStyle:{
              fontSize:fontSize(0.12)
            },
            widht:'auto',
            height:'auto',
            top: fontSize(4.6),
          },
          dataZoom: [
            {
        dataZoom: [{
              type: 'inside',
              start: 0,
              end: 100,
            },
            {
          end: 100
        }, {
              start: 0,
              end: 20,
              bottom: fontSize(4.4),
              height: fontSize(0.5),
            },
          ],
          series: val.series,
          end: 10
        }],
        series: val.series
          // [{
          //   name: JSON.parse(JSON.stringify(val.title)),
          //   itemStyle: {
@@ -206,11 +189,8 @@
          //     }
          //   }
          // }]
        },
        true
      )
      window.onresize = this.chart.resize;
    },
  },
      }, true)
    }
  }
}
</script>