更新记录

0.0.1（2022-04-25） 下载此版本

初版

平台兼容性

uni-app

其他

在uni-app中使用 echarts

开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。

创建图表

复制代码<view class="container">
    <echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
</view>

复制代码export default {
    data() {
        return {
            option: {}
        }
    },
    onReady() {
        this.option = {
            backgroundColor: "#ffffff",
            series: [{
                label: {
                    normal: {
                        fontSize: 14
                    }
                },
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['0%', '40%'],
                data: [{
                    value: 55,
                    name: '北京'
                }, {
                    value: 20,
                    name: '武汉'
                }, {
                    value: 10,
                    name: '杭州'
                }, {
                    value: 20,
                    name: '广州'
                }, {
                    value: 38,
                    name: '上海'
                }]
            }]
        };
    }
}

这对于所有 ECharts 图表都是通用的，用户只需要修改上面 option 的内容，即可改变图表。option 的使用方法参见 ECharts 配置项文档。对于不熟悉 ECharts 的用户，可以参见 5 分钟上手 ECharts 教程。

如何在一个页面中加载多个图表？

canvasId 设置为不同

如何保存为图片？

复制代码// 先保存图片到临时的本地文件，然后存入系统相册
this.$refs['echarts'].canvasToTempFilePath({
    success: (res) => {
        // #ifdef H5
        console.log(res.tempFilePath)
        return
        // #endif
        // 存入系统相册
        uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath || '',
            success: res => {
                console.log("success", res)
            },
            fail: res => {
                console.log("fail", res)
            }
        })
    },
    fail: (res) => console.log(res)
});

文件太大怎么办？

发布时，如果对文件大小要求更高，可以在 ECharts 在线定制网页下载仅包含必要组件的包，并且选择压缩。

此外，还可考虑使用微信小程序的分包策略和分包异步加载

复制代码{
    "path": "pages/tabbar/index",
    "style": {
        "navigationBarTitleText": "首页",
        "usingComponents": {
            "echarts": "/pages/common-a/components/echarts/echarts"
        },
        "componentPlaceholder": {
            "echarts": "view"
        }
    }
}