uni-app 引入 echarts

ゝ一纸荒年。 2023-02-14 06:55 26阅读 0赞

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