Comment référencer des graphiques dans Uniapp

Comment uniapp fait référence à echarts : 1. Installez le plug-in echarts directement via le site officiel d'uni-app pour générer le modèle de projet echarts ; 2. Créez un nouveau modèle de projet hello uni-app 3. Mettez ; graphiques en composants.

L'environnement d'exploitation de ce tutoriel : système Windows7, version uni-app2.5.1, ordinateur Dell G3.

Recommandé (gratuit) : Tutoriel Uni-App

Uni-App présente les echarts

<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>

Grâce à Uni-. Installez le plug-in echarts directement sur le site officiel de l'application pour générer le modèle de projet echarts

2. Créez un nouveau modèle de projet hello uni-app dans Hbuilder

3. Placez les echarts sous les composants dans le modèle echarts pour vous-même Dans les composants du projet

4. Placez les mpvue-echarts sous les composants du modèle hello uni-app dans les composants de votre propre projet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!