✨$编写不易，还希望各位大佬支持一下$

📃 $个人主页：$

📃 $个人网站：$

🔥 $技术交流QQ群：837051545$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教

使用背景

公司要求在taro框架中使用图表，同时我自己的导航网(react+ts)也要用图表。一开始呢，我肯定是跟着大家一样用echarts的或者使用taro市场插件里的图表的。但是神奇的事发生了，不兼容！！！taro3版本。我强颜欢笑，我就疯狂的查找其他好用的图表，最后找到了牛叉的ucharts。为什么说他牛叉呢？首先他适合多端开发，其次他的文档有对应的代码，你直接ctrl+cv就ok了。如下图:

okok,你肯定说我不想贴在自己代码里调试，我就想看看他每个属性的怎么用的，有没有在线调试，在线文档看的呀。一开始我呢，其实跟大家一样想的，后来我发现，居然真的有在线调试的功能！！我只能说，作者已经给开发者做到了保姆级别了！

1.介绍

1.ucharts最新官网


2.适合多端开发（taro,uniapp,微信,qq,百度,支付宝,字节跳动,快手,web,vue）。你想要的他都有了！
3.ucharts有在线调试功能，在线图表属性介绍文档。
4.ucharts还有自己的模板，让你快速上手，妈妈再也不为我的学习所烦恼了。

2.使用ucharts

基于我的react+项目为例

2.1下载ucharts

网址:https://www.ucharts.cn/v2/#/dwonload/index

npm i @qiun/ucharts
1

2.2项目中引入

废话不多说，直接上代码
home.–父类

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} />			</>		)	}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

LineInteract.tsx–子类

//coding = utf-8//@Time : 2022-04-30 18:38//@Author : 沉默小管//@File : LineInteract.tsx//@web  : www.php-china.com//@Software: WebStormimport { 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

最终效果

更多使用ucharts请进入官网查看