layui.use(['element', 'form', 'tree', 'util', 'laydate'], function () { var $ = layui.jquery, form = layui.form, laydate = layui.laydate, tree = layui.tree, layer = layui.layer, util = layui.util, element = layui.element, data1 = [ { title: '地区生产总值', id: 1, children: [{ title: '第一产业', id: 1000, type: 101, clickType: 1, color1: '#9BCE4A', color2: '#ffb43e' }, { title: '第二产业', id: 1001, type: 102, clickType: 1, color1: '#29B6F6', color2: '#5efff5' }, { title: '第三产业', id: 1002, type: 103, clickType: 1, color1: '#34D3EB', color2: '#9cdc7e' }] }, { title: '规模以上工业增加值增速', id: 2, color1: '#9BCE4A', }, { title: '建筑业总产值', id: 3, color1: '#29B6F6', }, { title: '商品房建设与销售', id: 4, color1: '#34D3EB', }, { title: '社会消费品零售总额总额', id: 5, color1: '#9BCE4A', }, // { // title: '批发业销售额', // id: 5, // type: 201, // color1: '#9BCE4A' // }, // { // title: '零售业销售额', // id: 6, // type: 202, // color1: '#29B6F6', // }, // { // title: '住宿业销售额', // id: 7, // type: 203, // color1: '#34D3EB' // }, // { // title: '餐饮业销售额', // id: 8, // type: 204, // color1: '#0090f4', // }, { title: '地方财政收支', id: 8, children: [{ title: '公共财政收入', id: 6000, type: 301, clickType: 3, color1: '#9BCE4A', color2: '#ffb43e' }, { title: ' 税收收入', id: 6001, type: 302, clickType: 3, color1: '#29B6F6', color2: '#5efff5' }, { title: '公共财政支出', id: 6002, type: 303, clickType: 3, color1: '#34D3EB', color2: '#9cdc7e' }] }, // { // title: '金融机构存贷款', // id: 9, // children: [{ // title: '金融机构人民币存款余额', // id: 7000, // clickType: 4, // type: 401, // color1: '#29B6F6', // color2: '#ffb43e' // }, { // title: '金融机构人民币贷款余额', // id: 7001, // clickType: 4, // type: 402, // color1: '#34D3EB', // color2: '#5efff5' // }] // } ]; // if (isMobileUserAgent()){ // window.location = 'enterStatisMain_mobile.html' // } laydate.render({ elem: '#test6', range: ['#test-startDate', '#test-endDate'] }); element.on('tab(test1)', function (e) { var cur = this.getAttribute('lay-id'); var myChart = echarts.init(document.getElementById(cur)); var option = myChart.getOption(); myChart.clear(); myChart.setOption(option, true); }); document.getElementById("mainCenter").removeAttribute("_echarts_instance_"); var myChart = echarts.init(document.getElementById('mainCenter')); getAllIndustry(data1, myChart); tree.render({ elem: '#test13', data: data1, showLine: false, //是否开启连接线 click: function (obj) { myChart.innerHTML = ""; $('.tableMain').empty(); $('.tableTit').empty(); if (obj.data.title == '地区生产总值') { getAllIndustry(data1, myChart) } if (obj.data.title == '规模以上工业增加值增速') { getAllScale(obj, myChart) } if (obj.data.title == '建筑业总产值') { getAllConstruction(obj, myChart) } if (obj.data.title == '商品房销售面积') { getAllMarket(obj, myChart) } if (obj.data.title == '社会消费品零售总额总额') { getinlandTradeL(obj, myChart); } // if (obj.data.title == '批发业销售额') { // getinlandTrade(obj, myChart); // } // if (obj.data.title == '零售业销售额') { // getinlandTrade(obj, myChart); // } // if (obj.data.title == '住宿业销售额') { // getinlandTrade(obj, myChart); // } // if (obj.data.title == '餐饮业销售额') { // getinlandTrade(obj, myChart); // } if (obj.data.title == '地方财政收支') { getAllFinancial(data1, myChart) } if (obj.data.title == '金融机构存贷款') { getAllFinan(data1, myChart) } if (obj.data.clickType == 1) { getIndustryByType(obj, myChart); } if (obj.data.clickType == 2) { getinlandTrade(obj, myChart); } if (obj.data.clickType == 3) { getFinancial(obj, myChart); } if (obj.data.clickType == 4) { getBank(obj, myChart) } } }); // if (isMobileUserAgent()){ // window.location = 'xq_model.html' // } }); function isMobileUserAgent() { return /iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test( window.navigator.userAgent.toLowerCase("") ); } function getAllMarket(obj, myChart) { var str, listdataa; getData('./json/realtyMarket.json').then(data => { var list = data.market; var array = []; var xdata = []; for (var i = 0; i < list.length; i++) { var subData = list[i].totalNum; if (subData.length == 1) { xdata.push(list[i].date + '年1季度'); array.push(...subData); } else { xdata.push(list[i].date + '年1季度'); xdata.push(list[i].date + '年1-2季度'); xdata.push(list[i].date + '年1-3季度'); xdata.push(list[i].date + '年1-4季度'); array.push(...subData); } } var chat = [{ 'name': obj.data.title, 'data': array, 'color1': obj.data.color1, 'color2': obj.data.color2, 'xdata': xdata }] option = getLine(chat, '万平方米'); myChart.setOption(option, true); var tabletit = list[0].name; str = '' + tabletit + ''; listdataa += '' listdataa += '值' for (var j = 0; j < array.length; j++) { listdataa += '' + array[j] + '万平方米' + ''; } listdataa += '' for (var j = 0; j < list.length; j++) { for (var k = 0; k < list[j].totalNum.length; k++) { let a = NoToChinese(Number(k) + 1) str += '' + list[j].date + '第一至' + a + '季度' } } $('.tableTit').append(str); $('.tableMain').append(listdataa); }) } function getinlandTradeL(obj, myChart) { var str, listdataa; getData('./json/inlandTrade.json').then(data => { var list = data.trade; var array = []; var xdata = []; for (var i = 0; i < list.length; i++) { var subData = list[i].totalNum; if (subData.length == 1) { xdata.push(list[i].date + '年1季度'); array.push(...subData); } else { xdata.push(list[i].date + '年1季度'); xdata.push(list[i].date + '年1-2季度'); xdata.push(list[i].date + '年1-3季度'); xdata.push(list[i].date + '年1-4季度'); array.push(...subData); } } var chat = [{ 'name': obj.data.title, 'data': array, 'color1': obj.data.color1, 'color2': obj.data.color2, 'xdata': xdata }] option = getLine(chat, '万元'); myChart.setOption(option, true); var tabletit = list[0].name; str = '' + tabletit + ''; listdataa += '' listdataa += '值' for (var j = 0; j < array.length; j++) { listdataa += '' + array[j] + '万元' + ''; } listdataa += '' for (var j = 0; j < list.length; j++) { for (var k = 0; k < list[j].totalNum.length; k++) { let a = NoToChinese(Number(k) + 1) str += '' + list[j].date + '第一至' + a + '季度' } } $('.tableTit').append(str); $('.tableMain').append(listdataa); }) } function getAllConstruction(obj, myChart) { var str, listdataa; getData('./json/construction.json').then(data => { var list = data.construction; var array = []; var xdata = []; for (var i = 0; i < list.length; i++) { var subData = list[i].totalNum; if (subData.length == 1) { xdata.push(list[i].date + '年1季度'); array.push(...subData); } else { xdata.push(list[i].date + '年1季度'); xdata.push(list[i].date + '年1-2季度'); xdata.push(list[i].date + '年1-3季度'); xdata.push(list[i].date + '年1-4季度'); array.push(...subData); } } var chat = [{ 'name': obj.data.title, 'data': array, 'color1': obj.data.color1, 'color2': obj.data.color2, 'xdata': xdata }] option = getLine(chat, '万元'); myChart.setOption(option, true); var tabletit = list[0].name; str = '' + tabletit + ''; listdataa += '' listdataa += '值' for (var j = 0; j < array.length; j++) { listdataa += '' + array[j] + '万元' + ''; } listdataa += '' for (var j = 0; j < list.length; j++) { for (var k = 0; k < list[j].totalNum.length; k++) { let a = NoToChinese(Number(k) + 1) str += '' + list[j].date + '第一至' + a + '季度' } } $('.tableTit').append(str); $('.tableMain').append(listdataa); }) } function getAllScale(obj, myChart) { var str, listdataa; getData('./json/scale.json').then(data => { var list = data.scale; var array = []; var xdata = []; for (var i = 0; i < list.length; i++) { var subData = list[i].growth; if (subData.length == 1) { xdata.push(list[i].date + '年1季度'); array.push(...subData); } else { xdata.push(list[i].date + '年1季度'); xdata.push(list[i].date + '年1-2季度'); xdata.push(list[i].date + '年1-3季度'); xdata.push(list[i].date + '年1-4季度'); array.push(...subData); } } var chat = [{ 'name': obj.title, 'data': array, 'color1': obj.color1, 'color2': obj.color2, 'xdata': xdata }] option = getLinel(chat, '%'); myChart.setOption(option, true); var tabletit = list[0].name; str = '' + tabletit + ''; listdataa += '' listdataa += '增速' for (var j = 0; j < array.length; j++) { listdataa += '' + array[j] + '%' + ''; } listdataa += '' for (var j = 0; j < list.length; j++) { for (var k = 0; k < list[j].growth.length; k++) { let a = NoToChinese(Number(k) + 1) str += '' + list[j].date + '第一至' + a + '季度' } } $('.tableTit').append(str); $('.tableMain').append(listdataa); }) } function getAllIndustry(data1, myChart) { var str = ''; var listdataa = ''; getData('./json/jdp.json').then(data => { var children = data1[0].children; var array = []; if (children) { for (var i = 0; i < children.length; i++) { array.push(getIndustryByTypeAll(data.GDP, children[i])); } } option = getLine(array, '万元'); // myChart.setOption(option, true); var tabletit = data.GDP[0].name; str = '' + tabletit + ''; for (var j = 0; j < array.length; j++) { listdataa += '' listdataa += '' + array[j].name + '' for (var k = 0; k < array[j].data.length; k++) { listdataa += '' + array[j].data[k] + '万元' + ''; } listdataa += '' } for (var j = 0; j < data.GDP.length; j++) { for (var k = 0; k < data.GDP[j].totalNum.length; k++) { let a = NoToChinese(Number(k) + 1) str += '' + data.GDP[j].date + '第一至' + a + '季度' } } $('.tableTit').append(str); $('.tableMain').append(listdataa); }) } function getAllwholeScale(data1, myChart) { var str = ''; var listdataa = ''; getData('./json/inlandTrade.json').then(data => { var children = data1[4].children; var array = []; for (var i = 0; i < children.length; i++) { array.push(getScaleByTypeAll(data.trade, children[i])); } option = getLine(array, '万元'); myChart.setOption(option, true); var tabletit = data.trade[0].name; str = '' + tabletit + ''; for (var j = 0; j < array.length; j++) { listdataa += '' listdataa += '' + array[j].name + '' for (var k = 0; k < array[j].data.length; k++) { listdataa += '' + array[j].data[k] + '万元' + ''; } listdataa += '' } for (var j = 0; j < data.trade.length; j++) { for (var k = 0; k < data.trade[j].totalNum.length; k++) { let a = NoToChinese(Number(k) + 1) str += '' + data.trade[j].date + '第一至' + a + '季度' } } $('.tableTit').append(str); $('.tableMain').append(listdataa); }) } function getAllFinancial(data1, myChart) { var str, listdataa; getData('./json/financial.json').then(data => { var children = data1[8].children; var array = []; for (var i = 0; i < children.length; i++) { array.push(getScaleByTypeAll(data.financial, children[i])); } option = getLine(array, '万元'); myChart.setOption(option, true); var tabletit = data.financial[0].name; str = '' + tabletit + ''; for (var j = 0; j < array.length; j++) { listdataa += '' listdataa += '' + array[j].name + '' for (var k = 0; k < array[j].data.length; k++) { listdataa += '' + array[j].data[k] + '万元' + ''; } listdataa += '' } for (var j = 0; j < data.financial.length; j++) { for (var k = 0; k < data.financial[j].totalNum.length; k++) { let a = NoToChinese(Number(k) + 1) str += '' + data.financial[j].date + '第一至' + a + '季度' } } // for (var j = 0; j < data.financial.length; j++) { // if (data.financial[j].subData[0].data.firstThridQuarter) { // for (var k = 0; k < 4; k++) { // let a = NoToChinese(Number(k) + 1) // str += '' + data.financial[j].date + '第一至' + a + '季度' // } // } else { // str += '' + data.financial[j].date + '第一至一季度' // } // } $('.tableTit').append(str); $('.tableMain').append(listdataa); }) } function getAllFinan(data1, myChart) { var str, listdataa; getData('./json/bank.json').then(data => { var children = data1[9].children; var array = []; for (var i = 0; i < children.length; i++) { array.push(getScaleByTypeAll(data.finance, children[i])); } option = getLine(array, '亿元'); myChart.setOption(option, true); var tabletit = data.finance[0].name; str = '' + tabletit + ''; for (var j = 0; j < array.length; j++) { listdataa += '' listdataa += '' + array[j].name + '' for (var k = 0; k < array[j].data.length; k++) { listdataa += '' + array[j].data[k] + '亿元' + ''; } listdataa += '' } for (var j = 0; j < data.finance.length; j++) { var len = Object.keys(data.finance[j].subData[0].data).length; for (var k = 0; k < len; k++) { let a = NoToChinese(Number(k) + 1) str += '' + data.finance[j].date + '第一至' + a + '季度' } } $('.tableTit').append(str); $('.tableMain').append(listdataa); }) } function getinlandTrade(obj, myChart) { var str, listdataa; getData('./json/inlandTrade.json').then(data => { var list = data.trade; var array = []; var xdata = []; var xname = ''; for (var i = 0; i < list.length; i++) { var subData = list[i].subData; if (subData[2].data.firstFourQuarter) { xdata.push(list[i].date + '年1季度'); xdata.push(list[i].date + '年1-2季度'); xdata.push(list[i].date + '年1-3季度'); xdata.push(list[i].date + '年1-4季度'); } else { xdata.push(list[i].date + '年1季度'); } for (var j = 0; j < subData.length; j++) { if (obj.data.type == subData[j].type) { xname = subData[j].subName var ndata = subData[j].data; array.push(ndata.firstQuarter.totalQuarter ? ndata.firstQuarter.totalQuarter : 0); if (ndata.firstSecondQuarter) { array.push(ndata.firstSecondQuarter.totalQuarter ? ndata.firstSecondQuarter.totalQuarter : 0); } if (ndata.firstThridQuarter) { array.push(ndata.firstThridQuarter.totalQuarter ? ndata.firstThridQuarter.totalQuarter : 0); } if (ndata.firstFourQuarter) { array.push(ndata.firstFourQuarter.totalQuarter ? ndata.firstFourQuarter.totalQuarter : 0); } } } } var chat = [{ 'name': obj.data.title, 'data': array, 'color1': obj.data.color1, 'color2': obj.data.color2, 'xdata': xdata }] option = getLine(chat, '万元'); myChart.setOption(option, true); var tabletit = xname; str = '' + tabletit + ''; listdataa += '' listdataa += '值' for (var j = 0; j < array.length; j++) { listdataa += '' + array[j] + '万元' + ''; } listdataa += '' for (var j = 0; j < list.length; j++) { for (var k = 0; k < list[j].totalNum.length; k++) { let a = NoToChinese(Number(k) + 1) str += '' + list[j].date + '第一至' + a + '季度' } } $('.tableTit').append(str); $('.tableMain').append(listdataa); }) } function getFinancial(obj, myChart) { var str, listdataa; getData('./json/financial.json').then(data => { var list = data.financial; var array = []; var xdata = []; var xname = ''; for (var i = 0; i < list.length; i++) { var subData = list[i].subData; if (subData[2].data.firstFourQuarter) { xdata.push(list[i].date + '年1季度'); xdata.push(list[i].date + '年1-2季度'); xdata.push(list[i].date + '年1-3季度'); xdata.push(list[i].date + '年1-4季度'); } else { xdata.push(list[i].date + '年1季度'); } for (var j = 0; j < subData.length; j++) { if (obj.data.type == subData[j].type) { xname = subData[j].subName var ndata = subData[j].data; array.push(ndata.firstQuarter.totalQuarter ? ndata.firstQuarter.totalQuarter : 0); if (ndata.firstSecondQuarter) { array.push(ndata.firstSecondQuarter.totalQuarter ? ndata.firstSecondQuarter.totalQuarter : 0); } if (ndata.firstThridQuarter) { array.push(ndata.firstThridQuarter.totalQuarter ? ndata.firstThridQuarter.totalQuarter : 0); } if (ndata.firstFourQuarter) { array.push(ndata.firstFourQuarter.totalQuarter ? ndata.firstFourQuarter.totalQuarter : 0); } } } } var chat = [{ 'name': obj.data.title, 'data': array, 'color1': obj.data.color1, 'color2': obj.data.color2, 'xdata': xdata }] option = getLine(chat, '万元'); myChart.setOption(option, true); var tabletit = xname; str = '' + tabletit + ''; listdataa += '' listdataa += '值' for (var j = 0; j < array.length; j++) { listdataa += '' + array[j] + '万元' + ''; } listdataa += '' for (var j = 0; j < list.length; j++) { if (list[j].subData[0].data.firstFourQuarter) { for (var k = 0; k < 4; k++) { let a = NoToChinese(Number(k) + 1) str += '' + list[j].date + '第一至' + a + '季度' } } else { str += '' + list[j].date + '第一至一季度' } } $('.tableTit').append(str); $('.tableMain').append(listdataa); }) } function getBank(obj, myChart) { var str, listdataa; getData('./json/bank.json').then(data => { var list = data.finance; var array = []; var xdata = []; var xname = ''; for (var i = 0; i < list.length; i++) { var subData = list[i].subData; if (subData[1].data.firstFourQuarter) { xdata.push(list[i].date + '年1季度'); xdata.push(list[i].date + '年1-2季度'); xdata.push(list[i].date + '年1-3季度'); xdata.push(list[i].date + '年1-4季度'); } else { xdata.push(list[i].date + '年1季度'); } for (var j = 0; j < subData.length; j++) { if (obj.data.type == subData[j].type) { xname = subData[j].subName var ndata = subData[j].data; array.push(ndata.firstQuarter.totalQuarter ? ndata.firstQuarter.totalQuarter : 0); if (ndata.firstSecondQuarter) { array.push(ndata.firstSecondQuarter.totalQuarter ? ndata.firstSecondQuarter.totalQuarter : 0); } if (ndata.firstThridQuarter) { array.push(ndata.firstThridQuarter.totalQuarter ? ndata.firstThridQuarter.totalQuarter : 0); } if (ndata.firstFourQuarter) { array.push(ndata.firstFourQuarter.totalQuarter ? ndata.firstFourQuarter.totalQuarter : 0); } } } } var chat = [{ 'name': obj.data.title, 'data': array, 'color1': obj.data.color1, 'color2': obj.data.color2, 'xdata': xdata }] option = getLine(chat, '亿元'); myChart.setOption(option, true); var tabletit = xname; str = '' + tabletit + ''; listdataa += '' listdataa += '值' for (var j = 0; j < array.length; j++) { listdataa += '' + array[j] + '亿元' + ''; } listdataa += '' for (var j = 0; j < list.length; j++) { if (list[j].subData[0].data.firstSecondQuarter) { for (var k = 0; k < 4; k++) { let a = NoToChinese(Number(k) + 1) str += '' + list[j].date + '第一至' + a + '季度' } } else { str += '' + list[j].date + '第一至一季度' } } $('.tableTit').append(str); $('.tableMain').append(listdataa); }) } function getIndustryByType(obj, myChart) { var str, listdataa; getData('./json/jdp.json').then(data => { var list = data.GDP; var array = []; var xdata = []; var xname = '' for (var i = 0; i < list.length; i++) { var subData = list[i].subData; if (subData[2].data.firstFourQuarter) { xdata.push(list[i].date + '年1季度'); xdata.push(list[i].date + '年1-2季度'); xdata.push(list[i].date + '年1-3季度'); xdata.push(list[i].date + '年1-4季度'); } else { xdata.push(list[i].date + '年1季度'); } for (var j = 0; j < subData.length; j++) { if (obj.data.type == subData[j].type) { xname = subData[j].subName var ndata = subData[j].data; array.push(ndata.firstQuarter.totalQuarter ? ndata.firstQuarter.totalQuarter : 0); if (ndata.firstSecondQuarter) { array.push(ndata.firstSecondQuarter.totalQuarter ? ndata.firstSecondQuarter.totalQuarter : 0); } if (ndata.firstThridQuarter) { array.push(ndata.firstThridQuarter.totalQuarter ? ndata.firstThridQuarter.totalQuarter : 0); } if (ndata.firstFourQuarter) { array.push(ndata.firstFourQuarter.totalQuarter ? ndata.firstFourQuarter.totalQuarter : 0); } } } } var chat = [{ 'name': obj.data.title, 'data': array, 'color1': obj.data.color1, 'color2': obj.data.color2, 'xdata': xdata }] option = getLine(chat, '万元'); myChart.setOption(option, true); var tabletit = xname; str = '' + tabletit + ''; listdataa += '' listdataa += '值' for (var j = 0; j < array.length; j++) { listdataa += '' + array[j] + '万元' + ''; } listdataa += '' for (var j = 0; j < list.length; j++) { for (var k = 0; k < list[j].totalNum.length; k++) { let a = NoToChinese(Number(k) + 1) str += '' + list[j].date + '第一至' + a + '季度' } } $('.tableTit').append(str); $('.tableMain').append(listdataa); }) } function getIndustryByTypeAll(list, obj) { var array = []; var xdata = []; for (var i = 0; i < list.length; i++) { var subData = list[i].subData; if (subData[2].data.firstFourQuarter) { xdata.push(list[i].date + '年1季度'); xdata.push(list[i].date + '年1-2季度'); xdata.push(list[i].date + '年1-3季度'); xdata.push(list[i].date + '年1-4季度'); } else { xdata.push(list[i].date + '年1季度'); } for (var j = 0; j < subData.length; j++) { if (obj.type == subData[j].type) { var ndata = subData[j].data; array.push(ndata.firstQuarter.totalQuarter ? ndata.firstQuarter.totalQuarter : 0); if (ndata.firstSecondQuarter) { array.push(ndata.firstSecondQuarter.totalQuarter ? ndata.firstSecondQuarter.totalQuarter : 0); } if (ndata.firstThridQuarter) { array.push(ndata.firstThridQuarter.totalQuarter ? ndata.firstThridQuarter.totalQuarter : 0); } if (ndata.firstFourQuarter) { array.push(ndata.firstFourQuarter.totalQuarter ? ndata.firstFourQuarter.totalQuarter : 0); } } } } return chat = { 'name': obj.title, 'data': array, 'color1': obj.color1, 'color2': obj.color2, 'xdata': xdata } } function getScaleByTypeAll(list, obj) { var array = []; var xdata = []; for (var i = 0; i < list.length; i++) { var subData = list[i].subData; if (subData[1].data.firstFourQuarter) { xdata.push(list[i].date + '年1季度'); xdata.push(list[i].date + '年1-2季度'); xdata.push(list[i].date + '年1-3季度'); xdata.push(list[i].date + '年1-4季度'); } else { xdata.push(list[i].date + '年1季度'); } for (var j = 0; j < subData.length; j++) { if (obj.type == subData[j].type) { var ndata = subData[j].data; array.push(ndata.firstQuarter.totalQuarter ? ndata.firstQuarter.totalQuarter : 0); if (ndata.firstSecondQuarter) { array.push(ndata.firstSecondQuarter.totalQuarter ? ndata.firstSecondQuarter.totalQuarter : 0); } if (ndata.firstThridQuarter) { array.push(ndata.firstThridQuarter.totalQuarter ? ndata.firstThridQuarter.totalQuarter : 0); } if (ndata.firstFourQuarter) { array.push(ndata.firstFourQuarter.totalQuarter ? ndata.firstFourQuarter.totalQuarter : 0); } } } } return chat = { 'name': obj.title, 'data': array, 'color1': obj.color1, 'color2': obj.color2, 'xdata': xdata } } var list = '' function getData(url) { return new Promise((resolve, reject) => { $.ajax({ url: url, dataType: 'json', success: function (scenetree) { if (scenetree) { resolve(scenetree); } } }); }) } getData('./json/construction.json').then(data => { var myChartConstruction = echarts.init(document.getElementById('constructionmain')) var option = getBar(data.construction, '万元'); myChartConstruction.setOption(option, true); }) getData('./json/realtyMarket.json').then(data => { var myChartConstruction = echarts.init(document.getElementById('realtyMarketmain')) var option = getBar(data.market, '万平方米'); myChartConstruction.setOption(option, true); }) getData('./json/inlandTrade.json').then(data => { var myChartConstruction = echarts.init(document.getElementById('inlandTrademain')); myChartConstruction.clear(); var option = getBar(data.trade, '万元'); myChartConstruction.setOption(option, true); }) getData('./json/financial.json').then(data => { var myChartConstructionFinancial = echarts.init(document.getElementById('publicIncomemain')) var getOption = getOtherBar(data.financial, '万元'); var optionFinancial = getOption('公共财政收入'); myChartConstructionFinancial.setOption(optionFinancial); $(".togglePic").click(function () { var newKey = $(this).html(); var optionFinancial = getOption(newKey); myChartConstructionFinancial.clear(); myChartConstructionFinancial.setOption(optionFinancial); }) }) getData('./json/bank.json').then(data => { var myChartConstructionBank = echarts.init(document.getElementById('bankmain')) var getOption = getOtherBar(data.finance, '亿元'); var optionBank = getOption('金融机构人民币存款余额'); myChartConstructionBank.setOption(optionBank); $(".togglePic2").click(function () { var newKey = $(this).html(); var optionBank = getOption(newKey); myChartConstructionBank.clear(); myChartConstructionBank.setOption(optionBank); }) }) function getBar(list, unit) { var dateNum = ['date']; var alloneBasis = []; var allData = ['季度']; for (var i = 0; i < list.length; i++) { for (var j = 1; j <= list[i].totalNum.length; j++) { var str = ' '; if (j == 1) { str = list[i].date + '年' + ' ' + '第1季度'; dateNum.push(str); } else { str = list[i].date + '年' + ' ' + '第1~' + j + '季度'; dateNum.push(str); } } var totalNumList = list[i].totalNum; for (var k = 0; k < totalNumList.length; k++) { allData.push(totalNumList[k]); } var alloneBasisList = list[i].alloneBasis; for (var n = 0; n < alloneBasisList.length; n++) { alloneBasis.push(alloneBasisList[n]); } }; var sourceData = [dateNum, allData]; return { legend: { textStyle:{ fontSize: 12 } }, grid: { left: '2%', right: '10%', bottom: '-2%', containLabel: true }, dataZoom:[//x轴滑动条 { type: 'slider', show: true, xAxisIndex: [0], start: 0, //初始化时,滑动条宽度开始标度 bottom: '7%', end: 45, height: 2, fillerColor:'#3E86FF', showDataShadow: false,//是否显示数据阴影 默认auto showDetail: false,//即拖拽时候是否显示详细数值信息 默认true }, { type:'inside', xAxisIndex:0, zoomOnMouseWheel:false, //滚轮是否触发缩放 moveOnMouseMove:true, //鼠标滚轮触发滚动 moveOnMouseWheel:true } ], tooltip: { trigger: 'item', formatter: function (params) { var htmlStr = ''; var color = params.color; //图例颜色 var seriesName = params.seriesName; //图例名称 var xName = params.name; //x轴的名称 var value = params.value; //y轴值 var htmlStr = '
'; htmlStr += seriesName + '
'; htmlStr += ''; htmlStr += ""; htmlStr += xName; htmlStr += ''; htmlStr += ""; if (!value.length) { htmlStr += value + '%'; } else { htmlStr += value[params.seriesIndex + 1] + unit; //选择对应value的坐标 } htmlStr += '' htmlStr += '
'; return htmlStr; } }, dataset: { source: sourceData }, xAxis: [{ type: 'category', axisLabel: { formatter: '{value}', interval: 0, rotate: -40, fontSize: 14 }, }, ], yAxis: [{ gridIndex: 0, axisLabel: { formatter: '{value}' + unit, fontSize: 10 } }, { type: 'value', axisLabel: { formatter: '{value}%', fontSize: 12 } } ], series: [{ type: 'bar', seriesLayoutBy: 'row', itemStyle: { normal: { color: function (params) { // build a color map as your need. var colorList = [ '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', ]; return colorList[params.dataIndex] }, } }, }, { name: '同比增减(%)', type: 'line', color: ['#91CC75'], yAxisIndex: 1, data: alloneBasis, symbolSize: 3, //一定要加这个字段才能显示 itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#000' }, fontSize: 12 } } }, } ] } } getData('./json/jdp.json').then(data => { var list = data.GDP var myChart = echarts.init(document.getElementById('gdpmain')); var option = getBarg(list, '%'); myChart.setOption(option, true); }) getData('./json/scale.json').then(data => { var myChartScale = echarts.init(document.getElementById('scalemain')) var option = getBarl(data.scale, '%'); myChartScale.setOption(option, true); }) getData('./json/fixedAssets.json').then(data => { var myChartConstruction = echarts.init(document.getElementById('fixedAssetsmain')) var option = getBarl(data.fixedAssets, '%'); myChartConstruction.setOption(option, true); }) function getBarl(list, unit) { // var dateNum = ['date']; var dateNum = []; var alloneBasis = []; var growth = []; var allData = ['季度']; for (var i = 0; i < list.length; i++) { for (var j = 1; j <= list[i].totalNum.length; j++) { var str = ' '; if (j == 1) { str = list[i].date + '年' + ' ' + '第1季度'; dateNum.push(str); } else { str = list[i].date + '年' + ' ' + '第1~' + j + '季度'; dateNum.push(str); } } var totalNumList = list[i].totalNum; for (var k = 0; k < totalNumList.length; k++) { allData.push(totalNumList[k]); } var alloneBasisList = list[i].alloneBasis; for (var n = 0; n < alloneBasisList.length; n++) { alloneBasis.push(alloneBasisList[n]); } var growthList = list[i].growth; if (list[i].growth) { for (var n = 0; n < growthList.length; n++) { growth.push(growthList[n]); } } }; var sourceData = [dateNum, alloneBasis]; return { legend: { textStyle:{ fontSize: 12 } }, grid: { left: '2%', right: '10%', bottom: '-2%', containLabel: true }, dataZoom:[//x轴滑动条 { type: 'slider', show: true, xAxisIndex: [0], start: 0, //初始化时,滑动条宽度开始标度 bottom: '7%', end: 45, height: 2, fillerColor:'#3E86FF', showDataShadow: false,//是否显示数据阴影 默认auto showDetail: false,//即拖拽时候是否显示详细数值信息 默认true }, { type:'inside', xAxisIndex:0, zoomOnMouseWheel:false, //滚轮是否触发缩放 moveOnMouseMove:true, //鼠标滚轮触发滚动 moveOnMouseWheel:true } ], tooltip: { trigger: 'item', formatter: function (params) { var htmlStr = ''; var color = params.color; //图例颜色 var seriesName = params.seriesName; //图例名称 var xName = params.name; //x轴的名称 var value = params.value; //y轴值 var htmlStr = '
'; htmlStr += seriesName + '
'; htmlStr += ''; htmlStr += ""; htmlStr += xName; htmlStr += ''; htmlStr += ""; if (!value.length) { htmlStr += value + '%'; } else { htmlStr += value[params.seriesIndex + 1] + unit; //选择对应value的坐标 } htmlStr += '' htmlStr += '
'; return htmlStr; } }, dataset: { source: sourceData }, xAxis: [{ type: 'category', axisLabel: { formatter: '{value}', interval: 0, rotate: -40, fontSize: 14 }, data: sourceData[0] }, ], yAxis: [{ gridIndex: 0, axisLabel: { formatter: '{value}' + unit, fontSize: 14 } }, { type: 'value', axisLabel: { formatter: '{value}%', fontSize: 14 } } ], series: [ // { // name: '同比增减(%)', // type: 'line', // color: ['#91CC75'], // yAxisIndex: 0, // data: alloneBasis // }, { name: '增速(%)', type: 'line', color: ['#448BEE'], yAxisIndex: 0, data: growth, symbolSize: 3, //一定要加这个字段才能显示 itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#000' }, fontSize:12 } } }, } ] } } function getBarg(list, unit) { // var dateNum = ['date']; var dateNum = []; var alloneBasis = []; var growth = []; var allData = ['季度']; for (var i = 0; i < list.length; i++) { for (var j = 1; j <= list[i].totalNum.length; j++) { var str = ' '; if (j == 1) { str = list[i].date + '年' + ' ' + '第1季度'; dateNum.push(str); } else { str = list[i].date + '年' + ' ' + '第1~' + j + '季度'; dateNum.push(str); } } var totalNumList = list[i].totalNum; for (var k = 0; k < totalNumList.length; k++) { allData.push(totalNumList[k]); } var alloneBasisList = list[i].alloneBasis; for (var n = 0; n < alloneBasisList.length; n++) { alloneBasis.push(alloneBasisList[n]); } var growthList = list[i].growth; if (list[i].growth) { for (var n = 0; n < growthList.length; n++) { growth.push(growthList[n]); } } }; var sourceData = [dateNum, alloneBasis]; return { legend: { textStyle:{ fontSize: 12 } }, grid: { left: '2%', right: '10%', bottom: '-1%', // width: 1000, containLabel: true }, dataZoom:[//x轴滑动条 { type: 'slider', show: true, xAxisIndex: [0], start: 0, //初始化时,滑动条宽度开始标度 bottom: '7%', end: 45, height: 2, fillerColor:'#3E86FF', showDataShadow: false,//是否显示数据阴影 默认auto showDetail: false,//即拖拽时候是否显示详细数值信息 默认true }, { type:'inside', xAxisIndex:0, zoomOnMouseWheel:false, //滚轮是否触发缩放 moveOnMouseMove:true, //鼠标滚轮触发滚动 moveOnMouseWheel:true } ], tooltip: { trigger: 'item', formatter: function (params) { // console.log(params); var htmlStr = ''; var color = params.color; //图例颜色 var seriesName = params.seriesName; //图例名称 var xName = params.name; //x轴的名称 var value = params.value; //y轴值 var htmlStr = '
'; htmlStr += seriesName + '
'; htmlStr += ''; htmlStr += ""; htmlStr += xName; htmlStr += ''; htmlStr += ""; // console.log(params.data.length); if (!value.length) { htmlStr += value + '%'; } else { htmlStr += value[params.seriesIndex + 1] + unit; //选择对应value的坐标 } htmlStr += '' htmlStr += '
'; return htmlStr; } }, dataset: { source: sourceData }, xAxis: [{ type: 'category', axisLabel: { formatter: '{value}', interval: 0, rotate: -40, fontSize: 14 }, data: sourceData[0] }, ], yAxis: [{ gridIndex: 0, axisLabel: { formatter: '{value}' + unit, fontSize: 14 } }, { type: 'value', axisLabel: { formatter: '{value}%', fontSize: 14 } } ], series: [ // { // name: '同比增减(%)', // type: 'line', // color: ['#91CC75'], // yAxisIndex: 0, // data: alloneBasis // }, { name: '同比增减(%)', type: 'line', color: ['#91CC75'], yAxisIndex: 0, fontSize:14, data: growth, symbolSize: 3, //一定要加这个字段才能显示 itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#000' }, fontSize:12 } } }, } ] } } function getOtherBar(list, unit) { var dateNum = ['date']; for (var i = 0; i < list.length; i++) { if (list[i].subData[0].data.firstFourQuarter) { for (var j = 1; j <= 4; j++) { var str = ' '; if (j == 1) { str = list[i].date + '年' + ' ' + '第1季度'; dateNum.push(str); } else { str = list[i].date + '年' + ' ' + '第1~' + j + '季度'; dateNum.push(str); } } } else { str = list[i].date + '年' + ' ' + '第1季度'; dateNum.push(str); // for (var j = 1; j <= 3; j++) { // var str = ' '; // if (j == 1) { // str = list[i].date + '年' + ' ' + '第1季度'; // dateNum.push(str); // } else { // str = list[i].date + '年' + ' ' + '第1~' + j + '季度'; // dateNum.push(str); // } // } } }; var listZero = list[0].subData; var listName = {}; for (var n = 0; n < listZero.length; n++) { const name = listZero[n].subName; // console.log(name); const quarter = ['季度']; var alloneBasis = []; for (let i = 0; i < list.length; i++) { const current = list[i].subData.find(item => item.subName === name).data; quarter.push(current.firstQuarter.totalQuarter); alloneBasis.push(current.firstQuarter.oneBasis); if (current.firstSecondQuarter) { quarter.push(current.firstSecondQuarter.totalQuarter); alloneBasis.push(current.firstSecondQuarter.oneBasis); } if (current.firstThridQuarter) { quarter.push(current.firstThridQuarter.totalQuarter); alloneBasis.push(current.firstThridQuarter.oneBasis); } if (current.firstFourQuarter) { quarter.push(current.firstFourQuarter.totalQuarter); alloneBasis.push(current.firstFourQuarter.oneBasis); } } var sourceData = [dateNum, quarter]; } return function getOption(k) { const quarter3 = ['季度']; var alloneBasis = []; for (let i = 0; i < list.length; i++) { const current = list[i].subData.find(item => item.subName === k); if (current) { const currentList = list[i].subData.find(item => item.subName === k).data; quarter3.push(currentList.firstQuarter.totalQuarter); alloneBasis.push(currentList.firstQuarter.oneBasis); if (currentList.firstSecondQuarter) { quarter3.push(currentList.firstSecondQuarter.totalQuarter); alloneBasis.push(currentList.firstSecondQuarter.oneBasis); } if (currentList.firstThridQuarter) { quarter3.push(currentList.firstThridQuarter.totalQuarter); alloneBasis.push(currentList.firstThridQuarter.oneBasis); } if (currentList.firstFourQuarter) { quarter3.push(currentList.firstFourQuarter.totalQuarter); alloneBasis.push(currentList.firstFourQuarter.oneBasis); } } } var sourceData = [dateNum, quarter3]; return { legend: { textStyle:{ fontSize: 12 } }, grid: { left: '2%', right: '10%', bottom: '5%', containLabel: true }, dataZoom:[//x轴滑动条 { type: 'slider', show: true, xAxisIndex: [0], start: 0, //初始化时,滑动条宽度开始标度 bottom: '7%', end: 45, height: 2, fillerColor:'#3E86FF', showDataShadow: false,//是否显示数据阴影 默认auto showDetail: false,//即拖拽时候是否显示详细数值信息 默认true }, { type:'inside', xAxisIndex:0, zoomOnMouseWheel:false, //滚轮是否触发缩放 moveOnMouseMove:true, //鼠标滚轮触发滚动 moveOnMouseWheel:true } ], tooltip: { trigger: 'item', formatter: function (params) { var htmlStr = ''; var color = params.color; //图例颜色 var seriesName = params.seriesName; //图例名称 var xName = params.name; //x轴的名称 var value = params.value; //y轴值 var htmlStr = '
'; htmlStr += seriesName + '
'; htmlStr += ''; htmlStr += ""; htmlStr += xName; htmlStr += ''; htmlStr += ""; if (!value.length) { htmlStr += value + '%'; } else { htmlStr += value[params.seriesIndex + 1] + unit; //选择对应value的坐标 } htmlStr += '' htmlStr += '
'; return htmlStr; } }, dataset: { source: sourceData }, xAxis: [{ type: 'category', gridIndex: 0, axisLabel: { formatter: '{value}', interval: 0, rotate: -40, fontSize: 14 } }, ], yAxis: [{ gridIndex: 0, axisLabel: { formatter: '{value}' + unit, fontSize: 10 } }, { type: 'value', axisLabel: { formatter: '{value}%', fontSize: 10 } } ], series: [ { type: 'bar', seriesLayoutBy: 'row', itemStyle: { normal: { color: function (params) { // build a color map as your need. var colorList = [ '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', '#93BEF9', '#6AA3F3', '#448BEE', '#2A7BED', ]; return colorList[params.dataIndex] }, } }, }, { name: '同比增减(%)', type: 'line', color: ['#91CC75'], // itemStyle: { // normal: { // color: rgb(115,192,222) // } // }, yAxisIndex: 1, data: alloneBasis, symbolSize: 3, //一定要加这个字段才能显示 itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#000' }, fontSize:12 } } }, } ] } } } function getLine(list, unit) { var chart = { tooltip: { trigger: 'axis', }, dataZoom:[//x轴滑动条 { type: 'slider', show: true, xAxisIndex: [0], start: 0, //初始化时,滑动条宽度开始标度 bottom: '7%', end: 45, height: 2, fillerColor:'#3E86FF', showDataShadow: false,//是否显示数据阴影 默认auto showDetail: false,//即拖拽时候是否显示详细数值信息 默认true }, { type:'inside', xAxisIndex:0, zoomOnMouseWheel:false, //滚轮是否触发缩放 moveOnMouseMove:true, //鼠标滚轮触发滚动 moveOnMouseWheel:true } ], grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { show: true, x: 'right', y: 'top', feature: { saveAsImage: { pixelRatio: 1, name: '导出的文件名', title: '保存图片', emphasis: { iconStyle: { textAlign: 'right', //文字在图标在右边 textPosition: 'left', //文字与图标在一行 }, } } } }, xAxis: { type: 'category', boundaryGap: 1, data: list[0].xdata, axisLabel: { interval: 0, rotate: 40, fontSize: 14 } }, yAxis: { type: 'value', axisLabel: { formatter: '{value}' + unit, fontSize: 14 } } }; var series = []; var tolstr = []; for (var i = 0; i < list.length; i++) { series.push({ name: list[i].name, type: 'bar', stack: '总量', symbol: 'none', data: list[i].data, itemStyle: { normal: { color: list[i].color1 } }, }) tolstr.push(list[i].color1); } chart.series = series; chart.tooltip.formatter = function (v) { var str = ''; var res = "
" + v[0].axisValue + "
"; var result = '' v.forEach(function (item, index) { result += `` result += item.seriesName + ":" + item.data + unit + "
"; }) str = res + result return str; } return chart; } function getLinel(list, unit) { var chart = { tooltip: { trigger: 'axis', }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { show: true, x: 'right', y: 'top', feature: { saveAsImage: { pixelRatio: 1, name: '导出的文件名', title: '保存图片', emphasis: { iconStyle: { textAlign: 'right', //文字在图标在右边 textPosition: 'left', //文字与图标在一行 }, } } } }, xAxis: { type: 'category', boundaryGap: false, data: list[0].xdata, axisLabel: { interval: 0, rotate: 40, fontSize: 14 } }, yAxis: { type: 'value', axisLabel: { formatter: '{value}' + unit, fontSize: 14 } } }; var series = []; var tolstr = []; for (var i = 0; i < list.length; i++) { series.push({ name: list[i].name, type: 'line', // type: 'bar', // stack: '增速', // symbol: 'none', data: list[i].data, symbolSize: 3, //一定要加这个字段才能显示 itemStyle: { normal: { color: list[i].color1, label: { show: true, position: 'top', textStyle: { color: '#000' } } } } }) tolstr.push(list[i].color1); } chart.series = series; chart.tooltip.formatter = function (v) { var str = ''; var res = "
" + v[0].axisValue + "
"; var result = '' v.forEach(function (item, index) { result += `` result += item.seriesName + ":" + item.data + unit + "
"; }) str = res + result return str; } return chart; } function getAllLine(list) { var dateList = []; var listThri = []; for (var i = 0; i < list.length; i++) { dateList.push(list[i].date); listThri.push(list[i].totalNum[3]); } return { grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { show: true, x: 'right', y: 'top', feature: { saveAsImage: { pixelRatio: 1, name: '导出的文件名', title: '保存图片', emphasis: { iconStyle: { textAlign: 'right', //文字在图标在右边 textPosition: 'left', //文字与图标在一行 }, } } } }, xAxis: { type: 'category', boundaryGap: 1, data: dateList }, yAxis: { type: 'value' }, series: [{ name: '视频广告', type: 'bar', stack: '总量', symbol: 'none', data: listThri, lineStyle: { normal: { width: 4, color: { type: 'linear', colorStops: [{ offset: 0, color: '#0090f4' }, { offset: 1, color: '#5efff5' }], globalCoord: false }, } }, } ] } } //时间 var t = null; t = setTimeout(time, 1000); //開始运行 function time() { clearTimeout(t); //清除定时器 dt = new Date(); var y = dt.getFullYear(); var mt = showDateNum(dt.getMonth() + 1); var day = showDateNum(dt.getDate()); var mon = showMonNum(dt.getDay()); //获取星期 var h = showDateNum(dt.getHours()); //获取时; var m = showDateNum(dt.getMinutes()); //获取分 var s = showDateNum(dt.getSeconds()); //获取秒 document.querySelector(".timeDeatil").innerHTML = h + ':' + m + ':' + s; document.querySelector(".dateMon").innerHTML = mon; document.querySelector(".dateDeatil").innerHTML = y + '-' + mt + '-' + day; t = setTimeout(time, 1000); //设定定时器,循环运行 } //处理日期数字 function showDateNum(num) { if (num < 10) { return '0' + num } return num } //处理星期 function showMonNum(num) { switch (num) { case 1: num = '星期一'; break; case 2: num = '星期二'; break; case 3: num = '星期三'; break; case 4: num = '星期四'; break; case 5: num = '星期五'; break; case 6: num = '星期六'; break; case 0: num = '星期日'; break; } return num } //阿拉伯数字转中文数字 function NoToChinese(num) { if (!/^\d*(\.\d*)?$/.test(num)) { alert("Number is wrong!"); return "Number is wrong!"; } var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九"); var BB = new Array("", "十", "百", "千", "万", "亿", "点", ""); var a = ("" + num).replace(/(^0*)/g, "").split("."), k = 0, re = ""; for (var i = a[0].length - 1; i >= 0; i--) { switch (k) { case 0: re = BB[7] + re; break; case 4: if (!new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0])) re = BB[4] + re; break; case 8: re = BB[5] + re; BB[7] = BB[5]; k = 0; break; } if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0) re = AA[0] + re; if (a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k % 4] + re; k++; } if (a.length > 1) //加上小数部分(如果有小数部分) { re += BB[6]; for (var i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)]; } return re; };