前端可视化工具ECharts 学习笔记(二)_针对x轴类型为time的
X轴的type 设置为time, X 轴就不需要data 了,
那么serie 的data 必须是二维数组的
[
[1538496443941, 123],
[1538502852702, 234]
]
第一个是时间的长整型, 第二个是对应y 轴的值.
数组1.push(数组2); //数组2 push 2个值, 每次循环数组2要重新new
X轴的显示日期格式必须自己修改,
xAxis: {
type: 'time',
axisLabel: {
interale: 0,
rotate: -40,
formatter: function (value) {
var t_date = new Date(value);
return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('/') + " "
+ [t_date.getHours(), t_date.getMinutes()].join(':');
}
},
axisPointer: {//y轴上显示指针对应的值
show: true,
},
},
效果图:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
<title>ECharts lin49940 test</title>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1600px;height:800px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var base = +new Date(2018, 9, 3);
var oneDay = 24 * 3600 * 1000;//毫米,分钟,小时,天
var data2 = [];
var data = [];
var data12 = [];
var data22 = [];
var now = new Date(base);
var now2 = new Date(base);
var color1='#f34';
var color2 = '#23f';
function addData(shift) {
now = new Date(+new Date(now) + Math.random() * 10 * 1000 * 60);
now2 = new Date(+new Date(now2) + oneDay);
data12 = new Array();
data22 = new Array();
data12.push(now);
data12.push((Math.random() - 0.4) * 10 + 15);
data22.push(now);
data22.push((Math.random() - 0.4) * 40 + 15);
data.push(data12);
data2.push(data22);
if (shift) {
data.shift();
data2.shift();
}
//alert(now);
now = new Date(+new Date(now) + Math.random() * 10 * 1000 * 60 );
now2 = new Date(+new Date(now2) + oneDay);
//alert(now);
}
for (var i = 1; i < 50; i++) {
addData();
}
console.log(data);
option = {
title: {
text: 'lin49940 test'
},
legend: {
//selectedMode: 'single',
data: ['成交', '成交2']
//orient:'vertical' //默认水平方向,这里设置为垂直
},
tooltip: {
},
toolbox: {
feature: {
magicType: {
type: ['line','bar']
},
dataView: {
},
restore: {},
saveAsImage: {
pixelRatio:2
}
}
},
grid: {
bottom: '80px'
},
xAxis: {
type: 'time',
axisLabel: {
interale: 0,
rotate: -40,
formatter: function (value) {
var t_date = new Date(value);
return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('/') + " "
+ [t_date.getHours(), t_date.getMinutes()].join(':');
}
},
axisPointer: {//y轴上显示指针对应的值
show: true,
},
},
yAxis: [
{
name: '销量1',
type: 'value',
axisLabel: {//设置Y轴显示值, 自定义需要
formatter:'{value}rmb'
},
axisLine: {//设置Y轴的颜色
lineStyle: {
color: color2,
width:6,
}
},
axisPointer: {//y轴上显示指针对应的值
show: true,
triggerTooltip: false //不要再有多的提示
}
},
{
name: '销量2',
type: 'value',
position: 'left',
offset: 70,
axisLine: {
lineStyle: {
color: color1,
width: 3,
}
},
axisPointer: {//y轴上显示指针对应的值
show: true,
triggerTooltip: false
}
}
],
dataZoom: [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 10, // 左边在 10% 的位置。
end: 60 // 右边在 60% 的位置。
},
{ // 这个dataZoom组件，默认控制x轴。鼠标滚动变化
type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 10, // 左边在 10% 的位置。
end: 60 // 右边在 60% 的位置。
},
],
series: [
{
name: '成交',
type: 'line',
smooth: true,
symbol: 'none',
///stack: 'a',
color: color2,
data: data,
label: {
normal: {
show: true,
position: 'top',
formatter: function (params) {
return parseInt(params.value[1]);
}
}
}
},
{
name: '成交2',
type: 'line',
smooth: true,
symbol: 'none',
//stack: 'a',
color: color1,
yAxisIndex:1,
data: data2,
showSymbol: false,
hoverAnimation:false,
},
{
name: '平行于y轴的趋势线',
type: 'line',
markLine: {
silent: true,
data:[
{ yAxis: 110 }, { yAxis: 220 }, {yAxis:320}
]
}
}
]
};
/*
setInterval(function () {
addData(true);
myChart.setOption({
xAxis: {
data: date
},
series: [{
name: '成交',
data: data
}]
});
}, 500);
*/
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.dispatchAction({
type: 'legendToggleSelect',
// 图例名称
name: '成交'
})
</script>
</body>
</html>