Skip to content
This repository has been archived by the owner on Sep 12, 2023. It is now read-only.
/ echarts-for-uniapp Public archive

Apache ECharts 的uni-app版本, 支持Vue 2/3.

Notifications You must be signed in to change notification settings

xbmlz/echarts-for-uniapp

Repository files navigation

该项目已暂停维护,请使用 https://limeui.qcoon.cn/#/echart

在 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 中反馈,谢谢!