uniapp中如何引用echarts

uniapp引用echarts的方法：1、通過uni-app官網直接安裝echarts插件生成echarts項目模板；2、創建一個新的hello uni-app項目模板；3、把echarts放到components中。

本教程操作環境：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模板中 components 下面的 echarts 放到自己項目components 中

4、把hello uni-app模板中 components 下面的mpvue-echarts 放到自己項目components 中