lime-echart 一个基于 JavaScript 的开源可视化图表库 使echarts图表能跑在uniapp各端中的插件

news2025/1/19 16:20:49

Lime-echart 是一个基于 JavaScript 的开源可视化图表库，旨在使 ECharts 图表能够在 UniApp 各个端中运行。UniApp 是一个跨平台的应用程序开发框架，允许开发人员使用 Vue.js 开发一次，然后部署到多个平台，包括 iOS、Android、Web 和各种小程序平台。

通过 Lime-echart 插件，开发人员可以轻松地将 ECharts 图表集成到他们的 UniApp 项目中，并在不同平台上呈现交互式和可视化的数据。ECharts 是一个功能强大的图表库，提供了丰富的图表类型和高度可定制的选项，使得数据可视化变得更加简单和直观。

图片

Lime-echart 插件的主要功能包括：

  1. 跨平台兼容性：Lime-echart 插件可以在 UniApp 的各个端上运行，包括 iOS、Android、Web 和各种小程序平台。这意味着开发人员可以构建一次图表，然后将其部署到多个平台上，无需进行额外的适配工作。

  2. 丰富的图表类型：Lime-echart 支持 ECharts 提供的各种图表类型，如折线图、柱状图、散点图、饼图等。开发人员可以根据需求选择适合的图表类型来展示数据。

  3. 高度可定制：Lime-echart 插件允许开发人员根据自己的需求定制图表的样式、颜色、交互等。通过 ECharts 提供的配置项，开发人员可以灵活地调整图表的外观和行为。

  4. 交互功能：Lime-echart 插件支持图表的交互功能，如数据区域选择、数据点点击事件等。这使得用户可以与图表进行互动，获取更详细的数据信息或触发相应的操作。

  5. 性能优化：Lime-echart 插件针对移动设备进行了性能优化，确保图表在不同平台上的流畅运行和快速渲染。

安装

  • 第一步、在uni-app插件市场导入该插件

  • 第二步、安装 echarts 或者直接使用插件内的echarts.min文件

    复制代码pnpm add echarts
-or-
npm install echarts

基础用法

复制代码<view><l-echart ref="chart" @finished="init"></l-echart></view>
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
components: {LEchart}
}
// 方式一：自定义包
// 使用插件内提供的echarts.min
// 或在官网自定义包：https://echarts.apache.org/zh/builder.html
// 注意 插件内的包是umd格式的，如果你是vue3请使用esm格式的包 https://github.com/apache/echarts/tree/master/dist
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'

// 方式二：全量包
// 如果你使用 npm 安装了 echarts
import * as echarts from 'echarts'

// 方式三：按需引入
// 按需引入 开始
import * as echarts from 'echarts/core';
import {LineChart, BarChart} from 'echarts/charts';
import {TitleComponent,TooltipComponent,GridComponent, DatasetComponent, TransformComponent, LegendComponent } from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import {LabelLayout,UniversalTransition} from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 是必须的一步
import {CanvasRenderer} from 'echarts/renderers';

// 按需引入 注册必须的组件
echarts.use([
    LegendComponent,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LineChart,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);
//-------------按需引入结束------------------------

export default {
    data() {
        return {
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow' 
                    },
                    confine: true
                },
                legend: {
                    data: ['热度', '正面', '负面']
                },
                grid: {
                    left: 20,
                    right: 20,
                    bottom: 15,
                    top: 40,
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#999999'
                            }
                        },
                        axisLabel: {
                            color: '#666666'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
                        axisLine: {
                            lineStyle: {
                                color: '#999999'
                            }
                        },
                        axisLabel: {
                            color: '#666666'
                        }
                    }
                ],
                series: [
                    {
                        name: '热度',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'inside'
                            }
                        },
                        data: [300, 270, 340, 344, 300, 320, 310],
                    },
                    {
                        name: '正面',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        data: [120, 102, 141, 174, 190, 250, 220]
                    },
                    {
                        name: '负面',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'left'
                            }
                        },
                        data: [-20, -32, -21, -34, -90, -130, -110]
                    }
                ]
            },
        };
    },
    // 组件能被调用必须是组件的节点已经被渲染到页面上
    // 1、在页面mounted里调用，有时候mounted 组件也未必渲染完成
    mounted() {
        // init(echarts, theme?:string, opts?:{}, chart => {})
        // echarts 必填， 非nvue必填，nvue不用填
        // theme 可选，应用的主题，目前只支持名称，如：'dark'
        // opts = { // 可选
        //  locale?: string  // 从 `5.0.0` 开始支持
        // }
        // chart => {} ， callback 返回图表实例
        this.$refs.chart.init(echarts, chart => {
            chart.setOption(this.option);
        });
    },
    // 2、或者使用组件的finished事件里调用
    methods: {
        async init() {
            // chart 图表实例不能存在data里
            const chart = await this.$refs.chart.init(echarts);
            chart.setOption(this.option)
        }
    }
}
// 方式一：自定义包
// 使用插件内提供的echarts.min
// 或在官网自定义包：https://echarts.apache.org/zh/builder.html
// 注意 插件内的包是umd格式的，如果你是vue3请使用esm格式的包 https://github.com/apache/echarts/tree/master/dist
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'

// 方式二：全量包
// 如果你使用 npm 安装了 echarts
import * as echarts from 'echarts'

// 方式三：按需引入
// 按需引入 开始
import * as echarts from 'echarts/core';
import {LineChart, BarChart} from 'echarts/charts';
import {TitleComponent,TooltipComponent,GridComponent, DatasetComponent, TransformComponent, LegendComponent } from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import {LabelLayout,UniversalTransition} from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 是必须的一步
import {CanvasRenderer} from 'echarts/renderers';

// 按需引入 注册必须的组件
echarts.use([
    LegendComponent,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LineChart,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);
//-------------按需引入结束------------------------

export default {
    data() {
        return {
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow' 
                    },
                    confine: true
                },
                legend: {
                    data: ['热度', '正面', '负面']
                },
                grid: {
                    left: 20,
                    right: 20,
                    bottom: 15,
                    top: 40,
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#999999'
                            }
                        },
                        axisLabel: {
                            color: '#666666'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
                        axisLine: {
                            lineStyle: {
                                color: '#999999'
                            }
                        },
                        axisLabel: {
                            color: '#666666'
                        }
                    }
                ],
                series: [
                    {
                        name: '热度',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'inside'
                            }
                        },
                        data: [300, 270, 340, 344, 300, 320, 310],
                    },
                    {
                        name: '正面',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        data: [120, 102, 141, 174, 190, 250, 220]
                    },
                    {
                        name: '负面',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'left'
                            }
                        },
                        data: [-20, -32, -21, -34, -90, -130, -110]
                    }
                ]
            },
        };
    },
    // 组件能被调用必须是组件的节点已经被渲染到页面上
    // 1、在页面mounted里调用，有时候mounted 组件也未必渲染完成
    mounted() {
        // init(echarts, theme?:string, opts?:{}, chart => {})
        // echarts 必填， 非nvue必填，nvue不用填
        // theme 可选，应用的主题，目前只支持名称，如：'dark'
        // opts = { // 可选
        //  locale?: string  // 从 `5.0.0` 开始支持
        // }
        // chart => {} ， callback 返回图表实例
        this.$refs.chart.init(echarts, chart => {
            chart.setOption(this.option);
        });
    },
    // 2、或者使用组件的finished事件里调用
    methods: {
        async init() {
            // chart 图表实例不能存在data里
            const chart = await this.$refs.chart.init(echarts);
            chart.setOption(this.option)
        }
    }
}

插件标签

  • 默认 l-echart 为 component

  • 默认 lime-echart 为 demo

    复制代码// 在任意地方使用可查看domo, 代码位于/uni_modules/lime-echart/component/lime-echart
<lime-echart></lime-echart>

总之，Lime-echart 是一个功能强大的插件，使开发人员能够轻松地在 UniApp 项目中集成 ECharts 图表，并实现跨平台的数据可视化。无论是构建移动应用还是小程序，Lime-echart 都能提供灵活的解决方案，满足各种数据展示需求。

下载完整组件代码请关注微信公众号： 前端组件开发

d848d5658a07453c843277846948c608.png

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1447163.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

openGauss学习笔记-218 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-I/O

openGauss学习笔记-218 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-I/O

文章目录 openGauss学习笔记-218 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-I/O218.1 查看I/O状况218.2 性能参数分析 openGauss学习笔记-218 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-I/O 获取openGauss节点的CPU、内存、I/O和网络资源使用情况&#xf…
阅读更多...
数据库基本操作2

数据库基本操作2

一.DML&#xff08;Data Manipulation Language&#xff09; 用来对数据库中表的数据记录进行更新 关键字&#xff1a;增删改 插入insert 删除delete 更新update 1.数据插入 insert into 表&#xff08;列名1&#xff0c;列名2&#xff0c;列名3……&#xff09;values&a…
阅读更多...
STM32Cubmax DAC 采集

STM32Cubmax DAC 采集

一、概念 DMA&#xff0c;全称为&#xff1a; Direct Memory Access&#xff0c;即直接存储器访问&#xff0c; DMA 传输将数据从一个 地址空间复制到另外一个地址空间。 当 CPU 初始化这个传输动作&#xff0c;传输动作本身是由 DMA 控制器 来实行和完成。典型的例子就是移动…
阅读更多...
谁再用Arrays.asList就开除谁

谁再用Arrays.asList就开除谁

谁再用Arrays.asList就开除谁 hi&#xff0c;我是achang&#xff0c;今天说一个使用Arrays.asList后对应出现的一系列坑&#xff0c;因为他有那么多坑&#xff0c;所以会有开玩笑的说&#xff1a;谁再用Arrays.asList就开除谁 那Arrays.asList的作用很简单&#xff0c;就是把…
阅读更多...
Python中多种生成随机密码超实用实例

Python中多种生成随机密码超实用实例

前言 密码是信息安全的基石&#xff0c;它用于保护我们的账户、数据和隐私。为了确保密码足够强大&#xff0c;需要生成随机密码。在本文中&#xff0c;将讨论多种Python方法&#xff0c;用于生成随机密码的实用示例和技巧。 目录 ​编辑 前言 密码生成的要求 使用secrets…
阅读更多...
每日五道java面试题之java基础篇（七）

每日五道java面试题之java基础篇（七）

第一题. HashMap和HashTable有什么区别&#xff1f;其底层实现是什么&#xff1f; 区别 &#xff1a; HashMap⽅法没有synchronized修饰&#xff0c;线程⾮安全&#xff0c;HashTable线程安全&#xff1b;HashMap允许key和value为null&#xff0c;⽽HashTable不允许 底层实现…
阅读更多...
CVE-2023-22602 漏洞复现

CVE-2023-22602 漏洞复现

CVE-2023-22602 简述&#xff1a; 由于 1.11.0 及之前版本的 Shiro 只兼容 Spring 的ant-style路径匹配模式&#xff08;pattern matching&#xff09;&#xff0c;且 2.6 及之后版本的 Spring Boot 将 Spring MVC 处理请求的路径匹配模式从AntPathMatcher更改为了PathPatter…
阅读更多...
【后端高频面试题--SpringBoot篇】

【后端高频面试题--SpringBoot篇】

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;后端高频面试题 &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 这里写目录标题 1.什么是SpringBoot&#xff1f;它的主要特点是什么&#xff1f;2.列举一些Spri…
阅读更多...
有趣儿的组件（HTML/CSS）

有趣儿的组件（HTML/CSS）

分享几个炫酷的组件&#xff0c;起飞~~ 评论区留爪&#xff0c;继续分享哦~ 文章目录 1. 按钮2. 输入3. 工具提示4. 单选按钮5. 加载中 1. 按钮 HTML&#xff1a; <button id"btn">Button</button>CSS&#xff1a; button {padding: 10px 20px;text-tr…
阅读更多...
百面嵌入式专栏（经验篇）面试会聊哪些内容

百面嵌入式专栏（经验篇）面试会聊哪些内容

文章目录 一、项目经历二、项目经历三、知识储备四、绩点排名沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇我们将介绍面试会聊哪些内容? 项目经历： 项目经历可以展示你在实际工作中所取得的成果和能力。面试官通过询问你的项目经历可以了解你的技术实践能力、…
阅读更多...
【C++初阶】第三站:类和对象(中) -- 类的6个默认成员函数

【C++初阶】第三站:类和对象(中) -- 类的6个默认成员函数

目录 前言 类的6个默认成员函数 构造函数 概念 特性 析构函数 概念 特性 拷贝构造函数 概念 特征 赋值运算符重载 运算符重载 赋值运算符重载 const成员 const修饰类成员函数 取地址及const取地址操作符重载 本章总结&#xff1a; 前言 有时候我们写好了一个栈&#xff0c;头脑…
阅读更多...
开源免费的Linux服务器管理面板分享

开源免费的Linux服务器管理面板分享

开源免费的Linux服务器管理面板分享 一、1Panel1.1 1Panel 简介1.2 1Panel特点1.3 1Panel面板首页1.4 1Panel使用体验 二、webmin2.1 webmin简介2.2 webmin特点2.3 webmin首页2.4 webmin使用体验 三、Cockpit3.1 Cockpit简介3.2 Cockpit特点3.3 Cockpit首页3.4 Cockpit使用体验…
阅读更多...
【C语言】指针专项练习 都是一些大厂的笔试真题 附有详细解析，带你深入理解指针

【C语言】指针专项练习 都是一些大厂的笔试真题 附有详细解析，带你深入理解指针

一.sizeof()与strlen() sizeof是一个操作符&#xff0c;而strlen是一个库函数。 数组名代表首元素地址&#xff0c;有两种情况例外&#xff0c;第一种是数组名单独放在sizeof内部&#xff0c;第二种是&数组名&#xff0c;这两种情况下数组名代表的是整个数组。sizeof(arr…
阅读更多...
数据结构——5.4 树、森林

数据结构——5.4 树、森林

5.4 树、森林 概念 树的存储结构 双亲表示法 孩子表示法 孩子兄弟表示法&#xff08;二叉树表示法&#xff09;&#xff1a; 二叉树每个结点有三个变量 ① 二叉树结点值&#xff1a;原树结点的值 ② 二叉树左孩子&#xff1a;原树结点的最左孩子 ③ 二叉树右孩子&#xff1a…
阅读更多...
通用防重幂等如何设计？

通用防重幂等如何设计？

防重与幂等的区别 防重与幂等是在 Web 应用程序和分布式系统中重要而又非常常见的问题。 防重 防重是指在多次提交同样的请求过程中&#xff0c;系统会检测和消除重复的数据&#xff0c;确保相同的数据只会被处理一次&#xff0c;从而避免不必要的重复操作或产生错误的结果。…
阅读更多...
JS游戏项目合集【附源码】

JS游戏项目合集【附源码】

文章目录 一&#xff1a;迷宫小游戏二&#xff1a;俄罗斯方块三&#xff1a;压扁小鸟 一&#xff1a;迷宫小游戏 【迷宫游戏】是一款基于HTML5技术开发的游戏&#xff0c;玩法简单。玩家需要在一个迷宫中找到出口并成功逃脱&#xff0c;本项目还有自动寻路&#xff08;Track&a…
阅读更多...
C#系列-Entity Framework 架构（18）

C#系列-Entity Framework 架构（18）

下图展示了EF的整体架构。现在让我们逐个地看看架构的各个组件&#xff1a; EF组件图 EDM&#xff08;Entity Data Mode 实体数据模型&#xff09;:EDM 由三个主要部分组成&#xff1a;概念模型&#xff0c;映射和存储模型。 Conceptual Model&#xff08;概念模型&#xff0…
阅读更多...
编写Makefile

编写Makefile

现在我们将创建一个程序&#xff0c;该程序能够读取次位码文件并打印其中定义的函数名称&#xff0c;以及它们的基本块数&#xff0c;从而显示LLVM库的易用性 什么是Makefile&#xff1f; C语言中&#xff0c;我们使用visual studio开发软件时候&#xff0c;写程序开始时候都…
阅读更多...
compile error ESP32cam.h no such file or directory

compile error ESP32cam.h no such file or directory

解决方法 可以参考这篇文章： But first, you will need to download the esp32cam.h library. For this go to Github and download the esp32cam Zip. GitHub - yoursunny/esp32cam: OV2640 camera on ESP32-CAM, Arduino library 具体就是下面的这篇重要的文章 ：
阅读更多...
aardio 编辑GUI界面，调用 python 脚本示例

aardio 编辑GUI界面，调用 python 脚本示例

aardio 中调用 python 的方法有两种&#xff0c;py3 和 process.python 模块 py3 模块&#xff1a;如果经常要拿到python返回的值或从aardio中传数据给python去处理&#xff0c;aardio和python的交互比较多的话&#xff0c;可以考虑使用py3模块&#xff0c;缺点是&#xff1a;p…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023