(function() {
// 路径配置
require.config({
paths: {
echarts: '../../lib/echarts-2.2.7/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/pie'
],
function(ec) {
// 中间圆环
var radiusChart = ec.init(document.getElementById('radiusChart'));
//中间柱状图1
var topBarChart=ec.init(document.getElementById('topBarChart'));
//中间柱状图2
var bottomBarChart=ec.init(document.getElementById('bottomBarChart'));
// 左上饼图
var proClassChart=ec.init(document.getElementById('proClassChart'));
// 右上饼图
var proLevelChart=ec.init(document.getElementById('proLevelChart'));
//咨询单位十强柱状图
var advisoryCompanyChart=ec.init(document.getElementById('advisoryCompanyChart'));
// 混凝土企业十强柱状图
var concreteCompanyChart=ec.init(document.getElementById('concreteCompanyChart'));
// 材价趋势区域图
var priceTrendChart=ec.init(document.getElementById('priceTrendChart'));
//中间圆环
var radiusOption= {
color: ['#2bc6e5','#9cd2dc','#8eacb6','#369ce1','#76aad1','#b0d7dd','#57b8f9','#29b2d2','#8eacb6','#76aad1','#9cd2dc','#2bc6e5','#369ce1','#76aad1','#2890cd','#24a9c3','#b0d7dd','#76aad1','#2890cd'],
tooltip: {
showDelay:0,
transitionDuration:0,
trigger: 'item',
padding: 10,
textStyle:{fontSize:12},
formatter: function(params) {
return '造价数据' + '<br/>' + params.name + ':' + params.value + '元' + '<br/>' + '占 比:' + params.data.percent + '%';
}
},
// legend: {
// orient: 'vertical',
// x:15,
// y: 'center',
// itemGap: 7,
// padding:[0,0,40,0],
// textStyle: {
// color: '#bcbcbc',
// backgroundColor:'rgba(0,0,0,0)',
// fontSize: 12
// },
// data: ['监测', '车站主体','车站装饰', '出入口通道', '风道、风井', '车站附属设施', '其他']
// },
calculable: false,
series: [{
type: 'pie',
center: ['50%', '50%'],
radius: ['75%', '85%'],
itemStyle: {
normal: {
label: {
show: true
},
labelLine: { //牵引线
show: true,
length :5
}
},
emphasis: {
label: { //中间显示文字
show: false,
position: 'center',
textStyle: {
color: '#967adc',
fontSize: '16',
fontWeight: 'bold'
}
}
}
},
data: [{
value: 335,
percent: 25,
name: '人工'
}, {
value: 310,
percent: 34,
name: '水泥及制品'
}, {
value: 234,
percent: 4,
name: '黑色及有色金属'
},{
value: 325,
percent: 14,
name: '劳保用品'
}, {
value: 135,
percent: 6,
name: '劳保用品'
}, {
value: 1548,
percent: 9,
name: '五金'
}, {
value: 543,
percent: 8,
name: '周转材料'
}, {
value: 543,
percent: 6,
name: '轨道材料'
}, {
value: 543,
percent: 4,
name: '管材'
}, {
value: 543,
percent: 2,
name: '装饰石材'
}, {
value: 543,
percent: 2,
name: '化工产品'
}, {
value: 543,
percent: 2,
name: '绝热材料'
}, {
value: 543,
percent: 2,
name: '门窗楼梯'
}, {
value: 543,
percent: 3,
name: '陶瓷地砖'
}, {
value: 543,
percent: 3,
name: '天花墙板'
}, {
value: 543,
percent: 3,
name: '玻璃'
}, {
value: 543,
percent: 2,
name: '竹木'
}
]
}]
};
//中间柱状图1
var topBarOption = {
tooltip: {
trigger: 'item',
padding: 10,
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: '{a}<br/>{b}:{c}'
},
grid: {
x: 60,
x2: 20,
y: 28,
y2: 60,
borderWidth: '1',
borderColor:'#1c3a64'
},
xAxis: [{
type: 'category',
// name: '价格',
nameTextStyle: {
color: '#999'
},
splitLine: false,
axisLabel: {
textStyle: {
color: '#32b3dc'
},
rotate: 35 //文字旋转
},
axisTick: {
show:true,
lineStyle: {
width: 2,
color: '#496185'
}
},
axisLine: {
textStyle: {
color: '#457591'
},
lineStyle: {
width: 2,
color: '#496185'
}
},
data: ['广州造价站','造价通','数据公司','咨询公司','混凝土企业','交易中心','其他造价站']
}],
yAxis: [{
type: 'value',
// name: '工时',
nameTextStyle: {
color: '#999'
},
splitLine: {
lineStyle: {
color: ['#1c3a64'],
width: 1
}
},
splitArea:{ //背景区域
show:false
},
axisLine: {
lineStyle: {
width: 2,
color: '#457591'
}
},
axisLabel: {
textStyle: {
color: '#32b3dc'
}
},
axisTick: {
show: false
}
}],
series: [{
name: '来源分布',
type: 'bar',
itemStyle: {
normal: {
barBorderRadius: [8, 8, 0, 0],
barBorderColor: 'rgba(0,0,0,0)',
areaStyle: {
type: 'default'
},
color: function(params) {
var colorList = [ //柱子颜色
'#55dbf4','#4dd3f3','#42c8f3','#36bcf2','#29aff1','#20a6f1','#199ef0'
];
return colorList[params.dataIndex]
}
},
emphasis: { //鼠标悬停时
barBorderRadius: [8, 8, 0, 0]
}
},
barMaxWidth: 10,
data: [400,500,800,1500,2000,1800,1300]
}]
};
//中间柱状图2
var bottomBarOption = {
tooltip: {
trigger: 'item',
padding: 10,
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: '{a}<br/>{b}:{c}'
},
grid: {
x: 60,
x2: 20,
y: 28,
y2: 60,
borderWidth: '1',
borderColor:'#1c3a64'
},
xAxis: [{
type: 'category',
// name: '价格',
nameTextStyle: {
color: '#999'
},
splitLine: false,
axisLabel: {
textStyle: {
color: '#32b3dc'
},
rotate: 35 //文字旋转
},
axisTick: {
show:true,
lineStyle: {
width: 2,
color: '#496185'
}
},
axisLine: {
textStyle: {
color: '#457591'
},
lineStyle: {
width: 2,
color: '#496185'
}
},
data: ['信息价','参考价','供应商报价','招标控制价','中标价','合同价','投标价']
}],
yAxis: [{
type: 'value',
// name: '工时',
nameTextStyle: {
color: '#999'
},
splitLine: {
lineStyle: {
color: ['#1c3a64'],
width: 1
}
},
splitArea:{ //背景区域
show:false
},
axisLine: {
lineStyle: {
width: 2,
color: '#457591'
}
},
axisLabel: {
textStyle: {
color: '#32b3dc'
}
},
axisTick: {
show: false
}
}],
series: [{
name: '类型分布',
type: 'bar',
itemStyle: {
normal: {
barBorderRadius: [8, 8, 0, 0],
barBorderColor: 'rgba(0,0,0,0)',
areaStyle: {
type: 'default'
},
color: function(params) {
var colorList = [ //柱子颜色
'#55dbf4','#4dd3f3','#42c8f3','#36bcf2','#29aff1','#20a6f1','#199ef0'
];
return colorList[params.dataIndex]
}
},
emphasis: { //鼠标悬停时
barBorderRadius: [8, 8, 0, 0]
}
},
barMaxWidth: 10,
data: [400,500,800,1500,2000,1800,1300]
}]
};
//左上饼图(项目类别分布)
var proClassOption = {
title : {
// text: '材价来源占比分析',
x: 15,
y: 15,
textStyle:{
fontSize: '12',
fontWeight: 'normal',
color: '#666'
}
},
tooltip : {
trigger: 'item',
formatter:'{b}:{c}({d}%)'
// formatter:function(params){
// return params.name+'<br/>总条数 : '+params.data.totalNumber+'条 <br/>占比:'+ (params.percent - 0).toFixed(2)+'%';
// }
},
calculable : false,
color: ['#9cd2dc','#76aad1','#2890cd','#2bc6e5'],
series : [
{
name:'项目类别分布',
type:'pie',
// roseType: 'angle',
radius : '80%', //饼图大小
center: ['50%', '50%'],
itemStyle: {
normal: {
labelLine: { //牵引线
show: true
// length :15
}
},
emphasis: {
label: { //中间显示文字
show: false,
position: 'center',
textStyle: {
color: '#967adc',
fontSize: '16',
fontWeight: 'bold'
}
}
}
},
data:[
{name: '招标控制价备案',value: 25,totalNumber:250},
{name: '材评备案',value: 15,totalNumber:60},
{name: '投标中标备案',value: 30,totalNumber:300},
{name: '合同备案',value: 30,totalNumber:30}
]
}
]
};
//右上饼图(项目阶段占比)
var proLevelOption = {
title : {
// text: '材价来源占比分析',
x: 15,
y: 15,
textStyle:{
fontSize: '12',
fontWeight: 'normal',
color: '#666'
}
},
tooltip : {
trigger: 'item',
formatter:'{b}:{c}({d}%)'
// formatter:function(params){
// return params.name+'<br/>总条数 : '+params.data.totalNumber+'条 <br/>占比:'+ (params.percent - 0).toFixed(2)+'%';
// }
},
calculable : false,
color: ['#9cd2dc','#8eacb6','#369ce1','#76aad1','#b0d7dd','#57b8f9','#29b2d2','#2890cd','#2bc6e5'],
series : [
{
name:'项目阶段占比',
type:'pie',
// roseType: 'angle',
radius : '80%', //饼图大小
center: ['50%', '50%'],
itemStyle: {
normal: {
labelLine: { //牵引线
show: true
// length :15
}
},
emphasis: {
label: { //中间显示文字
show: false,
position: 'center',
textStyle: {
color: '#967adc',
fontSize: '16',
fontWeight: 'bold'
}
}
}
},
data:[
{name: '投标价',value: 25,totalNumber:250},
{name: '合同',value: 15,totalNumber:60},
{name: '结算',value: 30,totalNumber:300},
{name: '招标控制',value: 30,totalNumber:30},
{name: '结算',value: 12,totalNumber:30},
{name: '预算',value: 10,totalNumber:30},
{name: '概算',value: 20,totalNumber:30},
{name: '估算',value: 10,totalNumber:30},
{name: '中标价',value: 30,totalNumber:30}
]
}
]
};
//右中柱状图(咨询单位十强)
var advisoryCompanyOption = {
title : {
// text: '世界人口总量',
textStyle: {
fontSize: '14',
fontWeight: 'normal',
color: '#333'
}
},
tooltip : {
trigger: 'item'
},
grid: {
x: 75,
x2: 20,
y: 5,
y2: 5,
borderWidth: '0'
// borderColor:'#E0EBFF'
},
calculable : true,
xAxis : [
{
type : 'value',
splitLine:false,
axisLine: {
show:false,
lineStyle: {
width: 1,
color: '#999'
}
},
axisTick: {
show:false,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
show:false,
textStyle: {
color: '#999'
}
},
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
splitLine:false,
axisTick:false,
axisLine: {
show:false,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
interval:0, //y轴信息全部显示
textStyle: {
color: '#fff'
}
},
data : ['尚顶咨询','尚顶咨询','广州堂询','联云众咨','广州堂询','广州伯龙','尚顶咨询','自由人咨询','金誉咨询','珠江众申']
}
],
series : [
{
name:'咨询单位',
type:'bar',
barWidth:8,
itemStyle: {
normal: {
barBorderRadius: [8, 8, 8, 8],
barBorderColor: 'rgba(0,0,0,0)',
areaStyle: {
type: 'default'
},
color: function(params) {
var colorList = [ //柱子颜色
'#189df0','#1da2f0','#23a8f1','#2aaff1','#32b7f2','#3ac0f2','#43c8f3','#4ad0f3','#50D6F4','#55dbf4'
];
return colorList[params.dataIndex]
}
//每两个柱子的颜色为一组,循环
// color: function(params) {
// var colorItem = ['#B5C334','#C1232B'];
// var currentItem=0;
// var colorList=[];
// for(var i=0;i<params.series.data.length;i++){
// colorList.push(colorItem[currentItem]);
// if(currentItem==0){
// currentItem=1;
// }
// else {
// currentItem=0;
// }
// }
// return colorList[params.dataIndex]
// }
},
emphasis: { //鼠标悬停时
barBorderRadius: [8, 8, 8, 8]
}
},
data:[300, 500, 400, 800, 1000, 500,400, 800, 1000,1500]
}
]
};
//右下柱状图(混凝土企业十强)
var concreteCompanyOption = {
title : {
// text: '世界人口总量',
textStyle: {
fontSize: '14',
fontWeight: 'normal',
color: '#333'
}
},
tooltip : {
trigger: 'item'
},
grid: {
x: 75,
x2: 20,
y: 5,
y2: 5,
borderWidth: '0'
// borderColor:'#E0EBFF'
},
calculable : true,
xAxis : [
{
type : 'value',
splitLine:false,
axisLine: {
show:false,
lineStyle: {
width: 1,
color: '#999'
}
},
axisTick: {
show:false,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
show:false,
textStyle: {
color: '#999'
}
},
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
splitLine:false,
axisTick:false,
axisLine: {
show:false,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
interval:0, //y轴信息全部显示
textStyle: {
color: '#fff'
}
},
data : ['尚顶咨询','尚顶咨询','广州堂询','联云众咨','广州堂询','广州伯龙','尚顶咨询','自由人咨询','金誉咨询','珠江众申']
}
],
series : [
{
name:'混凝土企业',
type:'bar',
barWidth:8,
itemStyle: {
normal: {
barBorderRadius: [8, 8, 8, 8],
barBorderColor: 'rgba(0,0,0,0)',
areaStyle: {
type: 'default'
},
color: function(params) {
var colorList = [ //柱子颜色
'#189df0','#1da2f0','#23a8f1','#2aaff1','#32b7f2','#3ac0f2','#43c8f3','#4ad0f3','#50D6F4','#55dbf4'
];
return colorList[params.dataIndex]
}
},
emphasis: { //鼠标悬停时
barBorderRadius: [8, 8, 8, 8]
}
},
data:[300, 500, 400, 800, 1000, 500,400, 800, 1000,1500]
}
]
};
//左边材价趋势区域图
var priceTrendOption = {
title: {
show:false,
// subtext: '用户量',
x: 10,
y: 10,
textStyle: {
fontSize: '12',
fontWeight: 'normal',
color: '#999'
}
},
tooltip: {
trigger: 'item', //设置初始化时显示hover数据必须设为item
padding: 10,
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'line' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ['材价趋势'],
x: 'center',
y: '410',
itemGap: 15,
itemHeight: 19,
itemWidth: 30,
textStyle: {
color: '#fff',
fontSize: 14
}
},
grid: {
x:50,
x2:20,
y:30,
y2:25,
borderWidth:'1',
borderColor: '#496185'
},
calculable: true,
xAxis: [{
type: 'category',
show: true,
splitLine: false,
axisLine: {
lineStyle: {
width: 2,
color: '#457591'
}
},
axisLabel: {
textStyle: {
align: 'center',
color: '#fff'
}
},
axisTick: {
show: true, //刻度
lineStyle: {
color: '#457591'
}
},
boundaryGap: false,
data: function () {
var list = [];
for(var i = 1;i<=7;i++){
list.push('201'+i);
}
return list;
}()
}],
yAxis: [{
// name: '注册用户量',
nameTextStyle:{
color: '#999'
},
type: 'value',
show: true,
splitLine: {
lineStyle: {
color: ['#1b385e'],
width: 1
}
},
axisLine: {
lineStyle: {
width: 2,
color: '#457591'
}
},
// splitArea:true,
// areaStyle: {
// color: [
// 'rgba(250,250,250,0.3)',
// 'rgba(200,200,200,0.3)',
// 'rgba(200,200,200,0.3)'
// ]
// },
axisLabel: {
textStyle: {
color: '#fff'
}
}
}
],
series: [{
name: '材价趋势',
type: 'line',
scale: true,
symbol: 'emptyCircle',
symbolSize: [3, 3],
smooth: true,
// yAxisIndex:1, /*设置双Y轴时需要设置*/
itemStyle: { //区域颜色填充
normal: {
lineStyle: {
// width: 1,
color: '#fff'
},
areaStyle: {
type: 'default'
},
color: '#31a5d4'
}
},
data: [4634, 3034, 4634, 2809, 3947,3034, 4634]
}
]
};
// 为echarts对象加载数据
radiusChart.setOption(radiusOption);
topBarChart.setOption(topBarOption);
bottomBarChart.setOption(bottomBarOption);
proClassChart.setOption(proClassOption);
proLevelChart.setOption(proLevelOption);
advisoryCompanyChart.setOption(advisoryCompanyOption);
concreteCompanyChart.setOption(concreteCompanyOption);
priceTrendChart.setOption(priceTrendOption);
//初始化时显示tip内容
// radiusChart.component.tooltip.showTip({seriesIndex: 0, name:'人工'});
topBarChart.component.tooltip.showTip({seriesIndex: 0, dataIndex:0});
bottomBarChart.component.tooltip.showTip({seriesIndex: 0, dataIndex:0});
proClassChart.component.tooltip.showTip({ seriesIndex: 0, name:'合同备案'});
proLevelChart.component.tooltip.showTip({ seriesIndex: 0, name:'中标价'});
advisoryCompanyChart.component.tooltip.showTip({ seriesIndex: 0, dataIndex:9 });
concreteCompanyChart.component.tooltip.showTip({ seriesIndex: 0, dataIndex:9 });
priceTrendChart.component.tooltip.showTip({ seriesIndex: 0, dataIndex:0 });
// 自适应echarts
setTimeout(function() {
$(window).resize(function() {
// distrLevelChart.resize();
radiusChart.resize();
topBarChart.resize();
bottomBarChart.resize();
proClassChart.resize();
proLevelChart.resize();
advisoryCompanyChart.resize();
concreteCompanyChart.resize();
priceTrendChart.resize();
});
}, 200);
}
);
//加载数字滚动
$('.scroll-number').countUp({
time: 1000
});
})();
附图: