更新记录

1.0.6（2022-05-19）

1.0.6

1.0.5（2022-05-19）

buouyu-echarts-demo

高兼容性echarts组件buouyu-echarts，支持APP,小程序，H5的echarts uni-app组件

介绍

众所周知uni-app是一套代码可以应用多个平台的移动端前端框架

用起来确实爽，小编也爱不释手

但需要做一些复杂的图标时，引入echarts，却失去了uni-app最牛逼的特性

看一下官方提供的

当然也有其他方式引入echarts，但是都不能做到app,小程序，h5都支持的

image.png

这还用个吊毛呀，不知道你们有没有遇到跟我一样的问题

小编研究数日，总结了一套方案，只为解决一个问题：

把以上所有的叉叉变成勾勾

本着共享开源的原则，小编已经把源码分享到GitHub，欢迎各位大佬们添花

github demo地址：https://github.com/1879153421/buouyu-echarts

当然也有很多不足之处，也请大佬们多多指教，小编闲暇之余会不断更新的

快速入门

1、npm 直接安装

直接通过npm安装即可

npm 模块地址：https://www.npmjs.com/package/buouyu-echarts

npm i buouyu-echarts

若项目根目录下没有package.json 文件，可以先执行 npm init

安装失败可能的原因：

大部分开发者可能都设置了淘宝镜像源，这里需要设置成原来的地址
// 查询当前配置的镜像 npm get registry //https://registry.npmjs.org/ 
// 设置成淘宝镜像 npm config set registry http://registry.npm.taobao.org/ 
// 换成原来的 npm config set registry https://registry.npmjs.org/
也有可能之前的版本不见了，可以把package.json总的buouyu-echarts删掉，在执行npm i buouyu-echarts安装最新的

安装成功以后直接在需要用的页面引入

import buouyuEcharts from 'buouyu-echarts'

components挂在一下

components: {
            buouyuEcharts
        },

配置option

data() {
return {
        option: {
                xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                },
                yAxis: {
                        type: 'value',
                },
                series: [{
                        data: [820, 932, 901, 934, 1290, 774, 660],
                        type: 'line',
                        smooth: true,
                }],
                visualMap: {
                        min: 0,
                        max: 1300,
                        calculable: false,
                        show: false,
                        realtime: false,
                        inRange: {
                                color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61",
                                        "#f46d43", "#d73027", "#a50026"
                                ]
                        }
                }
        },
}
        },

引入DOM结构

<buouyuEcharts :option="option" canvasId="buouyu" />

这样就你能在app，小程序，h5都能看到同样的效果啦 image.png

当然也可以全局挂在

在根目录的main.js

import Vue from 'vue'
import App from './App'
import buouyuEcharts from 'buouyu-echarts' //引入buouyu-echarts
 Vue.component('buouyuEcharts',buouyuEcharts)  //挂在到全局
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()

然后就可以在任意页面直接用啦

<buouyuEcharts :option="option" canvasId="buouyu" />

跟以上类似，效果一样

2、直接下载引入

github项目地址:https://github.com/1879153421/buouyu-echarts

image.png

由于本组件依赖echarts，所以要安装echarts

npm i echarts

然后就可以直接在项目中使用buouyu-echarts啦 使用操作跟上面类似

教程

基础配置option

参考echarts官网：https://echarts.apache.org/zh/index.html

设置宽高

<buouyuEcharts height="12rem" width="80%" :option="option"  canvasId="buouyu" />

image.png

动态渲染数据

添加个ref

<buouyuEcharts  :option="option" ref="buouyu" canvasId="buouyu" />
data() {
return {
        option: null
}
},
mounted() {
this.initBuouyuEcharts()
},
methods: {
getRandom(min, max) {
        return Math.floor(Math.random() * (max - min)) + min
},
initBuouyuEcharts() {
        const option = {
                xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                },
                yAxis: {
                        type: 'value',
                        min: 0,
                        max: 1000,
                        axisLabel: {
                                margin: 3,
                        }
                },
                series: [{
                        data: [300, 400, 800, 900, 700, 774, 400],
                        type: 'line',
                        smooth: true,
                }],
                visualMap: {
                        min: 0,
                        max: 1300,
                        calculable: false,
                        show: false,
                        realtime: false,
                        inRange: {
                                color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090",
                                        "#fdae61",
                                        "#f46d43", "#d73027", "#a50026"
                                ]
                        }
                }
        }
        this.option = option //绑定数据组件就会初始化渲染
        const data = [300, 400, 800, 950, 700, 774, 400]
        const buouyuCharts = this.$refs.buouyu //里面有个setOption方法
        setInterval(() => {
                data.push(this.getRandom(0, 1000))
                data.shift()
                buouyuCharts.setOption({
                        series: [{
                                data,
                        }]
                })
        }, 1000)
},
        }

效果

pilla1r.gif

所有属性

参数 说明 是否必填 类型 传参示例 默认值
canvasId 唯一标识，同一组件里不要设置相同的值 是 string buouyu ———
option 参考echarts官网配置 是 object ——— ———
width 宽度，支持px,rem,rpx,vw等 否 string 90%，30rem 100%
height 宽度，支持px,rem,rpx,vh等 否 string 300px,30vh 500rpx

有兴趣的可以一起学习交流

小编微信：buouyupro

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.18 app-vue app-nvue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
√ √ √ √
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

介绍

众所周知uni-app是一套代码可以应用多个平台的移动端前端框架 用起来确实爽，小编也爱不释手 但需要做一些复杂的图标时，引入echarts，却失去了uni-app最牛逼的特性 看一下官方提供的 当然也有其他方式引入echarts，但是都不能做到app,小程序，h5都支持的 这还用个吊毛呀，不知道你们有没有遇到跟我一样的问题 小编研究数日，总结了一套方案，只为解决一个问题： 把以上所有的叉叉变成勾勾 本着共享开源的原则，小编已经把源码分享到GitHub，欢迎各位大佬们添花 github demo地址：https://github.com/1879153421/buouyu-echarts 当然也有很多不足之处，也请大佬们多多指教，小编闲暇之余会不断更新的

快速入门

1、npm 直接安装

直接通过npm安装即可 npm 模块地址：https://www.npmjs.com/package/buouyu-echarts

npm i buouyu-echarts

若项目根目录下没有package.json 文件，可以先执行 npm init 安装失败可能的原因： 大部分开发者可能都设置了淘宝镜像源，这里需要设置成原来的地址

// 查询当前配置的镜像 npm get registry //https://registry.npmjs.org/ 
// 设置成淘宝镜像 npm config set registry http://registry.npm.taobao.org/ 
// 换成原来的 npm config set registry https://registry.npmjs.org/

也有可能之前的版本不见了，可以把package.json总的buouyu-echarts删掉，在执行npm i buouyu-echarts安装最新的 安装成功以后直接在需要用的页面引入

import buouyuEcharts from 'buouyu-echarts'

components挂在一下

components: {
            buouyuEcharts
        },

配置option

data() {
            return {
                option: {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 774, 660],
                        type: 'line',
                        smooth: true,
                    }],
                    visualMap: {
                        min: 0,
                        max: 1300,
                        calculable: false,
                        show: false,
                        realtime: false,
                        inRange: {
                            color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61",
                                "#f46d43", "#d73027", "#a50026"
                            ]
                        }
                    }
                },
            }
        },

引入DOM结构

<buouyuEcharts :option="option" canvasId="buouyu" />

这样就你能在app，小程序，h5都能看到同样的效果啦 当然也可以全局挂在 在根目录的main.js

import Vue from 'vue'
import App from './App'
import buouyuEcharts from 'buouyu-echarts' //引入buouyu-echarts
 Vue.component('buouyuEcharts',buouyuEcharts)  //挂在到全局
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()

然后就可以在任意页面直接用啦

<buouyuEcharts :option="option" canvasId="buouyu" />

跟以上类似，效果一样

2、直接下载引入

github项目地址:https://github.com/1879153421/buouyu-echarts 由于本组件依赖echarts，所以要安装echarts

npm i echarts

然后就可以直接在项目中使用buouyu-echarts啦 使用操作跟上面类似

教程

基础配置option

参考echarts官网：https://echarts.apache.org/zh/index.html

设置宽高

<buouyuEcharts height="12rem" width="80%" :option="option"  canvasId="buouyu" />

动态渲染数据

添加个ref

<buouyuEcharts  :option="option" ref="buouyu" canvasId="buouyu" />
data() {
            return {
                option: null
            }
        },
        mounted() {
            this.initBuouyuEcharts()
        },
        methods: {
            getRandom(min, max) {
                return Math.floor(Math.random() * (max - min)) + min
            },
            initBuouyuEcharts() {
                const option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 1000,
                        axisLabel: {
                            margin: 3,
                        }
                    },
                    series: [{
                        data: [300, 400, 800, 900, 700, 774, 400],
                        type: 'line',
                        smooth: true,
                    }],
                    visualMap: {
                        min: 0,
                        max: 1300,
                        calculable: false,
                        show: false,
                        realtime: false,
                        inRange: {
                            color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090",
                                "#fdae61",
                                "#f46d43", "#d73027", "#a50026"
                            ]
                        }
                    }
                }
                this.option = option //绑定数据组件就会初始化渲染
                const data = [300, 400, 800, 950, 700, 774, 400]
                const buouyuCharts = this.$refs.buouyu //里面有个setOption方法
                setInterval(() => {
                    data.push(this.getRandom(0, 1000))
                    data.shift()
                    buouyuCharts.setOption({
                        series: [{
                            data,
                        }]
                    })
                }, 1000)
            },
        }

效果

所有属性

参数 说明 是否必填 类型 传参示例 默认值
canvasId 唯一标识，同一组件里不要设置相同的值 是 string buouyu ———
option 参考echarts官网配置 是 object ——— ———
width 宽度，支持px,rem,rpx,vw等 否 string 90%，30rem 100%
height 宽度，支持px,rem,rpx,vh等 否 string 300px,30vh 500rem

有兴趣的可以一起学习交流 小编微信：buouyupro

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...