uni-app 如何使用echarts

最新推荐文章于 2024-09-26 15:14:10 发布

ParkerHao

最新推荐文章于 2024-09-26 15:14:10 发布

阅读量2.4w

点赞数 3

分类专栏： uni-app 文章标签： uni-app使用echarts

本文链接：https://blog.csdn.net/ParkerHao/article/details/102718032

版权

uni-app 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

uni-app 如何使用echarts

因为官网的教程是用npm下载，然后Import调用，但是实际应用中一直不能实现，所以换了一种方式，
1.https://ext.dcloud.net.cn/plugin?id=46点击链接进入uni-app插件市场，把这个插件导入自己的HBuilder内。
2.进入自己下载的ECharts页面模板，把components中的echarts这个文件夹移动至自己的项目components内。
3.然后把官方的Hello uni-app模板里的components下的mpvue-echarts文件夹移动至自己的components内。
4.接下来复制这段代码就可以运行了

<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';
    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>