在 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 项目。

支持平台

| Vue2 | Vue3 | | --- | --- | | ✔️ | ✔️ |

| APP-VUE | APP-NVUE | 小程序 | WEB/H5 | | --- | --- | --- | --- | | ✔️ | ❌ | ✔ | ✔ |

参数

| 参数名 | 类型 | 默认值 | 描述 | | :--: | :--: | :--: | :-- | | forceUseOldCanvas | Boolean | false | 强制使用旧版Canvas(不推荐) | | option | Object | | ECharts Option | | theme | String| | Eharts Theme | | map | Object| | 使用地图组件时，注册地图，详见：registerMap |

事件

| 事件名 | 参数 | 返回数据 | 描述 | | --- | --- | --- | --- | | inited | | chart | 初始化后返回 chart 对象 | | click | | event | 点击 | | touchstart | | event | 按下 | | touchmove | | event | 移动 | | touchend | | event | 松开 | | mousedown | | event | 按下 | | mousemove | | event | 移动 | | mouseup | | event | 松开 |

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 中反馈，谢谢！