ucharts 横向柱状图
时间: 2023-10-07 21:09:02 浏览: 247
你可以使用 CSDN 开发的 ucharts 库来创建横向柱状图。下面是一个示例代码:
```javascript
import ucharts from 'ucharts';
// 创建数据
const data = [
{ name: 'A', value: 100 },
{ name: 'B', value: 200 },
{ name: 'C', value: 150 },
];
// 创建图表实例
const chart = new ucharts({
$this: this,
canvasId: 'chartCanvas',
type: 'column',
categories: data.map(item => item.name),
series: [{
name: '柱状图',
data: data.map(item => item.value),
format: (val) => val.toFixed(0),
}],
yAxis: {
format: (val) => val.toFixed(0),
},
});
// 渲染图表
chart.show();
```
请注意代码中的 `chartCanvas` 是一个画布的 id,你需要在 HTML 中创建一个 `<canvas>` 元素,并设置相应的 id。
上述代码创建了一个横向柱状图,数据由 `data` 变量定义,其中 `name` 表示柱状图的名称,`value` 表示柱状图的值。你可以根据需要修改 `data` 的内容来适应你的需求。
希望这对你有帮助!如果你还有其他问题,请随时提问。
阅读全文