$(window).load(function(){$(".loading").fadeOut()}) $(function () { echarts_2() echarts_3() echarts_4() echarts_5() echarts_6() function echarts_2() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echart2')); var data = [683, 234, 234, 523, 345, 320, 280, 271, 254, 229, 210, 190, 182] var titlename = ['北京', '上海', '广州', '郑州', '武汉', '南京', '杭州', '东莞', '深圳', '虎门', '青岛', '石家庄', '安阳']; option = { grid: { left: '0', top:'0', right: '0', bottom: '0%', containLabel: true }, xAxis: { show: false }, yAxis: [{ show: true, data: titlename, inverse: true, axisLine: { show: false}, splitLine:{ show: false}, axisTick:{ show: false}, axisLabel: { textStyle: { color:'#fff' }, }, }, { show: false, inverse: true, data: data, axisLabel: {textStyle: {color: '#fff'}}, axisLine: { show: false}, splitLine:{ show: false}, axisTick: { show: false}, }], series: [{ name: '条', type: 'bar', yAxisIndex: 0, data: data, barWidth: 15, itemStyle: { normal: { barBorderRadius: 50, color:'#1089E7', } }, label: { normal: { show: true, position: 'right', formatter: '{c}', textStyle: {color: 'rgba(255,255,255,.5)'} } }, }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } function echarts_3() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echart3')); option = { tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#dddc6b' } } }, grid: { left: '10', top: '20', right: '30', bottom: '10', containLabel: true }, xAxis: [{ type: 'category', boundaryGap: false, axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize:14, }, }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.2)' } }, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, { axisPointer: {show: false}, axisLine: { show: false}, position: 'bottom', offset: 20, }], yAxis: [{ type: 'value', axisTick: {show: false}, splitNumber: 4, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }, axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize:16, }, }, splitLine: { lineStyle: { color: 'rgba(255,255,255,.1)', type: 'dotted', } } }], series: [ { name: '结算率', type: 'line', smooth: true, symbol: 'circle', symbolSize: 5, showSymbol: false, lineStyle: { normal: { color: 'rgba(31, 174, 234, 1)', width: 2 } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(31, 174, 234, 0.4)' }, { offset: 0.8, color: 'rgba(31, 174, 234, 0.1)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', } }, itemStyle: { normal: { color: '#1f7eea', borderColor: 'rgba(31, 174, 234, .1)', borderWidth: 5 } }, data: [3, 6, 3, 6, 3, 9, 3,12, 6, 8, 3, 5, 9, 3] }, ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } function echarts_4() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echart4')); var option = { grid: { left: '0', top: '30', right: '0', bottom: '10', containLabel: true }, legend: { top: 0, textStyle: { color: "#fff", }, itemWidth: 10, // 设置宽度 itemHeight: 10, // 设置高度 }, tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, xAxis: { type: 'category', data: ["西进口右转","北进口直行","南进口直行",], axisTick: { //---坐标轴 刻度 show: true, //---是否显示 }, axisLine: { //---坐标轴 轴线 show: true, //---是否显示 lineStyle: { color: 'rgba(255,255,255,.1)', width: 1, type: 'dotted', }, }, axisLabel: {//X轴文字 textStyle: { fontSize: 12, color: '#fff' }, }, }, yAxis: { type: 'value', splitLine: {//分割线 show: true, lineStyle: { color: 'rgba(255,255,255,.1)', width: 1, type: 'dotted' } }, axisLabel: {//Y轴刻度值 formatter: '{value}', textStyle: { fontSize: 12, color: '#fff' }, }, axisLine: { //---坐标轴 轴线 show: false, //---是否显示 }, }, series: [{ name: '原方案', type: 'bar', data: [3, 7,4], barWidth: 15, barGap: 1, //柱子之间间距 //柱图宽度 两种情况都要设置，设置series 中对应数据柱形的itemStyle属性下的emphasis和normal的barBorderRadius属性初始化时候圆角 鼠标移上去圆角 itemStyle: { normal: { barBorderRadius: 50, color: "#446ACF", } }, }, { name: '建议方案', type: 'bar', data: [6, 2,5], barWidth: 15, //柱图宽度 itemStyle: { normal: { //设置颜色的渐变 barBorderRadius: 50, color: "#4fb69d", } }, }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } function echarts_5() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echart5')); option = { legend: { orient: 'vertical', itemWidth: 10, itemHeight: 10, textStyle:{ color:'rgba(255,255,255,.5)' }, top:'20%', right:30, data:['已入驻','已出售','已租赁','闲置房产'] }, color: ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'], tooltip : { trigger: 'item', formatter: "{b} : {c} ({d}%)" }, calculable : true, series : [ { type:'pie', radius : [20, 70], center: ["35%", "50%"], roseType : 'area', data:[ {value:300, name:'已入驻'}, {value:200, name:'已出售'}, {value:205, name:'已租赁'}, {value:180, name:'闲置房产'}, ], label: { normal: { formatter: function(param) { return param.name +':\n' + param.value +'\n'; } } }, labelLine: { normal: { length:5, length2:15, lineStyle: { width: 1} } }, itemStyle: { normal: { shadowBlur: 30, shadowColor: 'rgba(0, 0, 0, 0.4)' } }, } ] }; myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } function echarts_6() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echart6')); option = { tooltip: { trigger: 'axis' }, radar: [{ indicator: [{ text: '盈利能力', max: 100 }, { text: '发展水平', max: 100 }, { text: '融资能力', max: 100 }, { text: '技术能力', max: 100 }, { text: '企业规模', max: 100 }], textStyle: { color: 'red' }, center: ['50%', '50%'], radius: '70%', startAngle: 90, splitNumber: 4, shape: 'circle', name: { padding:-5, formatter: '{value}', textStyle: { color: 'rgba(255,255,255,.5)' } }, splitArea: { areaStyle: { color: 'rgba(255,255,255,.05)' } }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.05)' } }, splitLine: { lineStyle: { color: 'rgba(255,255,255,.05)' } } }, ], series: [{ name: '雷达图', type: 'radar', tooltip: { trigger: 'item' }, data: [{ name: '园区平均值', value: [90, 80, 20, 10, 30], lineStyle: { normal: { color:'#03b48e', width:2, } }, areaStyle: { normal: { color: '#03b48e', opacity:.4 } }, symbolSize: 0, }, { name: '当前园区', value: [30, 20, 75, 80, 70], symbolSize: 0, lineStyle: { normal: { color:'#3893e5', width:2, } }, areaStyle: { normal: { color: 'rgba(19, 173, 255, 0.5)' } } }] }, ] }; myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } })