K先生个人博客

当前位置:首页 > 爱技术 > 正文

vue3怎么使用ECharts做图表,其实很简单

图表现在在后台管理系统中也是非常非常常见的,所以自己的alone-admin后台管理系统怎么会少的了图表数据可视化呢,最后看了一下还是决定使用apache的ECharts,看了一下现在网上搜的一些vue3使用ECharts的文章,感觉都很乱,所以还是打算自己整理一下,方便自己后续再使用的时候能快速拷贝。。。

一、安装ECharts

npm install echarts --save

二、引入使用ECharts

ECharts的使用方式其实有两种,一种是直接完全引入echarts,不过这种方式会导致最后打包出来的文件有点大,不过我们还是先来看看两种方式分别都是怎么实现的:

1、完全引入ECharts

<template>
	<div id="main" style="height: 300px;"></div>
</template>
<script setup>
	import {
		onMounted
	} from "vue";
	import * as echarts from 'echarts'
	onMounted(() => {
		let myChart = echarts.init(document.getElementById("main"));
		myChart.setOption({
			title: {
				text: "总用户量"
			},
			tooltip: {},
			xAxis: {
				data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
			},
			yAxis: {},
			series: [{
				name: "用户量",
				type: "line",
				data: [5, 20, 36, 10, 10, 20],
			}, ],
		});
		window.onresize = function() {
			myChart.resize();
		};
	})
</script>

2、按需引入ECharts

<template>
	<div id="main" style="height: 300px;"></div>
</template>
<script setup>
	import {onMounted} from "vue";
	// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口
	import * as echarts from 'echarts/core';
	// 引入折线图图表,图表后缀都为 Chart
	import { LineChart  } from 'echarts/charts';
	// 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
	import {
	  TitleComponent,
	  TooltipComponent,
	  GridComponent,
	  DatasetComponent,
	  TransformComponent
	} from 'echarts/components';
	// 标签自动布局,全局过渡动画等特性
	import { LabelLayout, UniversalTransition } from 'echarts/features';
	// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
	import { CanvasRenderer } from 'echarts/renderers';
	// 注册必须的组件
	echarts.use([
	  TitleComponent,
	  TooltipComponent,
	  GridComponent,
	  DatasetComponent,
	  TransformComponent,
	  LineChart,
	  LabelLayout,
	  UniversalTransition,
	  CanvasRenderer
	]);
	onMounted(() => {
		let myChart = echarts.init(document.getElementById("main"));
		myChart.setOption({
			title: {
				text: "总用户量"
			},
			tooltip: {},
			xAxis: {
				data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
			},
			yAxis: {},
			series: [{
				name: "用户量",
				type: "line",
				data: [5, 20, 36, 10, 10, 20],
			}, ],
		});
		window.onresize = function() {
			myChart.resize();
		};
	})
</script>

上面的按需导入,是安装ECharts官网上的方法写的,具体的还需要按照自己的需要去封装。这两种方式都是用vue3的组合式api实现的折线图图表,但是你会看到打包出来的文件大小是不一样的,具体可以自己实践噢。 

作者K先生本文地址http://www.gold404.cn/info/141

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论

* 必填
可选
可选

评论列表