• 💘 开源不易，去 Github给个Star 吧！

H5Charts

一个基于 JavaScript 的开源可视化图表库。官网地址：https://handless-ui.github.io/H5Charts

如何使用？

首先需要进行安装：

npm install --save h5charts

安装完成以后，就可以在项目中引入了：

import H5Charts from "h5charts"

下面以绘制一个柱状图为例子：

首先准备好画布：

<div id="root" style="width:500px;height:400px;"></div>

然后直接绘制：

var el = document.getElementById("root");
var mychart =  new H5Charts(el, {
    xAxis: {
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar"
    }]
});

如果后续需要修改数据，直接：

mychart.setOption({
    series: [{
        data: [20, 130, 50, 80, 170, 10, 130],
        type: "bar"
    }]
});

更多内容和细节，你可以直接 查看文档 获得哦～

版权

MIT License

Copyright (c) zxl20070701 走一步，再走一步