function loadBlock3() { const block3 = echarts.init(document.getElementById("block3"), "shine"); const block3Opt = { tooltip: { trigger: "axis", // axisPointer: { // type: "cross" // }, formatter: function (params) { const param = params[0]; const marker = ''; // const suffix = '亿元'; return param.name + "
" + // marker + "排名:" + (param.dataIndex + 1) + "
" + marker + "人员数量:" + param.value + " 人"; } }, grid: { width: '80%', height: '80%', left: '10%', top: '5%', }, xAxis: { data: [], axisTick: { show: false }, axisLine: { lineStyle: { color: 'rgba(255, 129, 109, 0.1)', width: 1 //这里是为了突出显示加上的 } }, axisLabel: { textStyle: { color: '#999', fontSize: 12 } } }, yAxis: [{ show: false, splitNumber: 2, axisTick: { show: false }, axisLine: { lineStyle: { color: 'rgba(255, 129, 109, 0.1)', width: 1 //这里是为了突出显示加上的 } }, axisLabel: { textStyle: { color: '#999' } }, splitArea: { areaStyle: { color: 'rgba(255,255,255,.5)' } }, splitLine: { show: true, lineStyle: { color: 'rgba(255, 129, 109, 0.1)', width: 0.5, type: 'dashed' } } }], series: [{ type: 'pictorialBar', barCategoryGap: '0%', symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z', label: { show: true, position: 'top', distance: 15, color: '#DB5E6A', fontWeight: 'bolder', fontSize: 16, }, itemStyle: { normal: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(232, 94, 106, .8)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(232, 94, 106, .1)' // 100% 处的颜色 } ], global: false // 缺省为 false } }, emphasis: { opacity: 1 } }, data: [], z: 10 }] }; block3.setOption(block3Opt); $.ajax({ url: ajaxBaseUrl + "data/important-person.json", dataType: "json" }).done(function () { $("#block3").addClass("chart-done"); }).done(function (data) { const xData = []; const yData = []; for (let i in data) { xData.push(data[i].name); yData.push(data[i].value); } block3.setOption({ xAxis: { data: xData }, series: [{ name: "人员数量", data: yData }] }); }).fail(function (jqXHR) { console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText); }); }