uni-app 如何使用echarts

素颜马尾好姑娘i 2023-05-31 07:55 4阅读 0赞

uni-app 如何使用echarts

因为官网的教程是用npm下载，然后Import调用，但是实际应用中一直不能实现，所以换了一种方式，  
**1**.[https://ext.dcloud.net.cn/plugin?id=46][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>

[https_ext.dcloud.net.cn_plugin_id_46]: https://ext.dcloud.net.cn/plugin?id=46

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp如何配置使用uView

uniapp使用uView教程

女爷i/ 2024年04月20日 22:13/ 0 赞/ 166 阅读

相关 uniapp+echarts开发APP版本教程

需求需要在uniapp+echarts展示图表功能，是APP版本，不是小程序。找了好多教程都乱七八糟的，无法实现。以下是效果图 ![f6cbf8f32a88495bb

小灰灰/ 2024年02月05日 20:29/ 0 赞/ 110 阅读

相关如何使用Odoo集成ECharts

背景介绍 Odoo框架中自带的视图非常丰富，能给我们展示的数据关系和标准的流程体系。但是在实际的业务场景中，除了能将数据关系和流程体系展示出来，我们希望能够以更直观更美观

ゞ浴缸里的玫瑰/ 2023年10月01日 21:22/ 0 赞/ 91 阅读

相关 uni-app 如何使用echarts

uni-app 如何使用echarts 因为官网的教程是用npm下载，然后Import调用，但是实际应用中一直不能实现，所以换了一种方式， 1.[https://ext.

素颜马尾好姑娘i/ 2023年05月31日 07:55/ 0 赞/ 5 阅读

相关 VUE 如何使用 Echarts

VUE 如何使用 Echarts 1. 打开项目终端输入 `npm install echarts --save` 然后点击回车如果是成功就是下图这样!

我会带着你远行/ 2023年05月22日 14:25/ 0 赞/ 63 阅读

相关 js中echarts如何使用geojson

echarts导入geojson最小demo，毫无花里胡哨参数，简单易懂直接上代码 <!DOCTYPE html> <html lang="zh">

喜欢ヅ旅行/ 2022年12月13日 14:11/ 0 赞/ 411 阅读

相关 uniapp使用echarts绘制各种图表（附带完整案例）

uniapp中使用echarts方案一、在项目中安装echarts插件 1.实现的效果图

àì夳堔傛蜴生んèń/ 2022年11月24日 14:28/ 0 赞/ 2285 阅读

相关 uniapp项目如何使用字体图标

第一步，把font文件放到static文件夹下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

快来打我*/ 2022年10月23日 11:12/ 0 赞/ 386 阅读

相关 echarts系列——在vue工程化项目中如何使用echarts

安装echarts依赖 npm install echarts --save 点击查看 [echarts官网安装教程][echarts] 创建图表

灰太狼/ 2022年04月08日 08:45/ 0 赞/ 409 阅读

相关 uniapp 小程序echarts 使用

1.创建一个文件夹 npm init 2.下载类库 npm install echarts mpvue-echarts --save 3.将这三个文件夹复制粘贴

冷不防/ 2021年09月18日 11:50/ 0 赞/ 1138 阅读