更新记录

1.0.5(2024-01-03)

Fix getAttribute错误

1.0.4(2023-12-07)

更新Readme正确的演示示例

1.0.3(2023-12-05)

Fix App示例

查看更多

平台兼容性

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

ui-echarts

基于百度开源的echarts封装的uni-app跨端可视化图表库, 兼容App、H5、小程序等平台

平台兼容

App H5 微信小程序

其它平台未测试。

main.js

import uiEcharts from '@/uni_modules/ui-echarts'
Vue.use(uiEcharts)

用法

<view>
    <ui-echarts ref="chart" :option="option" exportBase64></ui-echarts>
    <image v-if="image" :src="image"></image>
    <button type="primary" size="mini" @click="toImage">导出图片</button>
</view>
export default {
    data () {
        return {
            image: null,
            option: {}
        }
    },
    onReady() {
        this.option = {
            grid: {
                right: 20
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }]
        }
    },
    methods: {
        toImage () {
            this.$refs?.chart.toImageFile({
                /**
                 * tempFilePath 图片路径, H5导出也是base64
                 * base64 图片base64
                 */
                success: ({ tempFilePath, base64 }) => {
                    this.image = base64;
                }
            })
        }
    }
}

Props

参数 说明 类型 默认值
option 图表配置项 Object -
width 图表宽度 String, Number '100%'
height 图表高度 String, Number '600rpx'
exportBase64 是否转换image本地文件为base64 Boolean false

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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