echarts基础柱状图带圆角怎么写
时间: 2024-09-12 21:08:28 浏览: 32
ECharts是一款强大的数据可视化库,创建基础柱状图带圆角通常需要在配置项中设置`barBorderRadius`属性。以下是基本步骤:
1. 首先,确保你已经引入了ECharts的JS文件,并在HTML中创建了一个图表容器。
```html
<div id="main" style="width: 600px;height:400px;"></div>
```
2. 然后,在JavaScript中初始化ECharts实例,并配置柱状图的样式,包括边框圆角:
```javascript
var option = {
// 全局配置
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10],
// 设置柱状图边框圆角
itemStyle: {
barBorderRadius: [5, 5, 0, 0] // 上左、上右、下左、下右四个方向的半径
}
}
]
};
// 初始化图表并渲染
var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);
```
在这个例子中,`barBorderRadius`是一个数组,分别设置了柱状图四个角落的圆角半径,值越大圆角越明显。
阅读全文