echart折线图X轴三级不等分实例

效果图

echart折线图X轴三级不等分实例

代码如下：

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<style type="text/css">
.style1
{
color: #FF0000;
}
</style>
</head>

<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%" class="style1"></div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);

srcData = [
{group: '测试三层1', subGroup: '测试二层1', name: 'a', value1: 11},
{group: '测试三层1', subGroup: '测试二层1', name: 'b', value1: 41},
{group: '测试三层1', subGroup: '测试二层2', name: 'C', value1: 16},
{group: '测试三层1', subGroup: '测试二层2', name: 'D', value1: 32},
{group: '测试三层1', subGroup: '测试二层2', name: 'E', value1: 34},
{group: '测试三层2', subGroup: '测试二层3', name: 1, value1: 12},
{group: '测试三层2', subGroup: '测试二层3', name: 2, value1: 35},
{group: '测试三层2', subGroup: '测试二层3', name: 3, value1: 23},
{group: '测试三层2', subGroup: '测试二层4', name: 2.3, value1: 16},
{group: '测试三层2', subGroup: '测试二层4', name: 4.5, value1: 12},
{group: '测试三层3', subGroup: '测试二层5', name: 5.2, value1: 11.}
];

covertData = function(src) {
var nameList = [];
var valueList = [];

var groupLabelList = [''];
var subGroupLabelList = [''];

var groupTickList = [0];
var subGroupTickList = [0];

var costomList = ['costomTick'];

var groupTmp = {
name: '',
count: 0
};
var subGroupTmp = {
name: '',
count: 0
};

for (var i = 0; i < src.length; i++) {

nameList.push(src[i].name);
valueList.push(src[i].value1);
groupLabelList.push('', '');
subGroupLabelList.push('', '');

i === src.length - 1 || groupTmp.name !== '' && groupTmp.name !== src[i + 1].group ?
(groupLabelList[i * 2 - groupTmp.count + 1] = src[i].group,
groupTmp.name = '',
groupTmp.count = 0,
groupTickList.push(i * 2 + 2)) :
(groupTmp.name = src[i].group,
groupTmp.count++);

if (i === src.length - 1 || subGroupTmp.name !== '' && subGroupTmp.name !== src[i + 1].subGroup) {
subGroupLabelList[i * 2 - subGroupTmp.count + 1] = src[i].subGroup,
subGroupTmp.name = '';
subGroupTmp.count = 0;
subGroupTickList.push(i * 2 + 2);
} else {
subGroupTmp.name = src[i].subGroup;
subGroupTmp.count++;
}

}

return {
nameList: nameList,
valueList: valueList,
groupLabelList: groupLabelList,
subGroupLabelList: subGroupLabelList,
groupTickList: groupTickList,
subGroupTickList: subGroupTickList
};
};

dstData = covertData(srcData);
console.log(dstData);

option = null;
srcData = [
{group: '测试三层1', subGroup: '测试二层1', name: 'a', value1: 11, value2: 10},
{group: '测试三层1', subGroup: '测试二层1', name: 'b', value1: 41, value2: 35},
{group: '测试三层1', subGroup: '测试二层2', name: 'C', value1: 16, value2: 23},
{group: '测试三层1', subGroup: '测试二层2', name: 'D', value1: 32, value2: 35},
{group: '测试三层1', subGroup: '测试二层2', name: 'E', value1: 34, value2: 30},
{group: '测试三层2', subGroup: '测试二层3', name: 1, value1: 12, value2: 24},
{group: '测试三层2', subGroup: '测试二层3', name: 2, value1: 35, value2: 33},
{group: '测试三层2', subGroup: '测试二层3', name: 3, value1: 23, value2: 20},
{group: '测试三层2', subGroup: '测试二层4', name: 2.3, value1: 16, value2: 11},
{group: '测试三层2', subGroup: '测试二层4', name: 4.5, value1: 12, value2: 15},
{group: '测试三层3', subGroup: '测试二层5', name: 5.2, value1: 11, value2: 20}
];

covertData = function(src) {
var nameList = [];
var valueList1 = [];
var valueList2 = [];

var groupLabelList = [''];
var subGroupLabelList = [''];

var groupTickList = [0];
var subGroupTickList = [0];

var costomList = ['costomTick'];

var groupTmp = {
name: '',
count: 0
};
var subGroupTmp = {
name: '',
count: 0
};

for (var i = 0; i < src.length; i++) {

nameList.push(src[i].name);
valueList1.push(src[i].value1);
valueList2.push(src[i].value2);
groupLabelList.push('', '');
subGroupLabelList.push('', '');

}

return {
nameList: nameList,
valueList1: valueList1,
valueList2: valueList2,
groupLabelList: groupLabelList,
subGroupLabelList: subGroupLabelList,
groupTickList: groupTickList,
subGroupTickList: subGroupTickList
};
};

dstData = covertData(srcData);
console.log(dstData);

option = {
grid: [{
bottom: '20%'
}, {
bottom: '20%'
}, {
bottom: '20%'
}],
tooltip: { //鼠标悬停提示内容
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'cross' // 十字线显示
}
},
legend: {
y: '30px',
data: ['内部次数', '外部次数'],
selectedMode: true,//是否允许菜单选择
},
xAxis: [{
gridIndex: 0,
type: 'category',
data: dstData.nameList,
axisTick: {
length: 20
}
}, {
gridIndex: 1,
type: 'category',
data: dstData.groupLabelList,
boundaryGap: false,
axisLabel: {
margin: 80,
interval: 0
},
axisTick: {
length: 100,
interval: (index) => dstData.groupTickList.indexOf(index) != -1
}
}, {
gridIndex: 2,
type: 'category',
data: dstData.subGroupLabelList,
boundaryGap: false,
axisLabel: {
margin: 40,
interval: 0
},
axisTick: {
length: 60,
interval: (index) => dstData.subGroupTickList.indexOf(index) != -1
}
}],
yAxis: [{
gridIndex: 0,
}, {
gridIndex: 1,
}, {
gridIndex: 2,
}],
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [{
xAxisIndex: 0,
yAxisIndex: 0,
symbolSize: 3,//原点大小
smooth: true, //光滑的曲线
type: 'line',
name: '内部次数',
label: {
show: true,
position: 'top'
},
data: dstData.valueList1
},
{
xAxisIndex: 0,
yAxisIndex: 0,
symbolSize: 3,//原点大小
smooth: true, //光滑的曲线
type: 'line',
name: '外部次数',
label: {
show: true,
position: 'top'
},
data: dstData.valueList2
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
//echarts图表点击跳转
myChart.on('click', function (param){
    var name=param.name;//年份
var name1=param.data;
if (typeof param.seriesIndex == 'undefined') {
        return;
}
var sss=param.seriesIndex;
if(sss=="0")
{
sss="标准保费";
}
if(sss=="1")
{
sss="增长";
}
alert(name+" "+sss);
    if(name=="标准保费"){
        window.location.href="堆积图4.htm";
    }else if(name=="增长"){
        window.location.href="www.baidu.com";
    }
// else
// {
// window.open("http://www.baidu.com");//打开新页面
// //parent.location.href="${base}/admin/file/list.htm";
// }
            });
myChart.on('click',eConsole);
</script>
</body>
</html>