简介
小程序要集成图表有很多方式,尝试使用F2,uchart....等多个图表,其中集成进去包最小的是F2,但是F2对于Taro+Typescript的小程序的来说,不是很方便,但是架不住人家编译后的包小,最后我选择用Echart,下面就介绍在集成的方式以及遇到的一些问题。
准备图表
首先你需要到Echart官方去选择你需要到图表的,同样你也可以在它的官网上进行调试。
然后从Echart.js从这里下载echart.js
文件。
建议选择4.x的版本,目前测试过5.x编译出来是500kb左右,4.x打印出来大概是300kb左右,如果你对交互没有太多要求,建议可以选择4.0或者是3.x的版本,这样编译出来的js文件会特别小。
集成工具
本人使用的环境是Taro+Typescript的写法,所以我用的echart-taro3-react,把echart-taro3-react下载到自己的项目内。
- 设置options
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data,
type: 'line',
},
],
}
- 图表刷新数据
注意,这里最好是加个延迟,如果不加延迟的话,图表的动画会刷新次数过多,导致闪屏,这边用的是1s,可以根据自己的需求来修改。
useEffect(() => {
// 建议加延迟,避免初始化的时候刷新次数过多,导致图表出现闪屏的情况
setTimeout(() => {
if (echartsRef.current) {
echartsRef?.current?.refresh(lineOption)
}
}, 1000)
}, [])
最后附上完整demo
import React, { useEffect, useRef } from 'react'
import { EChart } from 'src/echarts-taro3-react'
const Demo: React.FC = () => {
const echartsRef = useRef<any>(null)
// data最好是处理优先处理好
const newData = [150, 230, 224, 218, 135, 147, 260]
const lineOption = (data: any[]) => {
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data,
type: 'line',
},
],
}
return option
}
useEffect(() => {
// 建议加延迟,避免初始化的时候刷新次数过多,导致图表出现闪屏的情况
setTimeout(() => {
if (echartsRef.current && newData && newData.length > 0) {
echartsRef?.current?.refresh(lineOption(newData))
}
}, 1000)
}, [newData])
return (
// 注意这里需要设置宽高,不然不会图表不是显示
<view style={{ height: '200px !important', backgroundSize: '100%' }} className="bg-no-repeat">
<EChart ref={echartsRef} canvasId="echart-chart" />
</view>
)
}
export default Demo