初体验 Echarts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari 等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表

提示

官网：https://echarts.apache.org/zh/index.html

下面我将使用 Vue3+TypeScript 进行 Echarts 的讲解

• 安装依赖

npm install echarts --save

• 在src文件夹下新建plugins/echarts.ts文件，在该文件中，我们向全局挂载了一个名为bar的柱状图

import * as echarts from 'echarts'
export default {
  install: (app: any) => {
    app.config.globalProperties.$bar = (id: any) => {
      var chartDom = document.getElementById(id)!
      if (chartDom == null) {
        return
      }
      echarts.dispose(chartDom)
      var myChart = echarts.init(chartDom)
      const option = {
        tooltip: {},
        legend: {
          data: ['销量'],
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      }
      myChart.setOption(option)
    }
  },
}

• 在main.ts文件这引入echarts.ts文件

import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import echarts from './plugins/echarts'
const app = createApp(App)
app.use(createPinia())
app.use(echarts)
app.mount('#app')

• 在组件中使用

<template>
  <div class="box">
    <div class="list" id="bar"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() as any
onMounted(() => {
  proxy.$bar('bar')
})
</script>

<style scoped lang="scss">
.list {
  width: 300px;
  height: 300px;
}
</style>

注意

须给到 echarts 容器一定的高度和宽度，否则图表无法显示

这样，一个完整的图表就加载出来了

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。