Vue中对Echarts图表的使用流程

记录学习Vue中对Echarts图表的使用流程

1、安装与引用

<!-- 安装 -->
$ npm install echarts vue-echarts

import { createApp } from 'vue'
import ECharts from 'vue-echarts'
import { use } from "echarts/core";
// 1、手动引入 ECharts 各模块来减小打包体积
import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);

// 2、全局注册组件（也可以使用局部注册）
const app = createApp(...)
app.component('v-chart', ECharts)
app.mount(...)

2、代码流程

1）引入js文件
2）DOM容器（div）
3) 初始化对象*(设置参数)
4) 设置option(mCharts.setOption(option))

3、各种常用图形

通过设置series的type设置不同的图表

const option = ref({
      series: [
        {
          name: "设备统计",
          type: "pie", // line bar pie scatter 
          //   radius: "55%",
          radius: [20, 140], // 扇形图的半径 %是按容器较小的边的一般取百分比
          data: [     // data为图表显示的数据
            { value: 12, name: "主机" },
            { value: 10, name: "冷却塔" },
            { value: 34, name: "冷冻水泵" },
          ],
        }
      ]
    });