echarts——折线图多管道多x轴
<!--<script type="text/javascript" src="../Public/front/js/echarts.js"></script>-->
<!--<script type="text/javascript" src="http://www.echartsjs.com/gallery/vendors/echarts/echarts.js"></script>-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript" src="__PUBLIC__/front/js/echarts.js"></script>
<script type="text/javascript" src="__PUBLIC__/front/js/echarts-gl.min.js"></script>
<!--<script type="text/javascript" src="__PUBLIC__/front/js/echarts-gl.js"></script>-->
<script type="text/javascript" src="https://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json"></script>
<!--<script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/echarts-stat/ecStat.min.js?_v_=1574101650733"></script>-->
<!--<script type="text/javascript" src="__PUBLIC__/front/js/time_picker/js/jquery-1.11.0.min.js"></script>-->
<!-- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> -->
<!-- <div class="littleBanner">
<!-- <img src="{$host}{$center_banner_url}" /> -->
<!-- </div> -->
<div class="containerCommunity">
<div class="CommunityBox">
<div class="rightMainterTrain">
<div class="BigTrainMainter">
<div class="rightMain">
<div id="main" style="width: 1300px;height: 500px;">44 </div>
<!--<div id="main" style="width: 100%;height:653px;"> </div>-->
</div>
</div>
</div>
</div>
</div>
<div style="clear: both"></div>
<script type="text/javascript">
var maximum_max = [];
var maximum_min = [];
var datalistt = []
datalistt[0] = [];
datalistt[1] = [];
datalistt[2] = [];
datalistt[3] = [];
datalistt[4] = [];
datalistt[0]['MaxValue'] = 1530
datalistt[0]['MinValue'] = 620
datalistt[1]['MaxValue'] = 290
datalistt[1]['MinValue'] = -201
datalistt[2]['MaxValue'] = 390
datalistt[2]['MinValue'] = -220
datalistt[3]['MaxValue'] = 520
datalistt[3]['MinValue'] = -234
datalistt[4]['MaxValue'] = 1520
datalistt[4]['MinValue'] = -203
for (var i = 0; i < datalistt.length; i++) {
/*新的方法*/
var MaxDataNum = datalistt[i].MaxValue;
var MinDataNum = datalistt[i].MinValue;
if (MaxDataNum == MinDataNum) {
maximum_max[i] = (Number(MinDataNum) + 2 * (datalistt.length - i) - 1).toFixed(1);
maximum_min[i] = (Number(MinDataNum) - 2 * i - 1).toFixed(1);
}
else {
var maxmin = Number(MaxDataNum) - Number(MinDataNum);
maximum_max[i] = (Number(MinDataNum) + maxmin * (datalistt.length - i)).toFixed(1);
maximum_min[i] = (Number(MinDataNum) - maxmin * i).toFixed(1);
}
}
var colors= [
'#000000', '#5793f3', '#d14a61', ' #191970', ' #4B0082',
'#675bba', '#00FF00', '#FF0000', '#FF7F00', ' #7B68EE',
'#FFFF00', '#339900', '#FF33CC', '#3CB371', ' #FFDAB9',
'#FAF0E6', ' #FFEBCD', '#98FB98', ' #20B2AA', ' #000080',
];
var dataarr = [];
var wave_legends = ['5-10T12:10/5-10T13:10',"5-11T12:10/5-11T13:10","5-13T12:10/5-13T13:10","5-13T12:1/5-13T13:1","5-13T12:1/6-13T13:11"]
wave1 = [[820, 932, 901, 934, 1290, 1330, 1320],
[20, 32, 01, 34, 90, 30, 20],
[120, 132, 101, 134, 190, 130, 20],
[320, 222, 101, 34, 300, 130, 120],
[1320, 552, 130, 234, 3, 630, 120]
]
for (var i = 0; i < wave1.length; i++) {
var item = {
name:wave_legends[i] ,
type: 'line',
smooth: true, //这个是把线变成曲线
//symbol: 'none',
data: wave1[i],
yAxisIndex: i
};
dataarr.push(item);
}
var data_y = [];
var data_grid = [];
// var temp = 0;
// alert(wave1.length)
for (var i = 0; i <wave1.length ; i++) {
if (i == 0) {
var item = {
name: "T1",
type: 'value',
max: maximum_max[i],
min: maximum_min[i],
nameLocation: 'center',
nameGap: 19,
position: 'left',
scale: false,
// splitNumber:10,
// yAxisIndex :i,
splitLine: { //网格线
show: false
},
axisLabel: {
interval: 2
},
// axisTick:{
// show:false
// },
axisLine: {
// show:false,
lineStyle: {
color: colors[i]
}
}
};
} else {
var item = {
name: "T1",
type: 'value',
max: maximum_max[i],
min: maximum_min[i],
nameLocation: 'center',
nameGap: 19,
offset: 40 * (i - 1),
position: 'right',
scale: false,
splitLine: { //网格线
show: false
},
boundaryGap: ['20%', '20%'],
// axisTick:{
// show:false
// },
axisLine: {
// show:false,
lineStyle: {
color: colors[i]
}
}
};
}
data_y.push(item);
}
var option = {
//颜色
color: [
'#000000', '#5793f3', '#d14a61', ' #191970', ' #4B0082',
'#675bba', '#00FF00', '#FF0000', '#FF7F00', ' #7B68EE',
'#FFFF00', '#339900', '#FF33CC', '#3CB371', ' #FFDAB9',
'#FAF0E6', ' #FFEBCD', '#98FB98', ' #20B2AA', ' #000080',
],
//标题
title: {
text: '',
x: 'center'
},
//提示框
tooltip: {
trigger: 'axis'
},
// //图例
legend: {
orient: 'horizontal',
align: "auto",
data: wave_legends
},
//工具框
// toolbox: {
// show: true,
// feature: {
// mark: {
// show: true
// },
// dataZoom: {
// show: true
// },
// dataView: {
// show: true,
// readOnly: false
// },
// magicType: {
// show: true,
// type: ['line', 'bar']
// },
// restore: {
// show: true
// },
// saveAsImage: {
// show: true
// }
// }
// },
//横坐表数据
"xAxis": [
{
// name: "xxxxA",
type: 'category',
show: true,
data: ['xxxxA', '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10'],
axisLabel: {
textStyle: {
color: "#999"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
{
// name: "xxxxB",
type: 'category',
position: 'bottom',
offset: -110,
data: ["xxxxB",'5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10'],
axisPointer: {
type: 'none'
},
axisLabel: {
textStyle: {
color: "#999"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
{
// name: "xxxxC",
type: 'category',
position: 'bottom',
data: ["xxxxC", '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10'],
offset: -184,
axisPointer: {
type: 'none'
},
axisLabel: {
textStyle: {
color: "#999"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
{
// name: "xxxxD",
type: 'category',
position: 'bottom',
data: ["xxxxD", '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10'],
offset: -258,
axisPointer: {
type: 'none'
},
axisLabel: {
textStyle: {
color: "#999"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
{
// name: "xxxxE",
type: 'category',
position: 'bottom',
data: ["xxxxE", '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10', '5-10T12:10'],
offset: -315,
axisPointer: {
type: 'none'
},
axisLabel: {
textStyle: {
color: "#999"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
}
// {
// type: 'category',
// data: ['3/17 1:20', '3/17 1:20', '3/17 1:30', '3/17 1:40', '3/17 1:50', '3/17 2:00', '3/17 2:10']
// }
],
// xAxis: [{
// // name: 'time',
// //数据类型--类目轴，
// type: 'category',
// //坐标轴名字旋转，角度值。
// nameRotate: '20%',
// //坐标轴两边留白策略--类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
// boundaryGap: false,
// // splitNumber:5,
// // position:'bottom',
// //是否显示 x 轴。
// show: true,
// //坐标轴刻度相关设置。
// axisTick: {
//
// show: true,
// //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
// alignWithLabel: true,
// onGap: false,
// //坐标轴刻度的显示间隔
// // interval:gap ,
// //length: 20
// },
// axisLine: {
// show: false
// },
// splitLine: {
// // show: true,
// //interval: 5
// },
// // scale:true,
// data: ['3/17 1:20', '3/17 1:20', '3/17 1:30', '3/17 1:40', '3/17 1:50', '3/17 2:00', '3/17 2:10']
// }],
//纵坐标数据
yAxis: data_y,
series: dataarr,
};
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
