<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./echarts.js"></script>
</head>
<body>
<div id="main" style="width: 700px; height: 700px;background-color: aquamarine;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"))
var option = {
title: {
backgroundColor:'#B5A642',
text: '二级学院分布',
textStyle:{
color:'#9932CD',
fontFamily:'黑体',
fontSize:28,
},
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient:'vertical',
x:32,
y:74,
data: ['计算机','大数据','外国语','机器人','建工','机电','艺术','财经']
},
toolbox:{
show:true,
left:444,
top:22,
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
magicType:{
show:true,
type:['pie','funnel'],
option:{
funnel:{
x:'25%',
width:'50%',
funnelAlign:'left',
max:1548
}
}
},
restore:{show:true},
saveAsImage:{show:true}
}
},
calculable:true,
series: [
{
name: '学生人数',
type: 'pie',
radius: ['10%', '50%'],
center: ['60%', 180],
roseType: 'radius',
width: '50%',
max: 40,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
},
emphasis: {
label: {
show: true
},
labelLine: {
show: true
},
},
},
data: [
{ value: 2000, name: '计算机' },
{ value: 1500, name: '大数据' },
{ value: 1200, name: '外国语' },
{ value: 1100, name: '机器人' },
{ value: 1000, name: '建工' },
{ value: 900, name: '机电' },
{ value: 800, name: '艺术' },
{ value: 700, name: '财经' },
]
},
{
name: '学生人数(面积)',
type: 'pie',
radius:['10%','50%'],
center:['60%',180],
roseType:'area',
x:'50%',
max:40,
sort:'ascending',
data: [
{value:2000,name:'计算机'},
{value:1500,name:'大数据'},
{value:1200,name:'外国语'},
{value:1100,name:'机器人'},
{value:1000,name:'建工'},
{value:900,name:'机电'},
{value:800,name:'艺术'},
{value:700,name:'财经'},
]
},
{
name: '教授人数(面积)',
type: 'pie',
radius:['10%','50%'],
center:['60%',420],
roseType:'area',
x:'50%',
max:40,
sort:'ascending',
data: [
{value:25,name:'计算机'},
{value:15,name:'大数据'},
{value:12,name:'外国语'},
{value:10,name:'机器人'},
{value:8,name:'建工'},
{value:7,name:'机电'},
{value:6,name:'艺术'},
{value:4,name:'财经'},
]
},
]
};
myChart.setOption(option);
</script>
</body>
</html>
ECharts绘制玫瑰图
最新推荐文章于 2024-08-20 16:30:31 发布