前言

日前使用hooks的方式封裝組件，在我使用復(fù)雜的圖標(biāo)時候遇到了些問題，預(yù)想在onMounted中初始化echarts，在使用hooks的時候，組件沒有渲染完，使用實例會出現(xiàn)各種各樣的問題，并且在hooks中使用一些外部屬性也屬實遇到了些麻煩，先用蠢方法直接封裝兩個插件做dashboard用，后面有時間重新完善封裝echarts。

一、柱狀圖框選

柱狀圖框選，新建組件EChartsBarBrush.vue：

<template>
  <div ref="chartContainer" style="width: 100%; height: 100%"></div>
</template>

<script setup lang="ts" name="">
import useECharts from '@/hooks/useECharts';
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const chartContainer = ref(null);

let xAxisData: string[] = [];
let data1: number[] = [];
let data2: number[] = [];
let data3: number[] = [];
let data4: number[] = [];

for (let i = 0; i < 10; i++) {
  xAxisData.push('Class' + i);
  data1.push(+(Math.random() * 2).toFixed(2));
  data2.push(+(Math.random() * 5).toFixed(2));
  data3.push(+(Math.random() + 0.3).toFixed(2));
  data4.push(+Math.random().toFixed(2));
}

var emphasisStyle = {
  itemStyle: {
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.3)'
  }
};

const options = ref({
  legend: {
    data: ['bar', 'bar2', 'bar3', 'bar4'],
    left: '10%'
  },
  brush: {
    toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
    xAxisIndex: 0
  },
  toolbox: {
    feature: {
      magicType: {
        type: ['stack']
      },
      dataView: {}
    }
  },
  tooltip: {},
  xAxis: {
    data: xAxisData,
    name: 'X Axis',
    axisLine: { onZero: true },
    splitLine: { show: false },
    splitArea: { show: false }
  },
  yAxis: {},
  grid: {
    bottom: 100
  },
  series: [
    {
      name: 'bar',
      type: 'bar',
      stack: 'one',
      emphasis: emphasisStyle,
      data: data1
    },
    {
      name: 'bar2',
      type: 'bar',
      stack: 'one',
      emphasis: emphasisStyle,
      data: data2
    },
    {
      name: 'bar3',
      type: 'bar',
      stack: 'two',
      emphasis: emphasisStyle,
      data: data3
    },
    {
      name: 'bar4',
      type: 'bar',
      stack: 'two',
      emphasis: emphasisStyle,
      data: data4
    }
  ]
});
// const chartInstance = useECharts(chartContainer, options);
onMounted(() => {
    // 初始化 ECharts 實例
   const chartInstance = echarts.init(chartContainer.value);
    // 設(shè)置 ECharts 配置項
    chartInstance.setOption(options.value);

    chartInstance.on('brushSelected', function (params: any) {

  var brushed = [];
  var brushComponent = params.batch[0];

  for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
    var rawIndices = brushComponent.selected[sIdx].dataIndex;
    brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
  }

  chartInstance.setOption({
    title: {
      backgroundColor: '#333',
      text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
      bottom: 0,
      right: '10%',
      width: 100,
      textStyle: {
        fontSize: 12,
        color: '#fff'
      }
    }
  });
});

    // 監(jiān)聽窗口大小變化，自動調(diào)整圖表大小
    window.addEventListener('resize', () => chartInstance.resize());
  });

</script>

<style lang='scss' scoped>
</style>

image.png

二、折線圖堆疊

折線圖堆疊,新建EChartSlineStack.vue

<template>
  <div ref="chartContainer" style="width: 100%; height: 100%"></div>
</template>

<script setup lang="ts" name="">
import { ref } from 'vue';
import useECharts from '@/hooks/useECharts';

const chartContainer = ref(null);
const options = ref({
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
});

const chartInstance = useECharts(chartContainer, options);

// 你可以在這里根據(jù)需要操作 ECharts 實例，例如更新數(shù)據(jù)
// chartInstance.value.setOption({...})
</script>

<style lang='scss' scoped>
</style>

image.png

總結(jié)

為啥這兩天封裝了好幾個echarts組件呢，上頭了一樣，通過封裝ECharts組件，可以將圖表的基本配置、數(shù)據(jù)處理、事件處理等邏輯封裝在一個組件中，從而實現(xiàn)代碼的復(fù)用。這樣，在需要使用相同類型的圖表時，只需引入該組件，而無需重復(fù)編寫相同的代碼。明天就體驗一下好處。

得意勿恣意奢侈,失意勿抑郁失措。