记录学习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: "冷冻水泵" },
],
}
]
});