echarts横向圆角柱状图
时间: 2023-11-14 11:10:11 浏览: 75
您可以使用 echarts 中的 bar 柱状图,通过设置 barWidth 和 barCategoryGap 来实现横向圆角柱状图的效果。具体实现步骤如下:
1. 引入 echarts 库
```html
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
```
2. 准备数据
```js
var data = [
{ name: 'A', value: 100 },
{ name: 'B', value: 200 },
{ name: 'C', value: 300 },
{ name: 'D', value: 400 },
{ name: 'E', value: 500 }
];
```
3. 配置 echarts 图表
```js
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
xAxis: {
type: 'value',
show: false
},
yAxis: {
type: 'category',
data: data.map(item => item.name),
axisTick: {
show: false
},
axisLine: {
show: false
}
},
series: [
{
type: 'bar',
data: data,
barWidth: 20, // 柱子宽度
barCategoryGap: '50%', // 柱子间距
itemStyle: {
borderRadius: [0, 10, 10, 0] // 圆角设置
}
}
]
};
myChart.setOption(option);
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)