1.legend名字与series名字一样，即可联动，且不可手动去掉联动效果
2.通过legend图例联动，隐藏绘制图线后，对应（ yAxisIndex: 1）坐标y轴如果没有同时设置min和max的情况下，会自动隐藏。
3.grid可以通过设置x、y等为百分比达到自适应效果。
4.隐藏部分图线时，tooltip显示有格式要求时，通过给tooltip的formatter传递函数处理。
echart绘制图线实现代码：
var modalChart = null;
function createModalTrend(convertedData) {
if(convertedData && convertedData[0] && convertedData[1] && convertedData[2]){
//有数据情况下
$("#serviceTrendChart").attr('class','box');
var modalOption = {
legend:{
orient:'horizontal',
show:true,
x:'center',
y:'bottom',
data: ['数','率']
},
title:{
x:'center',
show:true,
text:'' ,
textAlign:'center',
textStyle:{
fontSize:14
}
},
backgroundColor: '#ffffff',
tooltip: {
formatter: function (params,ticket,callback) {
var res = params[0].name + '<br>';
for (var i = 0; i < params.length; i++) {
if(params[i].seriesName == '数'){
res += "数：" + params[i].value + '<br>';
}
if(params[i].seriesName == '率'){
res += "率：" + params[i].value + '%<br>';
}
}
return res;
},
trigger: 'axis',
backgroundColor: 'rgba(250,250,250,0.7)',// 悬浮框的颜色
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle: { // 直线指示器样式设置
color: '#D6D7D7',// 纵向竖虚线的颜色
type: 'dashed'
},
crossStyle: {
color: 'rgba(250,190,31,0.7)'
},
shadowStyle: { // 阴影指示器样式设置
color: 'rgba(250,190,31,0.7)'
}
},
textStyle: {
color: 'rgba(0,0,0,0.7)'// 悬浮框内容的颜色
}
},
// calculable: false,
grid: {
x:'10%',
y: '18%',
x2:'10%',
y2:'28%',
borderWidth: 1,
borderColor: '#D6D7D7'
},
xAxis: [
{
axisLabel: {
show: true,
rotate: 0,
interval: 'auto',
onGap: true
},
axisTick: {
show: false,
inside:false
},
type: 'category',
splitLine: {
show: false
},
boundaryGap: true,
data: convertedData[0],
axisLine: {
show: true,
lineStyle: {
width: 1,
color: '#F0F0F0'
}
},
nameTextStyle: {
color: '#000000',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 12
}
}
],
yAxis: [
{
min:0,
type: 'value',
position:'left',
splitArea: {
show: false
},
splitNumber: 5,
boundaryGap: [
0,
0.2
],
axisLine: {
show: true,
lineStyle: {
width: 1,
color: '#D6D7D7'
}
},
axisLabel: {
formatter: '{value}'
}
},
{
max:100,
type: 'value',
position:'right',
splitArea: {
show: false
},
splitNumber: 5,
boundaryGap: [
0,
0.2
],
axisLine: {
show: true,
lineStyle: {
width: 1,
color: '#D6D7D7'
}
},
axisLabel: {
formatter: '{value}%'
}
}
],
color:['#9AD0E2','#FAC026'],
series: [
{
name: '数',
type: 'bar',
smooth: true,
clickable: false,//设置为不可以点击
showAllSymbol: true,
data: convertedData[1]
},
{
name: '率',
type: 'line',
symbol:'circle',
smooth: true,
clickable: false,//设置为不可以点击
showAllSymbol: true,
yAxisIndex: 1,
data: convertedData[2]
}
]
};
if(modalChart && modalChart.clear && modalChart.setOption){
//有数据且已经被初始化过
modalChart.clear();//clear清空了option
modalChart.setOption(modalOption);
}else{
//有数据未被初始化
modalChart = echarts.init(document.getElementById('serviceTrendChart'));
modalChart.setOption(modalOption);
}
}else{
//无数据情况下
if(modalChart && modalChart.clear) modalChart.clear();//被初始化过，清空
$("#serviceTrendChart").attr('class','box nodataModal');
}
}
function genModalTrend(flag) {
var theFlag = '0' + flag;
var datatrend = null;
var url = xxxxx;
var endTime = condition.time;//暴露给外部，发请求直接用time,内部计算用 condition.selectedTime
var beginTime = getStartTime(condition.selectedTime,condition.timeUnit);
var para = [
{"name": "provincecode", "value": condition.provincecode},
{"name": "citycode", "value": condition.citycode},
{"name": "districtcode", "value": condition.districtcode},
{"name": "beginTime", "value": beginTime},
{"name": "endTime", "value": endTime},
{"name":"unit","value":condition.timeUnit},
{"name":"flag","value":theFlag}
];
$.ajax({
type: "GET",
contentType: "application/json",
url: url,
data: rdkData(para),
// async: false, //必须同步，还是可以异步，放到回调函数里面做？
success: function (data) {
datatrend = eval("(" + data.result + ")");
var convertedData = convertModalData(datatrend, endTime, condition.timeUnit);
createModalTrend(convertedData);
if (modalChart && modalChart.resize) {
modalChart.resize();
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
createModalTrend(null);
// var fakeData = [['2016-07-04',32,98.5],['2016-07-07',88,52.2],['2016-07-08',100,40],['2016-07-14',111,2]];
// createModalTrend(convertModalData(fakeData,endTime,condition.timeUnit));
}
});
}
function convertModalData(reqData, endDate, timeUnit) {
if (reqData == null || reqData.length == 0) {
return null;
}
var num = 0;
var k = 0;
var arrData = [];
arrData[0] = [];//日期
arrData[1] = [];//数
arrData[2] = [];//率
switch (timeUnit) {
case 'day':
num = 30;
for (k = 0; k <= num; k++) {
arrData[1][k] = 0;//数
arrData[2][k] = 0;//率
arrData[0][k] = getPreDay(endDate, num-k);//日期初始化,从小到大
}
break;
case 'week':
num = 7;
for (k = 0; k <= num; k++) {
arrData[1][k] = 0;//数
arrData[2][k] = 0;//率
arrData[0][k] = getPreWeek(endDate, num-k);//日期初始化
}
break;
case 'month':
num = 11;
for (k = 0; k <= num; k++) {
arrData[1][k] = 0;//数
arrData[2][k] = 0;//率
arrData[0][k] = getPreMonth(endDate, num-k);//日期初始化
}
break;
default :
return null;
break;
}
/** 趋势图数据数量[0,num] **/
//数据reqData没有按日期从小到大排列
for(k=0;k<=num;k++){
for (var i = 0; i < reqData.length; i++){
//如果日期对的上
if (reqData[i] && reqData[i][0] && arrData[0][k] === reqData[i][0]){
if(reqData[i][1] && parseFloat(reqData[i][1])){
//reqData[i][0]//如果数有效
arrData[1][k] = reqData[i][1];
}
if(reqData[i][2] && parseFloat(reqData[i][2])){
// reqData[i][1]//如果率有效
arrData[2][k] = reqData[i][2];
}
}
}
}
return arrData;
}
时间处理函数：
function getTimeStr(dateObj){
var strYear = dateObj.getFullYear();
var strMonth = dateObj.getMonth() + 1;
if (strMonth < 10) {
strMonth = '0' + strMonth;
}
var strDay = dateObj.getDate();
if (strDay < 10) {
strDay = '0' + strDay;
}
return strYear + '-' + strMonth + '-' + strDay;
}
/**以参数dateString为基准，前days天的日期**/
function getPreDay(dateString, days) {
if(days === 0) return dateString;
if (dateString.split('-').length != 3) return '';
var result = dateString.replace(/-/g, '/');
var theMiliseconds = Date.parse(result);
var pre_milliseconds = theMiliseconds - 1000 * 60 * 60 * 24 * parseInt(days);
var preDate = new Date(pre_milliseconds);
var strPreDate = getTimeStr(preDate);
return strPreDate;
}
/**若粒度为周，则显示最近8周内的趋势,weeks传入7。周基于天计算，传入dateString必须为天形式,dateString应该为selectedTime **/
function getPreWeek(dateString, weeks) {
if (dateString.split('-').length != 3) return '';//dateString应该传入selectedTime
var strPreDate = getPreDay(dateString, weeks * 7);
var checkDate = new Date(strPreDate.replace(/-/g, '/'));
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
var time = checkDate.getTime();
checkDate.setMonth(0);
checkDate.setDate(1);
var week = Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1; //86400000即一天的毫秒数
var timeText = checkDate.getFullYear() + "-" + (week < 10 ? '0' : '') + week;
return timeText;
}
/**若粒度为月，则显示12月内的趋势，months传入11 **/
function getPreMonth(dateString, months) {
if(months === 0) return dateString;
if (dateString.split('-').length != 2) return;
var y = Math.round(months / 12); //满12月减一年
var m = months % 12;
var result = dateString.split('-');
var theYear = parseInt(result[0]);
var theMonth = parseInt(result[1]);
if (theMonth <= m) {
theYear = theYear - 1 - y;
theMonth = theMonth + 12 - m;
} else
{
theYear = theYear - y;
theMonth = theMonth - m
}
if (theMonth <= 9) {
theMonth = '0' + theMonth;
}
return theYear + '-' + theMonth;
}
/**针对天周月，求趋势图 开始时间
* 30天
* 8周
* 12月
* **/
function getStartTime(endTime,timeUnit) {
switch (timeUnit){
case 'day':
return getPreDay(endTime,30);//起始日期为[前30天,endTime] 共31天
break;
case 'week':
return getPreWeek(endTime,7);//共八周
break;
case 'month':
return getPreMonth(endTime,11);//共12月
break;
default :
return endTime;
}
}