饼图预览
https://echarts.apache.org/examples/zh/index.html
在上述网站选取图表,拷贝代码,将如下var opt替换成你的代码
前端代码
<div id="main" ></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
function getEchartWord() {
$.ajax({//发送请求
type: "POST",
contentType: "application/json; charset=utf-8",
url: "${ctp}/echarts-word",
dataType: "json",
error: function (data) {
alert("出错了!!:" + data);
},
success: function (data) {
var opt={
title: {
text: '大家在查',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: []
},
series: [
{
name: '大家在查',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//后端动态更新数据
for(var i=0;i<data.words.length;i++){
opt.legend.data.push({value:data.numbers[i],name:data.words[i]});
opt.series[0].data.push({value:data.numbers[i],name:data.words[i]});
}
myChart.setOption(opt);
}
});
}
</script>
其中ajax返回的data的数据结构是
public class EchartsWord {
@Getter
@Setter
private List<String> words;
@Getter
@Setter
private List<String> numbers;
}
后端
private List<String> wordsInChart= Arrays.asList("also","show","propose","while","but");
private List<String> numInChart = Arrays.asList("300","100","23","20","7");
@RequestMapping("/echarts-word")
@ResponseBody
public EchartsWord getEchartWord(){
EchartsWord ew=new EchartsWord();
ew.setWords(wordsInChart);
ew.setNumbers(numInChart);
return ew;
}