学习图表框架-uPlot（vue项目）第四篇 柱状图

项目中用到了分组柱状图，参考官方demo，图表样式如下：

 引入需要的文件

<script src="./uPlot.iife.js"></script>
<script src="./quadtree.js"></script>
<script src="./distr.js"></script>
<script src="./grouped-bars.js"></script>

准备需要的数据

const data = [
	["Group A", "Group B", "Group C"],
	[1, 2, 3],
	[3, 2, 1],
	[5, 9, 3],
];

准备series配置项，有几组数据，就需要几个

const series = [
	{},
	{
		label: "Metric 1",
		fill: "#33BB55",
	},
	{
		label: "Metric 2",
		fill: "#B56FAB",
	},
	{
		label:	"Metric 3",
		fill: "#BB1133",
	},
];

生成柱状图的方法

function makeChart(o, data, bands) {
	let ori = o.ori;
	let dir = o.dir;
	let stacked = o.stacked;

	const opts = {
	width:  ori == 0 ? 800 : 400,
					    height: ori == 0 ? 400 : 800,
					scales: {
						y: {
							range: [0, null],
							ori: ori == 0 ? 1 : 0,
						//	dir: ori == 0 ? 1 : -1,
						}
					},
					bands,
					axes: [
						{
						//	rotate: -45,
						},
						{
						//	show: false,
							side: ori == 0 ? 3 : 0,
						},
					],
					legend: {
						live: false,
						markers: {
							width: 0,
						}
					},
					padding: [null, 0, null, 0],
					series: JSON.parse(JSON.stringify(series)),
					plugins: [
						seriesBarsPlugin({
							ori,
							dir,
							stacked,
						}),
					],
				};

				let u = new uPlot(opts, data, document.body);
			}