使用背景
公司要求在taro框架中使用图表，同时我自己的导航网(react+ts)也要用图表。一开始呢，我肯定是跟着大家一样用echarts的或者使用taro市场插件里的图表的。但是神奇的事发生了，不兼容！！！taro3版本。我强颜欢笑，我就疯狂的查找其他好用的图表，最后找到了牛叉的ucharts。为什么说他牛叉呢？首先他适合多端开发，其次他的文档有对应的代码，你直接ctrl+cv就ok了。如下图:
okok,你肯定说我不想贴在自己代码里调试，我就想看看他每个属性的怎么用的，有没有在线调试，在线文档看的呀。一开始我呢，其实跟大家一样想的，后来我发现，居然真的有在线调试的功能！！我只能说，作者已经给开发者做到了保姆级别了！
1.介绍uCharts
1.ucharts最新官网
www.ucharts.cn/v2/#/
2.适合多端开发（taro,uniapp,微信,qq,百度,支付宝,字节跳动,快手,web,vue）。你想要的他都有了！
3.ucharts有在线调试功能，在线图表属性介绍文档。
4.ucharts还有自己的模板，让你快速上手，妈妈再也不为我的学习所烦恼了。
2.使用ucharts
基于我的react+typescript项目为例
2.1下载ucharts
网址:www.ucharts.cn/v2/#/dwonlo…
npm i @qiun/ucharts
2.2项目中引入
废话不多说，直接上代码 home.tsx--父类
import G_LINE_INTERACT from "@/components/v1/common/ucharts/line/LineInteract"
class Home extends Component{
lineRef:any;
constructor(props:any>) {
super(props)
this.lineRef = createRef();
}
componentDidMount(): void {
//加载ucharts，父类调用子类方法
this.lineRef.current.getServerData()
}
render() {
return (
<>
<G_LINE_INTERACT ref={this.lineRef} />
</>
)
}
}
LineInteract.tsx--子类
//coding = utf-8
//@Time : 2022-04-30 18:38
//@Author : 沉默小管
//@File : LineInteract.tsx
//@web : www.php-china.com
//@Software: WebStorm
import { resInterface } from "@/network/v1/network/networkInterface";
import React, {forwardRef, MutableRefObject, useImperativeHandle, useRef, useState} from "react"
import uCharts from "@qiun/ucharts"
import styles from "./LineInteract.module.less"
/**
* 组件类
* @returns
*/
var uChartsInstance = {};
const LineInteract = forwardRef((props: any,ref:any) => {
let [uChartsId, setUChartsId] = useState<string>("uChartsId");
let [cWidth, setCWidth] = useState<number>(750);
let [cHeight, setCHeight] = useState<number>(500);
useImperativeHandle(ref,()=>({
getServerData
}))
const getServerData = ()=>{
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
categories: ["2020-12-10","2020-12-11","2020-12-12","2020-12-13","2020-12-14","2020-12-15","2020-12-16","2020-12-17","2020-12-18"],
series: [
{
name: "日新增用户量",
data: [10,5,1,8,0,1,30,20,13]
}
]
};
showCharts(uChartsId, res);
}, 500);
}
const showCharts=(id,data)=>{
const canvas = document.getElementById(id) as HTMLCanvasElement;
const ctx = canvas?.getContext("2d");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
uChartsInstance[id] = new uCharts({
type: "line",
context: ctx,
width: canvas.width,
height: canvas.height,
categories: data.categories,
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,10,0,15],
legend: {},
xAxis: {
disableGrid: true,
labelCount: 4
},
yAxis: {
gridType: "dash",
dashLength: 2
},
extra: {
line: {
type: "straight",
width: 2
}
}
});
canvas.onclick = (e:any)=>{
uChartsInstance[uChartsId].touchLegend(getH5Offset(e));
uChartsInstance[uChartsId].showToolTip(getH5Offset(e));
};
canvas.onmousemove=(e:any)=>{
uChartsInstance[uChartsId].showToolTip(getH5Offset(e));
};
}
const getH5Offset=(e)=>{
e.mp = {
changedTouches: []
};
e.mp.changedTouches.push({
x: e.offsetX,
y: e.offsetY
});
return e;
}
return (<>
<canvas id={uChartsId} className={styles.charts}></canvas>
</>)
})
export default LineInteract
最终效果
更多使用ucharts请进入官网查看 www.ucharts.cn/v2/#/
