修改折线图

zxl

2026-03-25 27c7661cae945f65f8d2752cae41801e3c2b1485

修改折线图

 src/views/dataAnalysis/components/DataReGasStation.vue

@@ -218,9 +218,12 @@
    <div>
      <div class="block-title">油品类型分析</div>
      <div style="display: flex">
        <div style="width: 70%; display: flex; align-items: center; justify-content: center; color: #999;">
          油品类型销售占比
        </div>
        <DataReLineChart
          style="width: 70%"
          domId="oilTypeLine"
          ref="oilTypeLineRef"
          :chartData="oilTypeLineData"
        ></DataReLineChart>
        <div style="width: 30%">
          <a-radio-group v-model="oilTypeSpecies" size="small" @change="oilTypeSpeciesChange">
            <a-radio-button :value="5"> 油品销量 </a-radio-button>
@@ -317,6 +320,7 @@
      vehicleTypePieData: {}, //车型分析饼图数据
      fuelLevelLineData: {}, //加油位分析折线图数据
      fuelLevelPieData: {}, //加油位分析饼图数据
      oilTypeLineData: {}, //油品类型分析折线图数据
      oilTypePieData: {}, //油品类型分析饼图数据
      vehicleTypeLineData: {}, //车型分析折线图数据
      trendAnalysisType: 0, //趋势分析选择类型
@@ -530,9 +534,26 @@
        })
      })
    },
    //获取油品类型柱状图数据
    getOilTypeLineData() {
      const barType = this.oilTypeSpecies == 5 ? 3 : 4
      postAction('/jyz/dataTable/statBar', {
        orgCode: this.selectTreeObj.orgCode,
        startTime: this.startTime,
        endTime: this.endTime,
        type: barType,
      }).then((res) => {
        console.log(res)
        this.oilTypeLineData = res.result
        this.$nextTick(() => {
          this.$refs.oilTypeLineRef.setChart()
        })
      })
    },
    oilTypeSpeciesChange(e) {
      this.oilTypeSpecies = e.target.value
      this.getOilTypePieData()
      this.getOilTypeLineData()
    },
    //趋势分析类型切换
    trendAnalysisTypeChange(e) {
@@ -692,6 +713,7 @@
      this.getVehicleStationPieData()
      this.getFuelingStationPieData()
      this.getOilTypePieData()
      this.getOilTypeLineData()
      this.getTrendAnalysis()
      this.getOilFreqCompareData()
    },
@@ -703,6 +725,7 @@
      this.getVehicleStationPieData()
      this.getFuelingStationPieData()
      this.getOilTypePieData()
      this.getOilTypeLineData()
      this.getTrendAnalysis()
    },
  },

 src/views/dataAnalysis/components/DataReLineChart.vue

@@ -357,21 +357,16 @@
      if (this.chartData.lineData) {
        option.series.push({
          name: this.chartData.lineName,
          type: 'bar',
          barWidth: '12px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            width: 2,
                  color: '#16B777',
                },
                {
                  offset: 1,
                  color: '#0D6E4A',
                },
              ]),
            },
          itemStyle: {
            color: '#16B777',
          },
          data: this.chartData.lineData,
        })
@@ -403,21 +398,16 @@
      if (this.chartData.lineData2) {
        option.series.push({
          name: this.chartData.lineName2,
          type: 'bar',
          barWidth: '12px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            width: 2,
                  color: '#FFD93D',
                },
                {
                  offset: 1,
                  color: '#B8860B',
                },
              ]),
            },
          itemStyle: {
            color: '#FFD93D',
          },
          data: this.chartData.lineData2,
        })