image.png

1.子組件

<template>
  <div class="echarts-line-container" :id="chartId"></div>
</template>

<script setup>
  import { ref, onMounted, defineProps, nextTick } from 'vue';
  import * as echarts from 'echarts';
  const props = defineProps({
    salesData: {
      type: Array,
      default: () => [],
    },
    keyVal: {
      type: String,
      required: true,
    },
  });

  onMounted(async () => {
    await nextTick();
    renderChart();
  });
  const chartId = ref(`eChart${Date.now()}${Math.random()}`);
  function renderChart() {
    const chart = echarts.init(document.getElementById(chartId.value));
    if (chart) {
      chart.resize();
      chart.clear();
    } else return;
    let colors = ['#3480FB', '#F91155', '#11D64C', '#5470C6', '#91CC75', '#F04918'];
    const option = {
      color: colors,
      tooltip: {
        position: function (point) {
          return [point[0] - 50, '10%'];
        },
        confine: true,
        enterable: true,
        trigger: 'axis',
        show: true,
        borderColor: '#ffffff',
      },
      legend: {
        show: false,
      },
      grid: {
        top: '1%',
        left: '-12%',
        right: '12%',
        bottom: '-10%',
        containLabel: true,
      },
      xAxis: {
        show: false,
        data: props.salesData.map((item) => item.timest),
      },
      yAxis: [
        {
          type: 'value',
          show: false,
        },
      ],
      series: [
        {
          name: '銷售',
          type: 'line',
          symbolSize: 0,
          areaStyle: {
            //color: '#94C9EC'
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0.1,
                color: 'rgba(60, 70, 255, 0)',
              },
              {
                offset: 1,
                color: 'rgba(25, 125, 240, 1)',
              },
            ]),
          },
          data: props.salesData.map((item) => item[props.keyVal]),
        },
      ],
    };

    chart.setOption(option);
  }
</script>

<style scoped>
  .echarts-line-container {
    width: 100%;
    height: 80px;
  }
</style>

2.父組件

import EChartsLine from '../components/EChartsLine.vue';
 <template #salesTrend="{ record }">
          <div>
            <EChartsLine :sales-data="record.salesList" keyVal="sales" />
          </div>
        </template>