老板要画一个交错的柱状图，要自适应屏幕大小。难度就在要搞清楚每个数据块是哪一块控制，要如何能够自适应屏幕的大小。
比较关键的地方就是字体全用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();
});