Vue集成amCharts4

最新推荐文章于 2024-05-15 09:30:28 发布

墨白&

最新推荐文章于 2024-05-15 09:30:28 发布

阅读量1.3k

点赞数

分类专栏： vue amCharts 文章标签： vue-cli3 vue vue.js

本文链接：https://blog.csdn.net/qq_46978751/article/details/118914386

版权

本文介绍了如何在Vue项目中集成amCharts4，用于电商项目的图形化报表和数据可视化。通过选择合适的图表类型，如饼图，并将官方示例代码转化为Vue组件，配合后端传来的数据，实现了数据动态展示的功能。

摘要由CSDN通过智能技术生成

关于amCharts集成Vue的使用
最近做电商项目需要用到图形化报表、数据可视化，发现amCharts是一个非常好用的渲染插件。代码清晰明了、操作简单易上手，样式漂亮爱不释手…

首先查看官网，，，，目前最新版本是4
在这里插入图片描述
里面有非常多样式的图像报表，根据需要挑选合适的就行

我选的是简单的饼图，大家按需索取

复制它的代码

代码整理好了，复制即可（还不是Vue形式哦）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>可视化数据</title>
		<style>
			#chartdiv {
     
				width: 100%;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<!-- HTML -->
		<div id="chartdiv"></div>
		<!-- Resources -->
		<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
		<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
		<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"

最低0.47元/天解锁文章

墨白&

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue集成amCharts4

关于amCharts集成Vue的使用最近做电商项目需要用到图形化报表、数据可视化，发现amCharts是一个非常好用的渲染插件。代码清晰明了、操作简单易上手，样式漂亮爱不释手…首先查看官网，，，，目前最新版本是4里面有非常多样式的图像报表，根据需要挑选合适的就行我选的是简单的饼图，大家按需索取复制它的代码代码整理好了，复制即可（还不是Vue形式哦）<!DOCTYPE html><html> <head> <meta charset="u
复制链接

扫一扫

专栏目录