echarts4taro3 是一个可运行在 Taro3 框架上的 Echarts 跨端组件，满足开发者使用一套 vue 或 vue3 代码，就让图表流畅的展示于 H5 和小程序端。
目前已支持的平台包含：H5、微信小程序、支付宝小程序和字节跳动小程序。
支持开发者导入自定义 echarts 库。
1、下载依赖
yarn add echarts4taro3 -S #或 npm install echarts4taro3 -S2、项目引用
import { EChart, loadEcharts } from "echarts4taro3";
import * as echarts from "echarts4taro3/lib/assets/echarts"; // 框架内置了一份，也可以用官网自定义的 echarts.js
loadEcharts(echarts); // 初始化加载 echarts 库1、下载组件：点击下载
2、拷贝项目 /lib 目录下内容到项目中，可命名为 echarts4taro3，业务逻辑中这样引用 import { EChart } from "@components/echarts4taro3/index.js"。业务项目结构如下：
## src 目录下
.
├── components
│ └── echarts4taro3 # 图表跨端组件
│ ├── assets
│ ├── common
│ ├── ec-canvas
│ ├── echart
│ └── index.js
└── pages # 使用示例
├── ecchart
└── index首先在全局 app.js 中统一加载 echarts 库，如果只有单个页面使用 echarts，则推荐在单个页面中加载。参考如下：
// app.js
import * as echarts from "echarts4taro3/lib/assets/echarts"; // 这里用了内置的，也可以用自定义的 echarts.js
import { loadEcharts } from "echarts4taro3";
loadEcharts(echarts); // 加载 echarts 库页面代码如下：
<!-- Page A -->
<template>
<view class="bar-chart ">
<EChart ref="canvas" />
</view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Taro from "@tarojs/taro";
import { EChart } from "echarts4taro3";
import "./index.less";
const canvas = ref(null);
const options = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
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"
}
]
};
onMounted(() => {
const echartComponentInstance = canvas.value; // 组件实例
Taro.nextTick(() => {
// 初始化图表
echartComponentInstance.refresh(options).then((myChart) => {
/** 异步更新图表数据 */
setInterval(() => {
let firstValue = options.series[0].data.shift();
options.series[0].data.push(firstValue);
myChart.setOption(options); // myChart 即为 echarts 实例，可使用的实例方法，具体可参考 echarts 官网
}, 2000);
});
});
});
</script>首先在全局 app.js 中统一加载 echarts 库，如果只有单个页面使用 echarts，则推荐在单个页面中加载。参考如下：
// app.js
import * as echarts from "echarts4taro3/lib/assets/echarts"; // 这里用了内置的，也可以用自定义的 echarts.js
import { loadEcharts } from "echarts4taro3";
loadEcharts(echarts); // 加载 echarts 库页面代码如下：
<template>
<view class="bar-chart">
<e-chart ref="canvas" />
</view>
</template>
<script>
import Taro from "@tarojs/taro";
import { EChart } from "echarts4taro3";
import "./index.less";
export default {
name: "Index",
components: {
EChart
},
data() {
return {};
},
mounted() {
let options = {
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
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"
}
]
};
Taro.nextTick(() => {
// 初始化图表
this.$refs.canvas.refresh(options).then((myChart) => {
/** 异步更新图表数据 */
setInterval(() => {
let firstValue = options.series[0].data.shift();
options.series[0].data.push(firstValue);
myChart.setOption(options);
}, 2000);
});
});
}
};
</script>import * as echarts from "./assets/echarts"; // 根据需求自定义的 echarts 库
import { loadEcharts } from "echarts4taro3";
loadEcharts(echarts); // 给组件导入自定义的 echarts 库let myChart;
onMounted(() => {
const echartComponentInstance = canvas.value;
Taro.nextTick(() => {
echartComponentInstance.refresh(options).then((myChartInstance) => {
myChart = myChartInstance;
});
});
});
// ...
// 点击设置图表数据
function handleSetOptions(data) {
myChart.setOption(data);
}let myChart;
onMounted(() => {
const echartComponentInstance = canvas.value;
Taro.nextTick(() => {
echartComponentInstance.refresh(options).then((myChartInstance) => {
myChart = myChartInstance;
});
});
});
// ...
// 点击获取图表数据
function handleGetOptions() {
console.log(myChart.getOption());
}onMounted(() => {
const echartComponentInstance = canvas.value;
Taro.nextTick(() => {
echartComponentInstance.refresh(options);
});
});
// ...
// 点击获取图表 echarts 实例
function handleGetEcharts() {
const echartComponentInstance = canvas.value;
const myChart = echartComponentInstance.getChart();
console.log(myChart);
// 后续可进行相关 echarts 操作
// myChart.setOption(data);
// myChart.resize(data);
}引入 EChart 组件后，拿到 EChart 组件实例，并调用实例 refresh(options)方法设置图表数据。具体可参考官方 options 配置项和Demo 示例。
<template>
<EChart ref="canvas" />
</template>
<script setup>
// ...
onMounted(() => {
const echartComponentInstance = canvas.value; // 组件实例
Taro.nextTick(() => {
echartComponentInstance.refresh(options); // 初始化图表
});
// ...
setTimeout(()=>{
echartComponentInstance.setOption(options); // 异步更新图表数据，需要等 refresh 方法实例化完成
},200)
});
</script>
| 方法 | 参数 | 描述 |
|---|---|---|
| refresh | (options ,[callback] ) | 创建一个 echarts 实例，返回 echartsInstance |
| setOption | (options ) | 设置图表实例的配置项以及数据，所有参数和数据的修改都可以通过 setOption 完成，echarts 会合并新的参数和数据，然后刷新图表。 |
| resize | (resizeOptions) | 改变图表尺寸，在容器大小发生改变时需要手动调用。 |
| getChart | 无 | 获取图表 echarts 实例，来完成更多自定义效果 |
【参数解释】
-
options: echarts 配置项，可参考官网options 配置项 -
resizeOptions: 尺寸属性，有下面几个属性：
width可显式指定实例宽度，单位为像素。height可显式指定实例高度，单位为像素。
对于网页加载速度或者微信小程序包体积大小有要求的，可以做如下调整：
1、因为 echarts 图表库本身体积相对较大，所以开发者可以根据业务需要在 echarts 官网定制 echarts.js，然后通过 loadEcharts 方法动态导入库。
2、在微信小程序中对于应用体积有严格的限制要求，开发者可以通过分包技术对应用进行拆分。
3、组件初始化 refresh 方法需要在页面组件节点挂载完成后才能调用。
方式一：直接下载 echarts4taro3：Download ZIP
方式二：Use Git or checkout with SVN using the web URL.
git clone https://github.com/beezen/echarts4taro3.git在 examples/ 目录下存在相关功能实现示例：
快速运行
# 在对应的 demo 根目录下执行
$ yarn # 安装依赖
$ yarn dev:weapp # 运行微信小程序
$ yarn dev:h5 # 运行 H5