function loadBlock9() { const block9 = echarts.init(document.getElementById("block9"), "macarons"); let block9Opt = { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { type: 'line', lineStyle: { opacity: 0 } }, formatter: function (params) { const marker = ''; if (params[0].name !== '') { return params[0].name + "
" + marker + "数量:" + params[0].value + " 人"; } else { return ''; } } }, legend: { show: false }, grid: { left: '5%', right: '5%', bottom: '5%', top: '7%', height: '85%', containLabel: true, z: 22 }, xAxis: [{ type: 'category', gridIndex: 0, data: [], axisTick: { alignWithLabel: true }, axisLine: { lineStyle: { color: '#0c3b71' } }, axisLabel: { show: true, color: 'rgb(170,170,170)', fontSize: 12 } }], yAxis: [{ type: 'value', gridIndex: 0, splitLine: { show: false }, axisTick: { show: false }, axisLine: { lineStyle: { color: '#0c3b71' } }, axisLabel: { color: 'rgb(170,170,170)', formatter: '{value}' } }, { type: 'value', gridIndex: 0, splitNumber: 12, splitLine: { show: false }, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitArea: { show: true, areaStyle: { color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)'] } } } ], series: [{ name: '实用人口', type: 'bar', barWidth: '30%', xAxisIndex: 0, yAxisIndex: 0, itemStyle: { normal: { barBorderRadius: 30, color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: '#00feff' }, { offset: 0.5, color: '#027eff' }, { offset: 1, color: '#0286ff' } ] ) } }, data: [], zlevel: 11 }] }; block9.setOption(block9Opt); $.ajax({ url: ajaxBaseUrl + "data/practical-person.json", dataType: "json" }).done(function () { $("#block9").addClass("chart-done"); }).done(function (data) { var yData = []; var seriesData = []; for (var i = 0; i < data.length; i++) { yData.push(data[i].name); seriesData.push(data[i].value); } block9.setOption({ xAxis: [{ data: yData }], series: [{ data: seriesData }] }); }).fail(function (jqXHR) { console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText); }); }