需求,使用echarts实现一个一个的长方形,四个叫圆角化,使用什么,实现代码
时间: 2024-03-06 07:48:52 浏览: 81
您可以使用 ECharts 中的 `bar` 图表类型,并在 `itemStyle` 中设置圆角化属性来实现这个需求。下面是一个简单的示例代码:
```javascript
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '长方形示例'
},
tooltip: {},
legend: {},
xAxis: {
data: ["长方形1","长方形2","长方形3","长方形4"]
},
yAxis: {},
series: [{
name: '长方形',
type: 'bar',
data: [1500, 2000, 2500, 3000],
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0] // 设置圆角化属性,前两个值表示左上角和右上角的圆角半径,后两个值表示右下角和左下角的圆角半径
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
这段代码会生成一个柱状图,其中每个长方形都是圆角化的,并且前两个值表示左上角和右上角的圆角半径,后两个值表示右下角和左下角的圆角半径。
阅读全文