用echarts画一个玫瑰图
以下是使用Echarts绘制玫瑰图的示例代码：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts 玫瑰图</title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '玫瑰图'
},
tooltip: {},
legend: {
data:['销量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['pie', 'funnel']},
restore : {show: true},
saveAsImage : {show: true}
}
},
series: [
{
name: '销量',
type: 'pie',
radius: [20, 110],
center: ['50%', '50%'],
roseType: 'area',
data: [
{value: 10, name: 'rose 1'},
{value: 5, name: 'rose 2'},
{value: 15, name: 'rose 3'},
{value: 25, name: 'rose 4'},
{value: 20, name: 'rose 5'},
{value: 35, name: 'rose 6'},
{value: 30, name: 'rose 7'},
{value: 40, name: 'rose 8'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
在这个示例中，我们使用了Echarts中的玫瑰图（roseType: 'area'）来绘制图表。数据是通过一个数组来指定的，每个元素包含一个值和一个名称，表示一个扇形区域。我们还可以设置图表的标题、提示框、图例和工具栏等属性。最后，通过调用setOption()方法来显示图表
原文地址: https://www.cveoy.top/t/topic/daMa 著作权归作者所有。请勿转载和采集!