yudao-dev/src/views/home/components/productBar.vue

<template>
  <div style="position: relative;">
    <div class="legend">
      <span class="legend-item-line">
        <span class="line target"></span>
        目标
      </span>
      <span class="legend-item-line">
        <span class="line real"></span>
        实际
      </span>
    </div>
    <div ref="cockpitEffChip" id="coreLineChart" style="height: 219px; width: 100%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Container',
  components: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {
    this.$nextTick(() => {
      this.initData();
    });
  },
  methods: {
    initData() {
      // 优先使用 ref 获取 DOM，避免 id 冲突
      const chartDom = this.$refs.cockpitEffChip;
      if (!chartDom) {
        console.error('图表容器未找到！');
        return;
      }
      const myChart = echarts.init(chartDom);
      const option = {
        // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        // title: {
        //   text: 'Gradient Stacked Area Chart'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          top: 20,
          bottom: 20,
          // top: 10,
          // bottom: 20,
          right: 25,
        },
        // legend: {
        //   data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
        // },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              onZero: false,
              lineStyle: {
                color: 'rgba(0, 0, 0, 0.15)'
              }
            },
            axisLabel: {
              color: 'rgba(0, 0, 0, 0.45)',
              fontSize: 12,
              interval: 0,
              width: 38,
              overflow: 'break'
            },
            data: ['6月', '7月', '8月', '9月', '10月', '11月']
          }
        ],
        yAxis: {
          type: 'value',
          // name: '单位/片',
          nameTextStyle: {
            color: 'rgba(0, 0, 0, 0.45)',
            fontSize: 14,
            align: 'left'
          },
          min: function (value) {
            return 0
          },
          max: function (value) {
            return Math.ceil(value.max)
          },
          scale: true,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'rgba(0, 0, 0, 0.45)',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.15)',
              // type: 'dashed'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.15)'
            }
          }
        },
        series: [
          {
            name: '实际',
            type: 'line',
            stack: 'Total',
            symbol: 'circle', // 点的形状（circle为圆形）
            lineStyle: {
              color: 'rgba(255, 132, 0, .5)',
            },
            itemStyle: {
              color: 'rgba(255, 132, 0, .5)',
              borderColor: 'rgba(255, 132, 0, .5)', // 数据点边框色（白色）
              borderWidth: 2, // 数据点边框宽度
            },
            areaStyle: {
              opacity: 0.5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(255, 132, 0, .4)',
                },
                {
                  offset: 1,
                  color: 'rgba(18, 255, 245, 0)',
                },
              ]),
            },
            // emphasis: { focus: 'series' },
            data: [140, 232, 101, 264, 90, 340, 250]
          },
          {
            name: '目标',
            type: 'line',
            stack: 'Total',
            symbol: 'circle', // 点的形状（circle为圆形）
            lineStyle: {
              color: 'rgba(98, 213, 180, .5)',
            },
            itemStyle: {
              color: 'rgba(98, 213, 180, .5)',
              borderColor: 'rgba(98, 213, 180, .5)', // 数据点边框色（白色）
              borderWidth: 2, // 数据点边框宽度
            },
            areaStyle: {
              opacity: 0.5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(98, 213, 180,.4)',
                },
                {
                  offset: 1,
                  color: 'rgba(18, 255, 245, 0)',
                },
              ]),
            },
            // emphasis: { focus: 'series' },
            data: [120, 282, 111, 234, 220, 340, 310]
          },
        ]
      };

      option && myChart.setOption(option);

      // 监听窗口缩放
      window.addEventListener('resize', () => {
        myChart.resize();
      });

      // 组件销毁时清理
      this.$once('hook:destroyed', () => {
        window.removeEventListener('resize', () => {
          myChart.resize();
        });
        myChart.dispose();
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.legend {
  position: absolute;
  right: 10px;
  top: -5px;
}

.legend-item-line {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.8);
  text-align: left;
  font-style: normal;
  margin-right: 20px;
  /* 增加两个图例项之间的间距 */
  position: relative;
  padding-left: 8px;
  /* 给文字左侧增加内边距 */

  .line {
    position: absolute;
    left: 5px;
    /* 调整线条位置 */
    top: 10px;
    display: inline-block;
    width: 12px;
    height: 2px;
    margin-right: 4px;
  }

  .target {
    background: rgba(91, 230, 190, 1);
  }

  .real {
    background: rgba(255, 132, 0, 1);
  }

  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 10px;
    /* 关键：增加图例圆点和文字之间的间距 */
    margin-bottom: 2px;
    background-color: rgba(255, 132, 0, 1);
  }
}

.legend-item-line:nth-child(1) {
  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 10px;
    /* 关键：增加图例圆点和文字之间的间距 */
    margin-bottom: 2px;
    background-color: rgba(91, 230, 190, 1);
  }
}
</style>