Echarts在线免费图表

 
            
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&&params[i].value!='-'&&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  +"："+ 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(),
   
};