数据可视化分析框架 amCharts 5
2024-04-18 06:12:21
官网文档amCharts 5 框架官网
https://www.amcharts.com/
下载安装 amCharts
npm install @amcharts/amcharts5在组件的脚本部分导入 amCharts 库
import * as am5 from '@amcharts/amcharts5';
import * as am5xy from '@amcharts/amcharts5/xy';
import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';amCharts 5 演示
<template><div class="manufacturingStateTestData"><div class="mainlayout"><div class="goBack poi flex0" @click="goBack" style="width: 200px"><i class="el-icon-arrow-left b mr5"></i>订单<span class="g5 n"> -- 数据可视化分析 </span></div><div class="bgf pl30 pr30 pt20 pb20" style="margin-top: 35px"><div class="hikeen-handleBar"><div ref="chartDiv" style="width: 100%;height: 600px"></div></div></div></div></div>
</template><script>import {pmsNewOrderApi} from "@/axios/api";import * as am5 from '@amcharts/amcharts5';import * as am5xy from '@amcharts/amcharts5/xy';import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';export default {name: "sapDataAnalysis",components: {},data() {return {tableData: [],};},created() {this.allExportExcelData()},mounted() {setTimeout(() => {this.openData(this.tableData)}, 100)},beforeDestroy() {if (this.root) {this.root.dispose();}},methods: {allExportExcelData() {this.tableData = []let data = [{ // 这里是从后端获取的所有数据"tid": "1478348630636335105","tenantId": "1442731289412210689","state": 1,"orderDate": "2021-12-01 08:00:00","orderNumber": "HK-2021120002","productNumber": "9.TS2T512CP538C59HX","productionQuantity": 970,"customerOrderQuantity": 969,"region": "迪拜",}, {"tid": "1478348630724415489","tenantId": "1442731289412210689","state": 1,"orderDate": "2021-12-02 08:00:00","orderNumber": "HK-2021120010-2","productNumber": "9.TS2T512CP538C59XMA","productionQuantity": 2424,"customerOrderQuantity": 2424,"region": "塔吉克斯坦",}, {"tid": "1478348630770552834","tenantId": "1442731289412210689","state": 1,"orderDate": "2021-12-02 08:00:00","orderNumber": "HK-2021120016-1","productNumber": "9.TRT2864P639BTSJP55","productionQuantity": 1614,"customerOrderQuantity": 1610,"region": "摩洛哥",}, {"tid": "1478348630783135746","tenantId": "1442731289412210689","state": 1,"orderDate": "2021-12-02 08:00:00","orderNumber": "HK-2021120016-2","productNumber": "9.TRT2864P639BTSJP55","productionQuantity": 209,"customerOrderQuantity": 620,"region": "摩洛哥",}, {"tid": "1483728779334529026","tenantId": "1442731289412210689","state": 1,"orderDate": "2021-12-01 08:00:00","orderNumber": "HK-TEST-ORDER001","productNumber": "9.TRT2851V09DCYMJL.2G","productionQuantity": 184,"customerOrderQuantity": 660,"region": "孟加拉",}]this.tableData = data// 下面注释是把视图需要的字段摘取出来 --- 可根据自己数据选择是否需要摘取/*data.forEach((item, index) => {this.tableData.push({orderNumber: item.orderNumber,productionQuantity: item.productionQuantity,customerOrderQuantity: item.customerOrderQuantity})})*/},openData(data) {let root = am5.Root.new(this.$refs.chartDiv); // 使用ref或者id获取节点root.setThemes([am5themes_Animated.new(root)]);let chart = root.container.children.push(am5xy.XYChart.new(root, {panY: false,panX: true,wheelX: "panX",wheelY: "zoomX",layout: root.verticalLayout}));chart.get("colors").set("step", 3);let scrollbarX = am5.Scrollbar.new(root, {orientation: "horizontal"});chart.set("scrollbarX", scrollbarX);chart.bottomAxesContainer.children.push(scrollbarX);let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}))cursor.lineY.set("visible", false)let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {categoryField: "orderNumber",renderer: am5xy.AxisRendererX.new(root, {minGridDistance: 35})}));xAxis.events.once("datavalidated", function (ev) {ev.target.zoomToIndexes(0, 9); // 这里设置页面首次加载时,要展示多少条数据});xAxis.data.setAll(data);let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {renderer: am5xy.AxisRendererY.new(root, {})}));let paretoAxisRenderer = am5xy.AxisRendererY.new(root, {opposite: true});let paretoAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {renderer: paretoAxisRenderer,min: 0,max: 100,strictMinMax: true}));paretoAxisRenderer.grid.template.set("forceHidden", true);paretoAxis.set("numberFormat", "#'%");function createSeries(field, name, color, dashed) {let series = chart.series.push(am5xy.ColumnSeries.new(root, {xAxis: xAxis,yAxis: yAxis,valueYField: field,sequencedInterpolation: true,categoryXField: "orderNumber", //字段需对应tooltip: am5.Tooltip.new(root, {labelText: name + ": {valueY}"})}));series.columns.template.setAll({tooltipText: "{categoryX}: {valueY}",tooltipY: 0,strokeOpacity: 0,fillOpacity: 0.77,strokeWidth: 2,cornerRadiusTL: 9,cornerRadiusTR: 9});series.columns.template.adapters.add("fill", function (fill, target) {return chart.get("colors").getIndex(series.dataItems.indexOf(target.dataItem));})series.data.setAll(data);series.appear(1000);return series;}// 要展示的视图字段 - 展示线图或者柱状图 根据自己需要进行定义createSeries("productionQuantity", "生产数量", am5.color(0xB1B106));createSeries("customerOrderQuantity", "客户订单数量", am5.color(0xD68C45), true);chart.appear(1000, 100);this.root = root;},goBack() {window.history.back();},},watch: {},};
</script><style lang="scss"></style>
例图
数据可视化分析框架 amCharts 5相关推荐
- 开源开放 | 图数据交互可视化分析框架 InteractiveGraph v0.3 版本发布
图数据交互可视化分析框架 InteractiveGraph 日前发布 v0.3 版本,下载地址:https://github.com/grapheco/InteractiveGraph/release ...
- 图数据交互可视化分析框架InteractiveGraph v0.3版本发布
图数据交互可视化分析框架 InteractiveGraph日前发布v0.3版本,下载地址:https://github.com/grapheco/InteractiveGraph/releases/t ...
- 数据图表与分析图_史上最全最实用的数据可视化分析图表制作工具汇总
俗话说的好:工欲善其事,必先利其器!一款好的工具可以让你事半功倍,尤其是在大数据时代,更需要强有力的工具通过使数据有意义的方式实现数据可视化,还有数据的可交互性;我们还需要跨学科的团队,而不是单个数据 ...
- camunda流程定义表无数据_【经验】数据可视化分析操作指南
昨天勾妹给大家分享了数据可视化分析的建设目标,今天聊聊如何去实现这个目标--方法体系及操作流程. 数据可视化分析方法论结构图 方法体系 数据可视化分析方法体系图 数据可视化分析的常用工作方法包括专家法 ...
- TableauBDP，哪个才是最适合中国用户的数据可视化分析工具？
作者:pledge 本人数据分析师一枚,除了工作所需,自己对数据分析.数据可视化的产品工具都比较感兴趣,喜欢混迹于各种数据论坛,也发现和使用了不少数据工具,也积累了很多亲身经历.这两年数据可视化在国内 ...
- 【Python】电商用户行为数据可视化分析实战
本文中,云朵君将和大家一起从多个角度使用多个可视化技术,根据各种因素跟踪客户在电子商务网站的花费时间. 关于数据集 数据集来自kaggle -- Machine Hack. 先进电子商务的用户数量激增 ...
- 数据可视化分析平台开源方案集锦
B/S 架构的数据可视化分析平台开源方案不完全集锦,供各位参考. 排名不分先后.欢迎补充. kibana Elasticsearch 专用的数据分析检索仪表盘.ELK Stack 中的 K. 日志系统 ...
- GIS大数据可视化分析工具
俗话说的好:工欲善其事,必先利其器!一款好的工具可以让你事半功倍,尤其是在大数据时代,更需要强有力的工具通过使数据有意义的方式实现数据可视化,还有数据的可交互性:我们还需要跨学科的团队,而不是单个数据 ...
- 最实用大数据可视化分析工具
近年来,随着云和大数据时代的来临,数据可视化产品已经不再满足于使用传统的数据可视化工具来对数据仓库中的数据抽取.归纳并简单的展现.传统的数据可视化工具仅仅将数据加以组合,通过不同的展现方式提供给用户, ...
- 基于Neo4j中医方剂药材知识图谱大数据可视化分析系统的设计与开发
基于Neo4j中医方剂药材知识图谱大数据可视化分析系统的设计与开发 设计背景 这个系统的开发初衷是笔者希望通过这个系统来学习一下Neo4j的相关技术,包括与python.java的对接.可视化等方面, ...
最新文章
- python sanic加速_python微服务sanic 使用异步zipkin(2) - 一步步创建Sanic插件: sanic-zipin...
- 乡镇快递站20万入股50%，每天派件600，是否靠谱？
- 特斯拉为何使用.NET 技术栈？
- document.getElementById()与 $()区别
- Intel 64/x86_64/IA-32/x86处理器 - 指令格式(6) - 8086/16位指令位移量字节/立即数字节
- FluentValidation
- matlab解微分方程组_MATLAB编程入门 求解常微分方程 通解 特解 数值解
- 页面body元素#65279导致顶部空白一行解决方法
- 烟雨要饭网最终版源码
- 《Photoshop CS3专家讲堂视频教程》(个人收集)
- Eclipse 快捷键设置
- 中介效应分析与路径分析
- 浅谈外网通过反向代理访问内网资源时的权限保护
- 模板消息php40008,企业微信发送模板消息 40008 Warning: wrong json format. ?
- 【转帖】计算机编程语言
- 关于python数字的一种下划线奇怪写法
- 【连载】大学物理笔记——第一章末+第二章质点动力学
- endnote更新之后打开word出现乱码
- 模式也能开盲盒，”盲返“模式带动电商平台共享经济
- c语言while语句求圆周率,[求助]圆周率程序