Uniapp-echarts NPM

在 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>