E-commerce/src/components/Customize/weatherForecast.vue

<!-- 温度折线图 -->
<template>
  <div class="weatherBox" :style="{height:barHeight}">
    <boxTop :title="title">
      <el-select size="small" :popper-append-to-body="false" style="width: 80px" v-model="value" placeholder="请选择">
        <el-option
            key="2025"
            label="2025"
            value="2025">
        </el-option>
      </el-select>
    </boxTop>
    <div class="chartsdom" :id="id"></div>
  </div>
</template>

<script>
import {Select, Option} from 'element-ui'
import Vue from 'vue'

Vue.use(Select)
Vue.use(Option)

import boxTop from '@/components/boxTop/index.vue'

export default {
  data() {
    return {
      value: '2025',
      option: null,
      information: {},
    }
  },
  props: {
    id: {
      type: String,
      default: ``,
    },
    area: {
      type: Array,
    },
    dataArray: {
      type: Object,
    },
    barHeight: {
      type: String,
      default: `200px`,
    },
    title: {
      type: String,
      default: ``,
    },
    unit: {
      type: String,
    },
  },
  components: {
    boxTop,
  },
  mounted() {
    this.getEchart()
  },
  watch: {
    dataArray() {
      this.getEchart()
    },
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById(this.id))

      function addAlpha(rgb, alpha) {
        // 匹配rgb颜色格式
        const rgbPattern = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/;
        const match = rgb.match(rgbPattern);

        if (!match) {
          throw new Error('Invalid RGB format');
        }

        // 提取红、绿、蓝值
        const r = match[1];
        const g = match[2];
        const b = match[3];

        // 返回rgba颜色格式
        return `rgba(${r},${g},${b},${alpha})`;
      }

      let colors = [
        'rgb(150,208,135)',
        'rgb(63,162,246)',
        'rgb(244,162,97)',
        'rgb(145,122,176)'
      ]

      let data = {
        data: [
          [92, 0, 8, 143, 89, 67, 0, 0, 0, 0, 197, 0],
          [12, 0, 8, 14, 23, 44, 0, 0, 0, 0, 19, 0],
        ],
        unit: "亩",
        xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        legend: ["今年当月", "去年当月"],
      };

      let series = data.data.map((item, index) => {
        return {
          name: data.legend[index],
          type: 'line',
          smooth: false, //是否平滑
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: {
            color: colors[index],
          },
          label: {
            show: false,
            position: 'top',
            textStyle: {
              color: colors[index],
            }
          },
          itemStyle: {
            color: colors[index],
            borderColor: "#fff",
            borderWidth: 2,
            shadowColor: 'rgba(0, 0, 0, .1)',
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
          },
          tooltip: {
            show: true
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: addAlpha(colors[index], 0.2)
              },
                {
                  offset: 1,
                  color: addAlpha(colors[index], 0)
                }
              ], false),
              shadowColor: 'rgba(0,179,244, 0.5)',
              shadowBlur: 20
            }
          },
          data: data.data[index]
        }
      })
      this.option = {
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
            },
          },
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: {
            show: true
          },
          splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
              color: '#f00'
            },
          },
          axisLabel: {},
          splitLine: {
            show: false
          },
          data: data.xAxis
        }],
        yAxis: [{
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            show: true,
            margin: 20,
            textStyle: {},
          },
          axisTick: {
            show: true,
          },
        }],
        legend: {
          show: true,
          textStyle: {
            color: '#ffffff'//字体颜色
          }
        },
        series: series
      };
      myChart.setOption(this.option, true)
    },
  },
  beforeDestroy() {
  },
}
</script>

<style lang="less" scoped>
.weatherBox {
  width: 460px;
  height: 216px;
  background: linear-gradient(rgba(0, 32, 77, 0.8) 0%, rgba(0, 32, 77, 0.5) 100%);
  box-shadow: inset 0px 0px 20px 0px rgba(27, 146, 255, 0.3);

  .chartsdom {
    width: 100%;
    height: 90%;
  }
}


</style>