daimp-front/sub-operation-service/src/views/ecommerce/components/marketCharts.vue

<template>
  <div class="market-charts" :style="{ height: height }">
    <custom-echart-line-line :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';

const props = defineProps({
  height: {
    type: String,
    default: '200px',
  },
});
const legendData = reactive(['苹果', '小麦', '白菜']);
let linearColors = reactive([
  [
    { offset: 0, color: 'rgba(15, 155, 179,0.1)' },
    { offset: 0.6, color: 'rgba(15, 155, 179,0.5)' },
    { offset: 1, color: 'rgba(15, 155, 179,1)' },
  ],
  [
    { offset: 0, color: 'rgba(106, 202, 55,0.1)' },
    { offset: 0.6, color: 'rgba(106, 202, 55,0.5)' },
    { offset: 1, color: 'rgba(106, 202, 55,1)' },
  ],
  [
    { offset: 0, color: 'rgba(141, 76, 181,0.1)' },
    { offset: 0.6, color: 'rgba(141, 76, 181,0.5)' },
    { offset: 1, color: 'rgba(141, 76, 181,1)' },
  ],
]);
const lineColors = reactive(['#0f9bb3', '#6aca37', '#8d4cb5']);

const currentYear = ref(new Date().getFullYear() + 1);
const xPoint = computed(() => {
  let list = [];
  console.info('111', currentYear.value);
  let minYear = currentYear.value - 10;
  for (let i = minYear; i < currentYear.value; i++) {
    list.push(i);
  }

  return list;
});

let numList = reactive([10, 100, 80]);
const dataNum = (num) => {
  let data = [];
  if (xPoint.value && xPoint.value.length && xPoint.value.length > 0 && num) {
    xPoint.value.forEach((n) => {
      let numVal = Number(Number(n) * 0.1 + num + Math.random() * 100).toFixed(2);
      data.push(numVal);
    });
  }

  return data;
};

const series = () => {
  let list = [];

  if (legendData && legendData.length && legendData.length > 0) {
    // console.info('legendData', legendData);

    legendData.forEach((m, index) => {
      let val = {
        name: m,
        type: 'line',
        symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
        smooth: true,
        lineStyle: {
          normal: {
            width: 1,
            color: lineColors[index], // 线条颜色
          },
        },
        areaStyle: {
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: {
              type: 'linear', // 线性渐变
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: linearColors[index],
              global: false, // 默认为 false
            },
          },
        },
        data: [],
      };
      val.data = dataNum(numList[index]);
      list.push(val);
    });
  }
  return list;
};

const chartsData = reactive({
  option: {
    backgroundColor: 'transparent',
    grid: {
      left: 20,
      right: 20,
      bottom: '5%',
      top: '20%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      borderWidth: 1,
      borderColor: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(85, 149, 233, .6)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(85, 149, 233, 0)', // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      padding: [0, 8, 0, 8],
      textStyle: {
        color: '#fff',
      },
      axisPointer: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, .6)',
        },
      },
      extraCssText: 'box-shadow: 2px 2px 16px 1px rgba(0, 39, 102, 0.16)',
      formatter: function (params) {
        let content = `<div style='font-size: 14px; color: #666;text-align:left'>${params[0].name}</div>`;
        if (Array.isArray(params)) {
          for (let i = 0; i < params.length; i++) {
            content += `
                        <div style='display: flex; align-items: center;color: #666;'>
                         <div style='width: 10px; height: 10px;border-radius:4px;background: ${params[i].color}; margin-right: 8px;'></div>
                         <div style='font-size: 12px; margin-right: 8px;'>${params[i].seriesName}</div>
                         <div style='font-size: 14px;'>${params[i].value}</div>
                       </div>
                     `;
          }
        }
        return content;
      },
    },
    legend: {
      show: true,
      data: Array.from(legendData),
      left: 'center', // 距离左侧10%的位置
      top: '0', // 垂直居中
      itemWidth: 15, // 图例标记的宽度
      itemHeight: 8, // 图例标记的高度
      textStyle: {
        fontSize: 10, // 图例文字的字体大小
        color: '#333', // 图例文字的颜色
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
        textStyle: {
          color: '#666',
          fontStyle: 'normal',
          fontSize: 10,
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        // 坐标轴轴线相关设置
        lineStyle: {
          color: 'rgba(77, 128, 254, 1)',
        },
      },
      splitLine: {
        show: false,
      },
      data: xPoint.value,
    },
    yAxis: {
      type: 'value',
      name: ' ',
      nameTextStyle: {
        color: '#666',
        fontSize: 14,
        padding: [0, 0, 0, -30],
      },
      axisLabel: {
        interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
        textStyle: {
          color: '#666',
          fontStyle: 'normal',
          fontSize: 12,
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        // 坐标轴轴线相关设置
        lineStyle: {
          color: 'rgba(77, 128, 254, 0.2)',
        },
      },
      splitLine: {
        show: false,
      },
    },
    series: series(),
  },
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.market-charts-charts {
  height: 100%;
}
</style>