uniapp에서 echarts를 참조하는 방법: 1. uni-app 공식 웹사이트를 통해 직접 echarts 플러그인을 설치하여 echarts 프로젝트 템플릿을 생성합니다. 2. 새로운 hello uni-app 프로젝트 템플릿을 생성합니다. 3. echarts를 구성 요소에 넣습니다. .
이 튜토리얼의 운영 환경: 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 '@/components/echarts/echarts.simple.min.js'; // import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue'; import * as echarts from '../echarts/echarts.simple.min.js' import mpvueEcharts from '../mpvue-echarts/src/echarts.vue' export default { data() { return { updateStatus: false, line: { legend: { data: ['邮件营销'] }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', data: [] }, dataZoom: [{ type: 'slider', 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: 'line', color: ['#5eb4e2'], //折线条的颜色 }] } } }, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!