老闆要畫一個交錯的柱狀圖，要自適應屏幕大小。難度就在要搞清楚每個數據塊是哪一塊控制，要如何能夠自適應屏幕的大小。
比較關鍵的地方就是字體全用rem的方式不用px來固定，echarts的涉及到的屬性也全用百分比就基本解決切分辨率的時候出現變形的問題，畢竟用響應式佈局實在麻煩。。。
至於數據塊的問題一邊參考echarts文檔一邊調試基本都搞清楚了控制邏輯。
console.log(req.data[0].patientCount);
var data = {
"_data": [
{
"_name": "85歲以上",
"_left": req.data[0].patientCount,
"_right": req.data[1].patientCount
},
{
"_name": "76-85歲",
"_left": req.data[2].patientCount,
"_right": req.data[3].patientCount
},
{
"_name": "66-75歲",
"_left": req.data[4].patientCount,
"_right": req.data[5].patientCount
},
{
"_name": "56-65歲",
"_left": req.data[6].patientCount,
"_right": req.data[7].patientCount
},
{
"_name": "46-55歲",
"_left": req.data[8].patientCount,
"_right": req.data[9].patientCount
},
{
"_name": "36-45歲",
"_left": req.data[10].patientCount,
"_right": req.data[11].patientCount
}
]
}
var zongjine = [0];
var myData = [];
var myData_l = [];
var myData_r = [];
var garybar = [];
var data_l = [];
var data_r = [];
function dataConvert(data) {
for (var i = 0; i < data['_data'].length; i++) {
myData.push(data['_data'][i]['_name']);
var l = parseFloat(data['_data'][i]['_left']);
var r = parseFloat(data['_data'][i]['_right']);
myData_l.push(data['_data'][i]['_left']);
myData_r.push(data['_data'][i]['_right']);
garybar.push(1);
var l2 = l / (l + r);
var r2 = r / (l + r);
data_l.push(l2);
data_r.push(r2);
}
}
dataConvert(data);
var myChart = echarts.init(document.getElementById('xbbl'));
myChart.setOption({
legend: {
data: ['男', '女'],
itemWidth: 8,
itemHeight: 7,
textStyle: {
color: 'rgb(189,204,237)',fontSize:'80%'
},
top: 2
},
grid: [{
show: false,
left: '13%',
top: '2%',
bottom: '5%',//調節左邊的相對位置
width: '0%',
},
{
show: false,
left: '7%',
top: '11%',
bottom: '10%',
containLabel: true,
width: '34%',//調節左邊框的相對位置
},
{
show: false,
left: '61%',
top: '7%',
bottom: '15%',
width: '0%',//調整圖標比例
},
{
show: false,//黃條
right: '5%',
top: '10%',
bottom: '9%',
containLabel: true,
height:'80%',
width: '34%'
},
{
show: false,//右邊文字
right: '7%',
top: '14%',
bottom: '5%',
width: '0%',
},
{
show: false,
left: '3%',
top: '30%',
bottom: '80%',
containLabel: true,
width: '10%',
height:'80%'
},
{
show: false,
left: '8%',
top: 30,
bottom: 20,
containLabel: true,
width: '10%',
height:'180%'
}],
xAxis: [
{
show: false,
},
{
gridIndex: 1,
type: 'value',
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
position: 'top',
axisLabel: {
show: false,
textStyle: {
color: '#B2B2B2',
fontSize: 12,
},
},
splitLine: {
show: false,
lineStyle: {
color: '#1F2022',
width: 1,
type: 'solid',
},
},
},
{
gridIndex: 2,
show: false,
},
{
gridIndex: 3,
type: 'value',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
position: 'top',
axisLabel: {
show: false,
textStyle: {
color: '#B2B2B2',
fontSize: 12,
},
},
splitLine: {
show: false,
lineStyle: {
color: '#1F2022',
width: 1,
type: 'solid',
},
},
},
{
gridIndex: 4,
show: false,
},
{
gridIndex: 5,
show: false,
},
{
gridIndex: 6,
show: false,
}],
yAxis: [
{
type: 'category',
inverse: false,
max: 6,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {//左邊數字
show: true,
lineHeight:'10%',
padding: [5, 4, 0, 10],
textStyle: {
color: 'rgb(189,204,237)',
fontSize: '80%',
},
},
data: myData_l.map(function (value) {
return {
value: value,
textStyle: {
align: 'center',
}
}
}),
},
{
gridIndex: 1,
type: 'category',
inverse: false,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
height:10,
//padding: [0, 0, 5, 0],
textStyle: {
color: 'white',
fontSize: '90%',
},
},
data: myData,
},
{
gridIndex: 2,
type: 'category',
inverse: false,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
height:'100%',
padding: [20, 0, -10, 0],
textStyle: {
color: 'white',
fontSize: '90%',//調節中間字體
},
},
data: myData,
},
{
gridIndex: 3,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
textStyle: {
color: '#4b4b4b',
fontSize: '5%',
},
},
data: myData,
},
{
gridIndex: 4,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
padding: [5, 4, 0, 10],
textStyle: {
color: 'rgb(189,204,237)',//調節右邊字體大小
fontSize: '80%',
},
},
data: myData_r.map(function (value) {
return {
value: value,
textStyle: {
align: 'center',
}
}
}),
},
{
gridIndex: 5,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
textStyle: {
color: '#4b4b4b',
fontSize: 16,
},
},
data: myData_r.map(function (value) {
return {
value: value,
textStyle: {
align: 'center',
}
}
}),
},
{
gridIndex: 6,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
textStyle: {
color: '#4b4b4b',
fontSize: 16,
},
},
data: myData_r.map(function (value) {
return {
value: value,
textStyle: {
align: 'center',
}
}
}),
}
],
series: [
{
type: 'bar',
itemStyle: {
normal: {
color: 'rgb(4,13,54)'//深藍色
}
},
silent: true,
xAxisIndex: 1,
yAxisIndex: 1,
barWidth: 15,
barGap: '-100%', // Make series be overlap
data: garybar
},
{
name: '男',
type: 'bar',
itemStyle: {
color: 'rgb(5,153,249)'//藍色
},
xAxisIndex: 1,
yAxisIndex: 1,
barWidth: 15,
z: 10,
data: data_l
},
{
type: 'bar',
itemStyle: {
normal: {
color: 'rgb(4,13,54)'//深藍色
}
},
silent: true,
barWidth: 15,
barGap: '-100%', // Make series be overlap
xAxisIndex: 3,
yAxisIndex: 3,
data: garybar
},
{
name: '女',
type: 'bar',
itemStyle: {
color: 'rgb(248,182,44)'//橙色
},
barWidth: 15,
xAxisIndex: 3,
yAxisIndex: 3,
z: 10,
data: data_r
},
{
type: 'bar',
xAxisIndex: 5,
yAxisIndex: 5,
barGap: '-100%',
barWidth: 10, //統計條寬度
itemStyle: {
normal: {
barBorderRadius: 20,
color: '#fff'
},
},
data: zongjine
}
]
});
window.addEventListener("resize",function(){
myChart.resize();
});