echarts时间散点图_【前端图表】echarts实现散点图x轴时间轴

话不多说，老规矩，先上图，实现echarts实现散点图，x轴数据为时间年月日。

图片.png

实现代码如下：

五分钟上手之散点图

$(document).ready(function() {

var MyScatter = echarts.init(document.getElementById('Scatter'));

var data = [

['2012-03-01',

1,

"翻身"

],

[

'2013-06-01',

0.5,

"没翻身"

],

[

'2017-03-02',

0.5,

"翻身"

]

];

var textStyle = {

color: '#333',

fontStyle: 'normal',

fontWeight: 'normal',

fontFamily: '微软雅黑',

fontSize: 14,

};

option = {

xAxis: {

type: 'time',

name: '时间轴',

},

yAxis: {

type: 'value',

name: '次数值',

max: 1,

min: 0,

},

series: [{

name: '',

data: data,

type: 'scatter',

symbolSize: 40

}]

};

MyScatter.setOption(option);

});

echarts学习过程中，也会遇到很多坑，要不断的进行试验和钻研，才会发现其中的奥妙，下午去了echarts官网看了一遍参数文档，收获颇丰。另外，附上一副散点图所有参数的详解。

// 基于准备好的dom，初始化echarts实例

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

//第二步构造数据

var data1 = [];//数据区域缩放组件

var data2 = [];

var data3 = [];

//构造随机数

var random = function (max){

return (Math.random() * max).toFixed(3);

};

//将数据装载到数组中

for (var i = 0; i < 500; i++) {

data1.push([random(15), random(10), random(1)]);

data2.push([random(10), random(10), random(1)]);

data3.push([random(15), random(10), random(1)]);

};

//3、配置option项

//第三步就是使用echarts的option进行参数的配置

option = {

animation: false,//是否开启动画，默认是开启的，true是开启的,false是关闭的

//图例

legend: {

data: [

{

name:'scatter2',

icon:'circle',//强制设置图形长方形

textStyle:

{color:'red'}//设置文本为红色

},

{

name:'scatter',

icon:'rectangular',//强制设置图形为长方形

textStyle:

{color:'red'}//设置文本为红色

},

{

name:'scatter3',

icon:'rectangular',//强制设置图形为长方形

textStyle:

{color:'red'}//设置文本为红色

}

],

zlevel:5,//设置Canvas分层 zlevel值不同会被放在不同的动画效果中,传说中z值小的图