So referenzieren Sie Echarts in Uniapp

So referenzieren Sie Echarts in Uniapp: 1. Installieren Sie das Echarts-Plugin direkt über die offizielle Website von Uni-App, um die Echarts-Projektvorlage zu generieren. 2. Erstellen Sie eine neue Hello-Uni-App-Projektvorlage. 3. Fügen Sie Echarts in Komponenten ein .

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version, Dell G3-Computer.

Empfohlen (kostenlos): Uni-App-Tutorial

Uni-App stellt Echarts vor

<template>
         <view class="container">
               <view>
                   <view class="canvasView">
                    <mpvue-echarts class="ec-canvas" @onInit="lineInit" canvasId="line" ref="lineChart" />
                </view>
               </view>
           </view>
</template>
 
 
<script>
    // import * as echarts from &#39;@/components/echarts/echarts.simple.min.js&#39;;
    // import mpvueEcharts from &#39;@/components/mpvue-echarts/src/echarts.vue&#39;;
import * as echarts from &#39;../echarts/echarts.simple.min.js&#39;
import mpvueEcharts from &#39;../mpvue-echarts/src/echarts.vue&#39;
    export default {
        data() {
            return {
                updateStatus: false,
                line: {
                    legend: {
                        data: [&#39;邮件营销&#39;]
                    },
                    xAxis: {
                        type: &#39;category&#39;,
                        data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;]
                    },
                    yAxis: {
                        type: &#39;value&#39;,
                        data: []
                    },
                    dataZoom: [{                        type: &#39;slider&#39;,                        start: 30,                        end: 100,                        zoomLock: false,                    }],
                    grid: {
                        left: 40,
                        right: 40,
                        bottom: 20,
                        top: 40,
                        containLabel: true
                    },
                    series: [{                        data: [],
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: &#39;line&#39;,
                        color: [&#39;#5eb4e2&#39;], //折线条的颜色
                    }]
                }
            }
        },
        methods: {
            lineInit(e) {
                let {
                    width,
                    height
                } = e;
                let canvas = this.$refs.lineChart.canvas
                echarts.setCanvasCreator(() => canvas);
                let lineChart = echarts.init(canvas, null, {
                    width: width,
                    height: height
                })
                canvas.setChart(lineChart)
                lineChart.setOption(this.line)
                this.$refs.lineChart.setChart(lineChart)
            },
        },
        components: {
            mpvueEcharts
        }
    }
</script>
 
 
<style>
 
    .ec-canvas {
        display: flex;
        height: 100%;
        flex: 1;
    }
 
    .canvasView {
        width: 700upx;
        height: 500upx;
    }
    
</style>

1. Installieren Sie das Echarts-Plugin direkt über die offizielle Website der Uni-App, um die Echarts-Projektvorlage zu generieren

2 . Erstellen Sie in Hbuilder eine neue Hallo-Uni-App-Projektvorlage

3. Fügen Sie die Echarts unter Komponenten in der Echarts-Vorlage in die Komponenten Ihres eigenen Projekts ein Vorlage in die Komponenten Ihres eigenen Projekts integrieren

Das obige ist der detaillierte Inhalt vonSo referenzieren Sie Echarts in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!