更新记录

1.0.2（2022-11-20）

• 新增 pages 文件夹下新增组件示例
• 新增 保存到相册方法
• 新增 地图注册方法
• 新增 多主题色功能
• 修复 修复点击事件报错
• 优化 优化部分细节

1.0.1（2022-11-20）

• 新增 支持vue2.x, 旧版微信小程序
• 新增 h5点击事件
• 新增 小程序触摸事件
• 新增 forceUseOldCanvas参数：强制使用旧版Canvas
• 移除 width、height属性，用style代替

1.0.0（2022-11-18）

在uni-app中可以以组件的形式使用 ECharts, 支持touch事件。

平台兼容性

在 uni-app 中使用 Apache ECharts

本项目是 Apache ECharts 的uni-app版本，支持 Vue.js 2/3，以及使用的示例。

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

快速开始

方式一: 使用 uni_modules 安装（推荐）

使用 uni_modules 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 echarts-for-uniapp 组件。点击安装 echarts-for-uniapp 组件库

方式二: 使用 npm 安装

在 vue-cli 项目中可以使用 npm 安装 echarts-for-uniapp 库 ，或者直接在 HBuilderX 项目中使用 npm 。（不推荐后一种方式）

npm i uniapp-echarts

创建图表

<template>
  <view class="content">
    <uni-chart :option="option" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
    }
  }
}

<style>
.content {
    width: 375px;
    height: 375px;
}
</style>

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

完整的例子请参见 xbmlz/echarts-for-uniapp 项目。

支持平台

参数

事件

FAQ

如何获取图表实例？

<template>
  <view class="content">
    <uni-chart @inited="inited" />
  </view>
</template>

<script>
export default {
    data() {
        return {}
    },
    methods: {
        inited(chart) {
            // do something
        }
    }
}
</script>

如何延迟加载图表？

参见 pages/lazyLoad 的例子，可以在获取数据后再初始化数据。

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

参见 pages/multiCharts 的例子。

如何使用 Tooltip？

具体使用方法和 ECharts 相同，例子参见 pages/line

如何保存为图片？

参见 pages/saveCanvas 的例子。

多主题色

参见 pages/themeColor 的例子 。

完整示例

参见 pages

文件太大怎么办？

本项目默认提供的 ECharts 文件是最新版本的包含所有组件文件。可以下载不同版本的 ECharts 进行替换。建议调试时使用未压缩版本，发布时使用压缩版本，否则文件会太大无法发布。

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

下载的文件放在 uni_modules/echarts-for-uniapp/static/echarts.min.js，注意一定需要重命名为 echarts.min.js。

此外，还可考虑使用微信小程序的分包策略

如有其它问题，也欢迎在 issue 中反馈，谢谢！