vue3使用ECharts

官网：在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts

1、通过 npm 安装 ECharts

npm install echarts --save

2、在需要的页面直接引入 ECharts并使用

<template>
  <div class="container-echart">
    <div :id="'echart' + timeId" class="interface-echart"></div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import { EChartsType } from 'echarts'
import { onMounted, ref, watch, onBeforeUnmount, nextTick } from 'vue'

const props = defineProps({
  xDataArray: {
    // 柱形图x轴数据
    type: Array,
    default: function () {
      return ['1', '2', '3', '4', '5']
    }
  },
  yDataArray: {
    //图标信息提示
    type: Array,
    default: function () {
      return [
        {
          name: '图例二',
          type: 'bar',
          label: {
            // 柱状图上的文字设置
            show: true, // 是否显示
            //   rotate: 60, // 文字旋转角度
            position: 'top' // 显示位置
          },
          // barWidth: '50%', // 柱的宽度
          barGap: '5%', // 多个并排柱子设置柱子之间的间距
          data: [2, 2, 7, 5, 7, 4]
        },
        {
          name: '图例三',
          type: 'bar',
          label: {
            show: true, // 是否显示
            position: 'top' // 显示位置
          },
          barGap: '5%', // 多个并排柱子设置柱子之间的间距
          data: [4, 2, 5, 8, 4, 2]
        }
      ]
    }
  }
})
let myEchart: EChartsType
const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
const myEchartData = () => {
  const option = {
    // title: {
    //   text: '接口请求耗时分布', // 标题文字
    //   textStyle: {
    //     color: '#C0C4CC', // 标题样式设置
    //     fontWeight: 'bold' // 标题文字大小
    //   }
    // },
    legend: {
      //图标信息提示
      type: 'scroll',
      orient: 'horizontal',
      //   right: '50%',
      left: '40%',
      top: 0,
      //   bottom: 20,
      align: 'auto',
      icon: 'circle'
    },
    grid: {
      //图表距离边框的偏离
      right: '5%', //图表距离容器右侧距离
      left: '10%',
      top: '20%',
      bottom: '20%'
    },
    tooltip: { trigger: 'axis' }, // 设置图案和容器的距离
    xAxis: {
      type: 'category',
      //   name: '时间',
      nameLocation: 'end',
      data: props.xDataArray
      //   axisLabel: {
      //     interval: 20 //制显示间隔
      //     // rotate: 60 // 设置倾斜角度
      //   }
      //   // 坐标轴轴线
      //   axisLine: {
      //     show: false
      //   },
      //   // 坐标轴刻度
      //   axisTick: {
      //     show: false
      //   },
      //   // 刻度标签
      //   axisLabel: {
      //     show: false
      //   }
    },
    yAxis: {
      type: 'value',
      //   name: '值',
      nameLocation: 'end',
      //   // 坐标轴轴线
      //   axisLine: {
      //     show: false
      //   },
      //   // 坐标轴刻度
      //   axisTick: {
      //     show: false
      //   },
      //   // 刻度标签
      //   axisLabel: {
      //     show: false
      //   },
      min: 0
      //   splitLine: {
      //     show: false // 不显示网格线
      //   }
      // axisLabel: { formatter: '{value} ' },
    },
    series: props.yDataArray,
    dataZoom: [
      // 数据选择范围 最下面的范围拉条
      {
        type: 'slider', // 开启滑动条
        show: true, // 显示缩放条
        start: 0,
        end: 100,
        backgroundColor: '#26CAF026',
        selectedDataBackground: {
          lineStyle: {
            type: 'dotted'
          },
          areaStyle: {
            color: '#26CAF0'
          }
        },
        // handleSize: '150%',
        bottom: '3%',
        height: 10,
        brushSelect: false,
        handleIcon:
          'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAABQtJREFUWEfNmVtMI2UUx883M/SybXfbQNht4wM3dxMgqNEIMc26+oIYfFB4EROzhocmWizECyGRtKsRa8wuEULCPiyiEZNNQIObUN92TSSLGBL7QBYtaDUbKNIGKtPpbS7mm+10p9OyHVZo2mQyk5nv8vv+Z86Z850iKP5DsibitcfjIQYHB5+hKOo5kiSfBICzAGBFCJ3EzwVB+BcAtnieD3Act8IwzK2enp7bPp+Px49l40nX8nviEFIb+eRy1EL3UTgctlosFhdBEK8DwOnia8tpsZ1Op78OBAJjTU1NWwrIQqDivYIgiomR3+/XNzc3v0sQxPsAcOKQYMrmTCKRuDw5OXllYGCAyTzEMNIhtS8IqARGDMO06fX6rwCg/n+C5XQXBOGPUCj0hs1m+7kAZFbRvPdL/r6l0+kPKIq6dJRgeXIyzIcGg+ETmYI5ahYEDAQCpvr6+msIoe7jhJPGZln226mpKYfD4diXOYgIWggQ8Tx/vVRwEmQqlfpOq9W+plRSAsyeS2HWg6xC0/RHJpPJm4EUQxIGy8JlHGKxFGY9aI6NjY3nGxoasONgE/NZQL/ff6KlpcV/1N562MXyPP9nf39/6/j4eEyuIOI4bpggCI+aARO8AAkewEzlh9FggoMaHZk3DM3hPgJUVRBFp6Bp+uOMqe8pGA6HbZWVlb+rCcKsIMAjS3sQYQW489QpaNDfh/H+HYehYBwcVi1MPmrIgmC4M7d3ISkAbLWZ1UAyc3Nzj3d3d29iQILjOC9BEO8VXRoAYIVql6Ni0y/OGuDiGW2228XfaPhyOwXPnqLg1mPiZ1n8yfvcbDHBBXNF0alomv7cZDINI4/HQ7nd7rtqv62lAhQE4Z+6urpzKB6Pn9fpdD8WXVIBNY5TQTzd2traCyidTrspilLlHEpzHTdgNBodwV+N7xFCL5Wjgslk0ocB1xBC58oRkGXZAAaMSpmwGshSOQlmwZk5EgRBmW4/kLOUgBik/AHL3sRl7yQsy94gSbJTjYOUOg4mEokfUDKZ9Gg0Gnc5AkYiES/a3d29YDabb5Yj4MrKSifq6OjQLiws/FWOyYLNZmvG6RaVSqW8FRUV76hRsVRxcG9vb9xisVwSAVdXV22NjY13DpOwhlkB1g6ZsLIAcLdVXcI6MTHxtNPpDImAOGDH4/FhnU43rEbFeym/AGYqP31/UMqPxzaSB5WD7s8ciUQ+raqq+kzak4iAo6OjBpfLtYIQqlMDeVxtOI4LdnV1nZ+fn8d1G3FPgjcVWAq0ubnZZrVaVSevxwG5uLj4ot1uX5ZvOzGguDfJmHpIp9OpjotHCbmzs+Otrq6+LNu4iwqKYLIzzrK/oSjqlaOcvNhYsVjshtFo7MVmVVYWJMAs5NjY2EmHw3FVo9G8XGzgo3iO4ZxO59vT09NS8UisKkhOIrlinpr7+/tDRqNRlWc/LGjGrFdkyknlt5zajFQCkZ8xOLG+vt5aW1t7jSCI2oeFKNQPe+vS0tKbdrv9lwK1wayZlWBiEqt8L/v6+gwjIyMuo9E4oCaYF1kIE4lExnt7eycyoUTM7mWHBJdbPMqASVE0773E0LOzs9b29va3DAbDqwih6sMoijfi0Wj0+szMzFX8hcj0lYMpr/PLb5lOB5lbuk/U1NSQPp+v1Wq14k3/EyRJNpAkeVr+NwTHcdssy27EYrFfg8HgT52dncuhUAhPqlRMXuHPOofkyf8BM+lL3UtbDgUAAAAASUVORK5CYII='
      }
    ]
  }
  // { notMerge: true } 解决删除数据时,数据不刷新的问题
  myEchart.setOption(option, { notMerge: true })
}

watch(
  //监控数据变化
  () => props.xDataArray,
  () => {
    setTimeout(() => {
      myEchartData()
    }, 500)
  },
  { deep: true }
)
watch(
  //监控数据变化
  () => props.yDataArray,
  () => {
    setTimeout(() => {
      myEchartData()
    }, 500)
  },
  { deep: true }
)
onMounted(() => {
  setTimeout(() => {
    const dom = document.getElementById(`echart${timeId.value}`) as any
    myEchart = echarts.init(dom)
    myEchartData()
  }, 500)

  // 当窗口发生变化时
  window.addEventListener('resize', () => {
    myEchart.resize()
  })
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', () => {
    myEchart.resize()
  })
})
</script>
<style scoped lang="scss">
.container-echart {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.interface-echart {
  width: 100%;
  height: 200px;
}
</style>