echarts 图表制作(饼图、柱状图(包含关系)、时间轴)
程序员文章站
2022-04-21 22:32:37
...
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- js部分 -->
<script type="text/javascript" src="../../../../js/jquery-1.11.1.min.js"></script>
<script src="../../../../js/eChart3.6.2/echarts.js"></script>
<script src="../../../../js/eChart3.6.2/theme/vintage.js"></script>
<script type="text/javascript" src="../../../../js/bootstrap.min.js"></script>
<!-- css部分 -->
<link rel="stylesheet" href="../../../../css/bootstrap/bootstrap.css">
</head>
<body>
<div class="container-fluid" id="chartOne" class="main"
style="height: 100%"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chartOne'));
var scale=0.5;
var resultMap = {};
$(function() {
var url = "/shslc/khtj/tjgl/endCaseAjax.do?state=04";
$.post(url, initData, "json")
})
function initData(ob) {
resultMap=dataFormatter(ob);
var options=[];
placeHolderStyle = {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
}
}
};
//resultMap.dataGZSB = dataFormatter(resultMap.data['公众上报']);
var min_year=resultMap.year['min_year'];
var max_year=resultMap.year['max_year'];
var series=[];
var options=[];
series=getBaseSeries();
getOptions(options,min_year,max_year);
var option = {
baseOption:{
timeline : { //时间轴
axisType : 'category',
autoPlay : true,
playInterval : 1500,
data : resultMap.timeline,
label : {
formatter : function(s) {
return (new Date(s)).getFullYear();
}
}
},
grid: [
{x: '50%', y: '7%', width: '45%', height: '80%'},
],
tooltip: {
formatter: '{b} ({c})'
},
xAxis: [
{gridIndex: 0, axisTick: {show:false},axisLabel: {show:false},splitLine: {show:false},axisLine: {show:false }},
],
yAxis: [
{ 'type' : 'category',
gridIndex: 0, interval:0,
axisTick: {show:false}, axisLabel: {show:true},splitLine: {show:false},
axisLine: {show:true,lineStyle:{color:"#6173a3"}},
},
{ 'type' : 'category',
gridIndex: 0, interval:0,
axisTick: {show:false}, axisLabel: {show:false},splitLine: {show:false},
axisLine: {show:false},
}
],
series:series
}, //baseoption 基础数据
options: options
};
myChart.setOption(option);
};
//辅助方法
function dataFormatter(obj) {
var pList ;
var temp;
for (var year = obj.year['min_year']; year <= obj.year['max_year']; year++) {
pList=obj.data_startcase[year+'年上报类型'];
temp =obj.data_startcase[year+'年上报数'];
for (var i = 0, l = temp.length; i < l; i++) {
obj.data_startcase[year+'年上报数'][i] = {
name : pList[i],
value : parseInt(temp[i])
}
}
}
return obj;
}
function getData(percent) {
return [{
value: percent,
name: percent,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00B2EE'
}, {
offset: 1,
color: '#00DDE6'
}])
}
}
}, {
value: 1 - percent,
itemStyle: {
normal: {
color: 'transparent'
}
}
}];
}
function arrAddStr(arr,str){
var farr=[];
for(var i=0;i<arr.length;i++){
farr.push(arr[i]+str);
}
return farr;
}
function getBaseSeries(){
var baseseries=[{ //饼图1和柱状图1
type: 'pie',
radius : '30%',
center: ['22%', '33%'],
color:['#86c9f4','#4da8ec','#3a91d2','#005fa6','#315f97'],
labelLine:{normal:{show:false}},
itemStyle: {normal: {label:{ show: true, formatter: '{b} \n ({d}%)', textStyle:{color:'#B1B9D3'}} },},
},
{
type: 'bar',xAxisIndex: 0,yAxisIndex: 0,barWidth:'45%',
itemStyle:{normal:{color:'#86c9f4'}},
label:{normal:{show:true, position:"right",textStyle:{color:"#9EA7C4"}}},
},
{
type: 'bar',xAxisIndex: 0,yAxisIndex: 1,barWidth:'45%',
itemStyle:{normal:{color:'#00688B'}},
label:{normal:{show:true, position:"right",textStyle:{color:"#9EA7C4"}}},
},];
var radius_in=130;
var radius_out=150;
for(var j=0;j<5;j++){ //共有5中上报方式
baseseries.push({
type: 'pie',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.seriesName + ": " + params.name * 100 + "%";
}
},
clockWise: true, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['22%', '73%'],
radius: [radius_in*scale, radius_out*scale],
itemStyle: placeHolderStyle,
label: {
normal: {
show: false,
}
},
},)
radius_in=radius_in-25;
radius_out=radius_out-25;
}
return baseseries;
}
function getOptions(obj,minYear,maxYear){ //获取options
for(var i = minYear;i<maxYear+1;i++){
var series=[{ //饼图1和柱状图1
name: i+'年河道巡查上报占比',
data:resultMap.data_startcase[i+'年上报数'],
},
{
name: i+'年河道巡查上报数',
data: resultMap.data_startcase[i+'年上报数'],
},
{
name: i+'年河道巡查结案数',
data:resultMap.data_startcase[i+'年结案数'],
}];
var radius_in=130;
var radius_out=150;
for(var j=0;j<resultMap.data_startcase[i+'年结案率'].length;j++){
series.push({
name: resultMap.data_startcase[i+'年上报类型'][j],
radius: [radius_in*scale, radius_out*scale],
data: getData(resultMap.data_startcase[i+'年结案率'][j])
},)
radius_in=radius_in-25;
radius_out=radius_out-25;
}
obj.push(
{ title:[ //标题
{text:i+"年河道巡查上报占比",x: '2%', y:'1%'},
{text:i+"年河道巡查",x: '40%', y: '1%'},
{text:i+"年上报结案率",x: '2%', y: '50%'},
],
yAxis: [
{
data:resultMap.data_startcase[i+'年上报类型'],
},
{ data:arrAddStr(resultMap.data_startcase[i+'年上报类型'],'结案数'),
}
],
series:series
},)
}
}
</script>
</body>
</html>参考表格：
http://echarts.baidu.com/demo.html#bar-stack
http://gallery.echartsjs.com/editor.html?c=xB1HF49Cjbhttp://gallery.echartsjs.com/editor.html?c=xB1N7IfL1Z
http://gallery.echartsjs.com/editor.html?c=xSkFFABj0e
http://gallery.echartsjs.com/editor.html?c=xHJDyokLHb
http://gallery.echartsjs.com/editor.html?c=xHkvdVRDlb
http://gallery.echartsjs.com/editor.html?c=xB1ESvRigz
效果：
上一篇： 修改input的默认样式
下一篇： 「NOIP2004」合并果子