data-marketing-platform/src/views/home/echarts/traffic-sources.vue

<!-- 引用域 -->
<template>
  <div class="visitor-trend">
    <div ref="chartRef" style="width: 100%; height: 300px;"></div>
    <div style="position: absolute;top: 20px;right: 0;">
      <el-select v-model="value" style="width: 84px;" @change="initChart">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const value = ref('7');
const options = [
  {
    value: '7',
    label: '7天',
    selected: true,
  },
  {
    value: '30',
    label: '30天',
  },
]

const chartRef = ref(null);
let chartInstance = null;

// 生成随机数据
const generateRandomData = () => {
  const categories = Array.from({ length: 6 }, (_, i) => i + 1);
  return categories.map(item => ({
    y: '192.168.3.' + item,
    x: Math.floor(Math.random() * 10000) + 1 // 生成1-100的随机数
  }));
};

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;
  
  if (chartInstance) {
    chartInstance.dispose();
  }
  
  chartInstance = echarts.init(chartRef.value);
  const data = generateRandomData();
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{b}[{c}]'
    },
    grid: {
      left: '0%',
      right: '5%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLabel: {
        color: 'rgba(100, 100, 100, 1)',
      },
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(230, 230, 230, 1)',
          type: 'dashed',
        }
      }
    },
    yAxis: {
      type: 'category',
      data: data.map(item => item.y),
      axisLabel: {
        color: 'rgba(100, 100, 100, 1)',
        formatter: function(value) {
          return value.match(/.{1,15}/g).join('\n');;
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(230, 230, 230, 1)',
        }
      },
      axisTick: {
        alignWithLabel: true,
        show: false,
      }
    },
    series: [
      {
        name: '数值',
        type: 'bar',
        data: data.map(item => item.x),
        itemStyle: {
          color: 'rgba(22, 122, 240, 1)',
          borderRadius: [0, 8, 8, 0] // 右上和右下圆角
        },
        barWidth: '16',
        label: {
          show: false,
          // position: 'right',
          // formatter: '{c}'
        }
      }
    ]
  };
  
  chartInstance.setOption(option);
};

defineExpose({
  initChart
});

onMounted(async () => {
  initChart();
});

</script>

<style lang="scss">
.visitor-trend {
  position: relative;

  /* 下拉框整体样式 */
  .el-select__wrapper {
    border: 1px solid rgba(22, 122, 240, 1);
  }

  .el-select__selected-item {
    color: rgba(22, 122, 240, 1); /* 文字颜色 */
  }

  .el-select__caret {
    color: rgba(22, 122, 240, 1); /* 三角形颜色 */
  }
}
</style>