> 웹 프론트엔드 > uni-app > uniapp에서 전자 차트를 참조하는 방법

uniapp에서 전자 차트를 참조하는 방법

藏色散人
풀어 주다: 2023-01-13 00:44:35
원래의
13400명이 탐색했습니다.

uniapp에서 echarts를 참조하는 방법: 1. uni-app 공식 웹사이트를 통해 직접 echarts 플러그인을 설치하여 echarts 프로젝트 템플릿을 생성합니다. 2. 새로운 hello uni-app 프로젝트 템플릿을 생성합니다. 3. echarts를 구성 요소에 넣습니다. .

uniapp에서 전자 차트를 참조하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, Dell G3 컴퓨터.

추천(무료): uni-app 튜토리얼

uni-app에서 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>
로그인 후 복사

1 uni-app 공식 웹사이트를 통해 직접 echarts 플러그인을 설치하여 echarts 프로젝트 템플릿을 생성하세요

2 . Hbuilder hello uni-app 프로젝트 템플릿에서 새 항목을 만듭니다

3. echarts 템플릿의 구성 요소 아래에 echarts를 자신의 프로젝트 구성 요소에 넣습니다

4. mpvue-echarts를 hello uni-app의 구성 요소 아래에 넣습니다. 템플릿을 자신의 프로젝트 구성 요소에 추가하세요

위 내용은 uniapp에서 전자 차트를 참조하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿