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

guoshipeng

2022-11-07 13906d0efa0d3411ee5cd4f01d086a56632ee74d

 src/components/Echarts/LineChart.vue

@@ -1,5 +1,8 @@
<template>
  <div :class="className" :style="{ height: height, width: width }" />
  <!-- <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,143 +77,120 @@
    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(
        {
          title: {
            text: val.text,
            textStyle: {
              color: '#000000',
            },
          },
          xAxis: {
            data: val.xAxis.slice(0, 24),
            boundaryGap: false,
            axisTick: {
              show: false,
            },
            // axisTick: { // 决定是否显示坐标刻度
            //   alignWithLabel: true,
            //   show: true
            // },
            // axisLine: {
            //   lineStyle: {
            //     color: '#000000'
            //   }
            // },
            // axisLabel: {
            //   interval: this.interval
            // }
          },
          grid: {
            left: '5%',
            right: '5%',
            top:'5%',
            containLabel: true,
            height:fontSize(3.3),
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none',
              },
              restore: {},
              saveAsImage: {},
            },
          },
          tooltip: {
            trigger: 'axis',
            position: function (pt) {
              return [pt[0], '10%']
            },
          },
          // tooltip: {
          //   trigger: 'axis',
          //   axisPointer: {
          //     type: 'cross'
          //   },
          //   padding: [5, 10]
          // },
          yAxis: {
            axisTick: {
              show: false, // 轴线刻度
            },
            // axisLine: {
            //   lineStyle: {
            //     color: '#000000'
            //   }
            // }
          },
          legend: {
            data: val.title,
            tooltip: {
              show: true,
            },
            textStyle:{
              fontSize:fontSize(0.12)
            },
            widht:'auto',
            height:'auto',
            top: fontSize(4.6),
          },
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100,
            },
            {
              start: 0,
              end: 20,
              bottom: fontSize(4.4),
              height: fontSize(0.5),
            },
          ],
          series: val.series,
          // [{
          //   name: JSON.parse(JSON.stringify(val.title)),
          //   itemStyle: {
          //     normal: {
          //       color: '#7AC5CD',
          //       lineStyle: {
          //         color: '#7AC5CD',
          //         width: 2
          //       }
          //     }
          //   },
          //   smooth: true,
          //   type: 'line',
          //   data: val.series,
          //   animationDuration: 2800,
          //   animationEasing: 'cubicInOut',
          //   areaStyle: {},
          //   label: {
          //     normal: {
          //       show: true,
          //       position: 'top'
          //     }
          //   }
          // }]
      // console.log(val)
      this.chart.setOption({
        title: {
          text: val.text,
          textStyle: {
            color: '#000000'
          }
        },
        true
      )
      window.onresize = this.chart.resize;
    },
  },
        xAxis: {
          data: val.xAxis,
          boundaryGap: false,
          axisTick: {
            show: false
          }
          // axisTick: { // 决定是否显示坐标刻度
          //   alignWithLabel: true,
          //   show: true
          // },
          // axisLine: {
          //   lineStyle: {
          //     color: '#000000'
          //   }
          // },
          // axisLabel: {
          //   interval: this.interval
          // }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '20%',
          top: '10%',
          containLabel: true,
          x: 120
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis',
          position: function(pt) {
            return [pt[0], '10%']
          }
        },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'cross'
        //   },
        //   padding: [5, 10]
        // },
        yAxis: {
          axisTick: {
            show: false // 轴线刻度
          }
          // axisLine: {
          //   lineStyle: {
          //     color: '#000000'
          //   }
          // }
        },
        legend: {
          data: val.title,
          tooltip: {
            show: true
          }
        },
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 100
        }, {
          start: 0,
          end: 10
        }],
        series: val.series
        // [{
        //   name: JSON.parse(JSON.stringify(val.title)),
        //   itemStyle: {
        //     normal: {
        //       color: '#7AC5CD',
        //       lineStyle: {
        //         color: '#7AC5CD',
        //         width: 2
        //       }
        //     }
        //   },
        //   smooth: true,
        //   type: 'line',
        //   data: val.series,
        //   animationDuration: 2800,
        //   animationEasing: 'cubicInOut',
        //   areaStyle: {},
        //   label: {
        //     normal: {
        //       show: true,
        //       position: 'top'
        //     }
        //   }
        // }]
      }, true)
    }
  }
}
</script>