4dkk_mp/src/views/dashboard/analysis/components/lineEcharts.vue

<template>
  <Card title="近半年用户新增趋势" :loading="loading">
    <template #extra>
      <div class="condition">
          <div class="selct" style="display: inline-block;">
            <span style="margin-right:15px">颗粒度</span>
            <Select
            v-model:value="value"
            style="width: 100px;margin-right:30px"
            placeholder="请选择颗粒度"
            :options="options"
            @change="handleChange"
          ></Select>
          </div>
          <a-button type="primary" @click="handleExport" >导出</a-button>
      </div>
    </template>
    <div ref="chartRef1" :style="{ width, height }"></div>
  </Card>
</template>
<script lang="ts" setup>
import type { SelectProps } from 'ant-design-vue';
import { Ref, ref, watch } from 'vue';
import { Card, Select } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
const colorList = ['#38a0ff', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const shadowColor = ['rgba(158,135,255, 0.3)','rgba(115,221,255, 0.3)','rgba(254,154,139, 0.3)']
const emit = defineEmits(["alertSome"])
import { exportElsxFile, } from '/@/utils/file/download';
const props = defineProps({
  loading: Boolean,
  width: {
    type: String as PropType<string>,
    default: '100%',
  },
  height: {
    type: String as PropType<string>,
    default: '300px',
  },
  propsData:{
    type:Object,
    default:{
      xData:['北京', '上海', '广州', '深圳', '香港', '澳门', '台湾'],
      yData:[10, 10, 30, 12, 15, 3, 7],
    }
  }
});
const value = ref('2');
const options = ref<SelectProps['options']>([
    {
      value: '0',
      label: '日',
    },
    {
      value: '1',
      label: '周',
    },
    {
      value: '2',
      label: '月',
    },
    ]);
const chartRef1 = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef1 as Ref<HTMLDivElement>);
function handleChange(val){
    emit('change',{type:'user',value:val})
}
function handleExport(){
  console.log('props',props.propsData)
  let fields  = {
    'time':'日期',
    'num':'数量',
  }
    let data = props.propsData.xData.map((ele,index) => {
      return {
        'time':ele,
        'num':props.propsData.yData && props.propsData.yData[index] || 0,
      }
    })
    exportElsxFile(data, fields,'用户趋势')
}
watch(
  () => props.propsData,
  (propsData) => {
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          label: {
            show: true,
            backgroundColor: '#fff',
            color: '#556677',
            borderColor: 'rgba(0,0,0,0)',
            shadowColor: 'rgba(0,0,0,0)',
            shadowOffsetY: 0,
          },
          lineStyle: {
            width: 0,
          },
        },
        backgroundColor: '#fff',
        textStyle: {
          color: '#5c6c7c',
        },
        padding: [10, 10],
        extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
      },

      xAxis: {
          type: 'category',
          data: propsData.xData,
         
        },
      yAxis: [
        {
          type: 'value',
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#f1f4f8'],
              width: 1,
              type: 'solid',
            },
          },
          axisLabel: {
            textStyle: {
              color: '#556677',
            },
            formatter: '{value}',
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#DCE2E8',
            },
          },
        },
      ],
      series: [
        {
          name: '用户趋势',
          type: 'line',
          data: propsData.yData,
          symbolSize: 1,
          smooth: true,
          symbol:'none', //加这个
          // yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 2,
            color: colorList[0],
            shadowColor: shadowColor[0],
            shadowBlur: 10,
            shadowOffsetY: 20,
          },
        },
      ],
    });
  },
  { immediate: true,deep:true },
);
</script>