uniapp中如何引用echarts-uni-app

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 中

以上就是uniapp中如何引用echarts的知识。速戳>>知识兔学习精品课！