问下是否可以做上传图的的形式,正常一个点没有数据两边的线都断了,用什么方式可以让这个没有数据的点后面的线断掉,前面的还是连上的?
配置项如下
var jsonData={"xAxisData":["2017-07-24","07-29","08-04","08-14","08-17","08-29","08-30","09-01","09-02","09-03","09-04","09-05"],
"data":[{"name":"华熙地产","linecolor":"red","Z":9,"data":["-",300,300,300,300,300,300.0,"-",300.0,300.0]}],"resultEvent":[[{"data":"2017-07-24","companyname":"凯利门","price":320.0,"opttype":1}],[{"data":"07-29","companyname":"华熙房产","price":325.0,"opttype":1}],[{"data":"08-04","companyname":"加州水郡租售中心","price":290.0,"opttype":1}],[{"data":"08-14","companyname":"恒信欣居","price":318.0,"opttype":1}],[{"data":"08-17","companyname":"房房网","price":270.0,"opttype":1}],[{"data":"08-29","companyname":"汇鑫地产","price":280.0,"opttype":1}],[{"data":"08-30","companyname":"晨建顺","price":310.0,"opttype":1}],[{"data":"09-01","companyname":"21世纪不动产","price":336.0,"opttype":1},{"data":"09-01","companyname":"华熙房产","price":310.0,"opttype":2}],[{"data":"09-02","companyname":"21世纪不动产","price":336.0,"opttype":3},{"data":"09-02","companyname":"晨建顺","price":300.0,"opttype":2},{"data":"09-02","companyname":"房房网","price":265.0,"opttype":2},{"data":"09-02","companyname":"恒信欣居","price":300.0,"opttype":2},{"data":"09-02","companyname":"华熙地产","price":300.0,"opttype":1}],[{"data":"09-03","companyname":"晨建顺","price":300.0,"opttype":3},{"data":"09-03","companyname":"房房网","price":265.0,"opttype":3},{"data":"09-03","companyname":"恒信欣居","price":300.0,"opttype":3},{"data":"09-03","companyname":"华熙地产","price":300.0,"opttype":3},{"data":"09-03","companyname":"华熙房产","price":310.0,"opttype":3},{"data":"09-03","companyname":"汇鑫地产","price":280.0,"opttype":3},{"data":"09-03","companyname":"加州水郡租售中心","price":290.0,"opttype":3},{"data":"09-03","companyname":"凯利门","price":320.0,"opttype":3}],[{"data":"09-04","companyname":"晨建顺","price":300.0,"opttype":1},{"data":"09-04","companyname":"房房网","price":265.0,"opttype":1},{"data":"09-04","companyname":"华熙地产","price":300.0,"opttype":1},{"data":"09-04","companyname":"华熙房产","price":310.0,"opttype":1},{"data":"09-04","companyname":"汇鑫地产","price":280.0,"opttype":1},{"data":"09-04","companyname":"加州水郡租售中心","price":290.0,"opttype":1},{"data":"09-04","companyname":"凯利门","price":320.0,"opttype":1}],[{"data":"09-05","companyname":"晨建顺","price":300.0,"opttype":1,"commanyCount":9},{"data":"09-05","companyname":"房房网","price":265.0,"opttype":1,"commanyCount":9},{"data":"09-05","companyname":"华熙地产","price":300.0,"opttype":1,"commanyCount":9},{"data":"09-05","companyname":"华熙房产","price":310.0,"opttype":1,"commanyCount":9},{"data":"09-05","companyname":"汇鑫地产","price":280.0,"opttype":1,"commanyCount":9},{"data":"09-05","companyname":"加州水郡租售中心","price":290.0,"opttype":1,"commanyCount":9},{"data":"09-05","companyname":"凯利门","price":320.0,"opttype":1,"commanyCount":9}]],"datamax":336.0,"datamin":265.0}
function Legend(){
var legendData=new Array(jsonData.data.length);
for(var i=0;i<jsonData.data.length;i++)
{
var item=jsonData.data[i];
legendData[i]={icon:'circle',name:item.name};
}
return legendData;
}
function IsEqual(jsonData){
return jsonData.datamax - jsonData.datamin==0;
}
function seriesData(){
var seriesData=new Array(jsonData.data.length);
for(var i=0;i<jsonData.data.length;i++)
{
var item=jsonData.data[i];
seriesData[i]={
z:i==2?10:20,
type:'line',
name:item.name,
data:item.data,
itemStyle: {
normal: {
color:item.linecolor ,
},
}
};
}
return seriesData;
}
option = {
title: {
text: 'test',
},
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) {
console.log(params)
var str=params[0].name+'<br>';
for (var i = 0; i < params.length; i++) {
if (params[i].value&¶ms[i].value!='-'&¶ms[i].value!='--') {
str+=[
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[i].color + '\"><\/span>'+params[i].seriesName +":"+ params[i].value+"万元<br>"];
}
else if(params[i].value=='--'){
str+=[
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[i].color + '\"><\/span>'+params[i].seriesName +":自定义数据<br>"];
}
}
return str;
},
textStyle: {
align: "left"
}
},
legend: {
data: Legend(),
bottom:-5,
},
xAxis: {
type: 'category',
boundaryGap: true,
data:jsonData.xAxisData,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#000000"
}
},
},
yAxis: {
type: 'value',
interval:100,
splitLine:{
lineStyle:{
opacity:0.8,
type:'dotted',
color:"#cccccc",
},
},
axisLabel: {
formatter: '{value}万'
},
axisTick: {
show: false
},
max :IsEqual(jsonData)?jsonData.datamax+200:parseInt(jsonData.datamax + (jsonData.datamax - jsonData.datamin) / 2),
min :IsEqual(jsonData)?jsonData.datamin-200:parseInt(jsonData.datamin - (jsonData.datamax - jsonData.datamin) / 2),
plitLine: {
show: true
},
axisLine: {
show: true
},
},
series:seriesData(),
};