java echarts 散点图_echarts的散点图

目前页面中有一个故障数据，做成散点图的效果，打算用echarts 来实现，国内的图表类其实选择挺多的，个人觉得echarts是比较好用的，来看看它有什么优点，一时中文的，联合百度地图，很多都对国内很友好，准确。2是用起来方便，只要引一个  文件，3.完全免费。4美观。。。。等等很多理由可以选择echarts。

不多说，贴代码：

日历图

#main {

width:700px;

height:300px;

position:absolute;

left:50%;

top:50%;

margin:-150px -100px 0px -355px

}

var myChart = echarts.init(document.getElementById('main'));

var data=[];

var cData = ['2018-01-01','2018-06-30'];

function querySheBeiHalfYear(id){

$.ajax({

type : "post",

async : false, //同步执行

url : document.location.origin+"/osp/ssda/rest/taiqv/querySheBeiHalfYear",

data : {id:id},

dataType : "json", //返回数据形式为json

success : function(result) {

if (result.successful) {

var datas = result.resultValue.items;

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

data.push([

datas[i].time,

datas[i].count

]);

}

console.dir(data);

option.calendar[0].range = cData;

option.series[0].data = data;

option.series[1].data = data.sort(function (a, b) {

return b[1] - a[1];

}).slice(0, 3);

myChart.clear();

myChart.setOption(option);

}

},

error : function(errorMsg) {

alert("请求数据失败啦!");

}

});

}

option = {

backgroundColor: '#002C51',

title: {

top: 30,

text: '故障时间表',

subtext: '',

left: 'center',

textStyle: {

color: '#fff'

}

},

tooltip : {

trigger: 'item'

},

calendar: [{

top: 100,

left: 'center',

range: [],//时间数组

splitLine: {

show: true,

lineStyle: {

color: '#000',

width: 4,

type: 'solid'

}

},

yearLabel: {

formatter: '{start}-{end} ',

textStyle: {

color: '#fff'

}

},

itemStyle: {

normal: {

color: '#323c48',

borderWidth: 1,

borderColor: '#111'

}

}

}],

series : [

{

name: '故障',

type: 'scatter',

coordinateSystem: 'calendar',

data: [],//二维数组

symbolSize: function (val) {

return val[1] ;

},

itemStyle: {

normal: {

color: '#40B3A2'

}

}

},

{

name: 'top 3',

type: 'effectScatter',

coordinateSystem: 'calendar',

// data: data.sort(function (a, b) {

// console.dir(a);

// console.info('--------');

// console.dir(b);

// return b[1] - a[1];

// }).slice(0, 3),

data:[],

symbolSize: function (val) {

return val[1];

},

showEffectOn: 'render',

rippleEffect: {

brushType: 'stroke'

},

hoverAnimation: true,

itemStyle: {

normal: {

color: '#3DE7E6',

shadowBlur: 10,

shadowColor: '#333'

}

},

zlevel: 1

}

]

};

myChart.on('click', function (params) {

console.log(params);

alert(params.value[0]);

window.dateDetail(params);

});