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

<!-- 温度折线图 -->
<template>
  <div class="weatherBox" :style="{height:barHeight}">
    <boxTop :title="title">
      <!--      <div class="select_btn">-->
      <!--        <el-select size="small" :popper-append-to-body="false" style="width: 120px" v-model="value" placeholder="请选择">-->
      <!--          <el-option-->
      <!--              v-for="(item, index) in selectList"-->
      <!--              :key="index"-->
      <!--              :label="item.value"-->
      <!--              :value="item.value">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </div>-->
    </boxTop>
    <div class="chartsdom" :id="id"></div>
    <div class="title"><span class="label">{{title}}</span><span class="value">{{ total }}</span></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: null,
      selectList: [
        {
          value: "2025-01",
        }, {
          value: "2025-02",
        }, {
          value: "2025-03",
        }, {
          value: "2025-04",
        },
      ],
      option: null,
      information: {},
    }
  },
  props: {
    id: {
      type: String,
      default: ``,
    },
    area: {
      type: Array,
    },
    dataArray: {
      type: Object,
      default: null
    },
    barHeight: {
      type: String,
      default: `200px`,
    },
    showLegnd: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ``,
    },
  },
  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: ["今年", "去年"],
      };

      if (this.dataArray) {
        data.data = []
        data.legend = []
        if (this.dataArray.thisYear) {
          data.data.push(this.dataArray.thisYear || [])
          data.legend.push("今年")
        }
        if (this.dataArray.LastYear) {
          data.data.push(this.dataArray.LastYear || [])
          data.legend.push("去年")
        }
      }
      if (this.area) {
        data.xAxis = []
        data.xAxis = this.area
      }

      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: '10%',
          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: this.showLegnd,
          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>

<style lang="less">
.el-select {
  width: 115px;
}

.input-with-select .el-input-group__prepend {
  background: rgba(10, 30, 55, 0.7);
  box-shadow: 0px 4px 4px rgba(49, 49, 49, 0.5);
}

.el-input-group {
  line-height: normal;
  display: inline-table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  // height: 46px;
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: rgba(10, 30, 55, 0.7);
  }
}

.el-input__inner {
  background: rgba(10, 30, 55, 0.7);
}

// 修改下拉菜单背景颜色
.el-scrollbar {
  background: #1d2f46;
  border-radius: 6px;
}

//下拉背景
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover,
.el-color-picker__panel,
.el-menu--popup,
.el-message-box,
.el-picker-panel .el-time-panel,
.el-picker__popper.el-popper[role='tooltip'],
.el-popover.el-popper,
.el-select-v2__popper.el-popper[role='tooltip'],
.el-select__popper.el-popper[role='tooltip'],
.el-table-filter {
  opacity: 0.8;
  border-radius: 6px;
}

.el-popper__arrow {
  display: none;
}

.el-select-dropdown__item {
  color: #fff;
}

//修改输入框背景颜色
.el-input-group > .el-input__inner {
  box-shadow: 0px 4px 4px rgba(49, 49, 49, 0.5);
  background: rgba(10, 30, 55, 0.7);
  // width: 260px;
  // height: 46px;
  border-left: 0;
  border-right: 0;
  font-size: 14px;
}

.el-input-group--prepend .el-input__inner,
.el-input-group__append {
  background: rgba(10, 30, 55, 0.7);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.el-input-group__append {
  border-left: 0;
}

.el-select-dropdown__wrap,
.el-scrollbar__wrap,
.el-scrollbar__wrap--hidden-default {
  background: rgba(10, 30, 55, 0.7);
}

//修改输入框字体
.el-input-group--append .el-input__inner,
.el-input-group__prepend {
  font-size: 14px;
  color: #ffff;
}

// 修改搜索按钮icon
.el-icon-my-export:before {
  content: '替';
  font-size: 25px;
  visibility: hidden;
}

//修改下拉框的字体
.el-select-dropdown__list {
  padding: 5px;
  text-align: center;
  //修改单个的选项的样式
  .el-select-dropdown__item {
    padding: 0 0.2rem 0 0.2rem;
    color: #ffff;
    font-size: 16px;
  }

  .el-select-dropdown__item.selected {
    color: #ffff;
  }

  //item选项的hover样式
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: rgba(10, 30, 55, 0.7);
  }
}

// 修改下拉箭头左侧字体大小颜色
.el-input-group__append button.el-button,
.el-input-group__append div.el-select .el-input__inner,
.el-input-group__append div.el-select:hover .el-input__inner,
.el-input-group__prepend button.el-button,
.el-input-group__prepend div.el-select .el-input__inner,
.el-input-group__prepend div.el-select:hover .el-input__inner {
  color: #ffff !important;
  font-size: 16px;
}

// 修改鼠标选中输入框时输入框的颜色
input.el-input__inner:focus {
  border-color: #fff;
}
</style>