初体验 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 容器一定的高度和宽度，否则图表无法显示

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