x轴为时间的散点图
配置项如下
var data = [
['2017-05-04', 0.16],
['2017-11-03', 0.12],
['2017-12-15', 0.1],
['2017-12-29', 0.14],
['2018-01-05', 0.13],
['2018-01-19', 0.12],
['2018-02-09', 0.13],
['2018-02-14', 0.18],
['2018-02-14', 0.14],
['2018-02-14', 0.22],
['2018-02-23', 0.25],
['2018-02-23', 0.15],
['2018-03-09', -0.04],
['2018-03-09', 0.13],
['2018-03-09', 0.05],
['2018-03-09', 0.11],
['2018-03-09', 0.1],
['2018-03-16', 0.13],
['2018-03-16', 0.11],
['2018-03-16', 0.1],
['2018-03-16', 0.13],
['2018-03-16', 0.11],
['2018-03-16', 0],
['2018-03-16', 0.11],
['2018-03-16', 0.5],
['2018-03-16', 0.13],
['2018-03-16', -0.03],
['2018-03-16', 0.1],
['2018-03-16', -0.11],
['2018-03-16', 0.12],
['2018-03-16', 0],
['2018-03-16', 0.12],
['2018-03-16', 0.12],
['2018-03-23', 0.12],
['2018-03-23', 0.12],
['2018-03-23', 0.15],
['2018-03-30', 0.12],
['2018-03-30', 0.16],
['2018-03-30', 0.1]
];
option = {
title: {
text: '动态数据 + 时间坐标轴'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
},
grid: {
show: true, //是否显示直角坐标系的网格,true显示,false不显示
left: 100, //grid组件离容器左侧的距离
containLabel: false, //grid 区域是否包含坐标轴的刻度标签,在无法确定坐标轴标签的宽度,容器有比较小无法预留较多空间的时候,可以设为 true 防止标签溢出容器。
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'time',
name: '时间轴',
},
yAxis: {
type: 'value',
name: '涨幅',
max: 0.4,
min: -0.2,
},
dataZoom: [{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'inside',
xAxisIndex: [0],
start: 1,
end: 35
},
],
series: [{
name: '',
data: data,
type: 'scatter',
symbolSize: function (data) {
return data[1]*150;
},
}]
};