图表"/>
echart图表
(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 }); })();附图:
更多推荐
echart图表
发布评论