HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PieChartDemo</title>
<link href="../css/all.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<div class="demo1">11</div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
</div>
<script src="../common/jquery.min.js"></script>
<script src="../common/echarts.js"></script>
<script src="../js/pieJs.js"></script>
</body>
</html>
CSS代码:
body {
margin: 0;
padding: 0;
}
/***************/
/* Pie CSS */
/***************/
.container {
display: grid;
height: 100vh;
width: 100vw;
grid-template-rows: 1fr 4fr 4fr 1fr;
grid-gap: 2px 2px;
grid-template-columns: repeat(2, 50%);
}
.title {
grid-row: 1/2;
grid-column: 1/span 2;
background: cornsilk;
}
.tail{
grid-row: 4;
grid-column: 1/span 2;
background: floralwhite;
}
.demo1{
grid-row: 2;
grid-column: 1;
background: cornflowerblue;
}
.demo2{
grid-row: 2;
grid-column: 2;
background: goldenrod;
}
.demo3{
grid-row: 3;
grid-column: 1;
background: azure;
}
.demo4{
grid-row: 3;
grid-column: 2;
background: aliceblue;
}
JS代码:
$(function(){
paintPie();
})
/*绘制圆环图:该种方式是先渲染再加载数据;Echart是以数据为驱动的*/
function paintPie(){
var pieChart = echarts.init($('.demo1')[0]);//JQuery=>DOM
var rich = {
yellow: {
color: "#ffc72b",
fontSize: 14,
padding: [5, 4],
align: 'center'
},
total: {
color: "#ffc72b",
fontSize: 14,
align: 'center'
},
white: {
color: "#fff",
align: 'center',
fontSize: 12,
padding: [21, 0]
},
blue: {
color: '#49dff0',
fontSize: 14,
align: 'center'
},
hr: {
borderColor: '#0b5263',
width: '100%',
borderWidth: 1,
height: 0,
}
}
option = {
tooltip: {//提示框,hover时提示信息,内容通过设置formatter
trigger: 'item',
//position: 'inside',
formatter: '{d}',
textStyle: {
color: '#00ffff'
}
},
backgroundColor: '#136699',//画布背景颜色
title: {
text:'学生总数',
left:'center',
top: '53%',
textStyle:{
color:'#fff',
fontSize:12,
align:'center'
}
},
series: [{
name: '专业选课人数',//用于tooltip的显示
type: 'pie',
radius: ['42%', '75%'],
hoverAnimation: true,//hover时放大选中的扇区
hoverOffset: 5,//偏移量
avoidLabelOverlap: true,//防止标签重叠的策略
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
label: {//饼图图形上的文本标签
normal: {show: true},
},
labelLine: {//标签的视觉引导线样式
normal: {
length: 55,
length2: 0,
lineStyle: {
color: '#0b5263'
}
}
},
silent: false,//图形是否不响应和触发鼠标事件,true时hoverAnimation无效
data: []
}]
};
pieChart.showLoading();
//使用休眠函数只是为了更好的展示loding动画
setTimeout(function(){
$.get('http://127.0.0.1:8080/api/pie/demo1').done(function(data){
option.series[0].label.normal = {
//模板变量有 {a}、{b}、{c}、{d},分别表示系列名,数据名,数据值,百分比。formatter: '{b}: {d}'
//该实例需要结合富文本标签rich
formatter: function(params, ticket, callback) {
var total = 0; //总数量
var percent = 0; //占比
data.forEach(function(value, index, array) {
total += value.value;
});
percent = ((params.value / total) * 100).toFixed(1);
return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
},
rich: rich
};
option.series[0].data = data;
pieChart.setOption(option);
pieChart.hideLoading();
})
},1000);
/* 动画效果,通过事件dispatchAction触发*/
var currentIndex = -1;
setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
pieChart.dispatchAction({
type: 'downplay',//类型
seriesIndex: 0,//指定目标序列
dataIndex: currentIndex //当前被触发项的索引
});
if(currentIndex>=dataLen-1){
currentIndex = -1;
}
currentIndex = (currentIndex + 1);
// 高亮当前图形
pieChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
pieChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, 1000);
}
JAVA接口代码:
package com.do1shoje.controller.echartServer;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class DataController {
@CrossOrigin
@RequestMapping(value = "/api/pie/demo1")
public List returnPieDemo1Data() {
String[] name = {"计算机","高等数学","现代史","经济学原理","机器学"};
int []value = {122,200,300,123,500};
List list = new ArrayList();
for(int i=0;i<5;i++) {
Map m = new HashMap();
m.put("name",name[i]);
m.put("value", value[i]);
list.add(m);
}
return list;
}
}