Marco de análisis de visualización de datos amCharts 5

Documento del sitio web oficial Sitio web oficial del marco amCharts 5 https://www.amcharts.com/

• Descargar e instalar amCharts 

npm install @amcharts/amcharts5

• Importe la biblioteca amCharts en la sección de script del componente

import * as am5 from '@amcharts/amcharts5';
import * as am5xy from '@amcharts/amcharts5/xy';
import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';

• Demostración de 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>

• ejemplos