echarts 动态数据 + 时间坐标轴
echarts官网的动态数据 + 时间坐标轴实例的横坐标时间并不是当前时间,我对此进行了一些修改vue项目此图标的横纵坐标和title颜色都为白色横坐标加上了倾斜效果function randomData() {now = new Date(+now + 1000);value = value + Math.random() * 21 - 10;return {name: now.toString
·
echarts官网的动态数据 + 时间坐标轴实例的横坐标时间并不是当前时间,我对此进行了一些修改
vue项目
此图标的横纵坐标和title颜色都为白色
横坐标加上了倾斜效果
function randomData() {
now = new Date(+now + 1000);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [now, Math.round(value)]
};
}
var data = [];
var now = new Date();
var value = Math.random() * 1000;
let myChart = echarts.init(document.getElementById("static"));
let option = {
title: {
text: "动态数据 + 时间坐标轴",
textStyle: {
fontSize: 18,
fontWeight: "bolder",
color: "#fff" // 主标题文字颜色
}
},
tooltip: {
trigger: "axis",
formatter: function(params) {
params = params[0];
var date = new Date(params.name);
return (
date.getDate() +
"/" +
(date.getMonth() + 1) +
"/" +
date.getFullYear() +
" : " +
params.value[1]
);
},
axisPointer: {
animation: false
}
},
xAxis: {
type: "time",
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: "#fff"
}
},
axisLabel:{
interval:0,
rotate:45,//倾斜度 -90 至 90 默认为0
}
},
yAxis: {
type: "value",
boundaryGap: [0, "100%"],
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: "#fff"
}
}
},
series: [
{
name: "模拟数据",
type: "line",
showSymbol: false,
hoverAnimation: false,
data: data
}
]
};
setInterval(function() {
data.push(randomData());
myChart.setOption(option);
}, 1000);
更多推荐
已为社区贡献3条内容
所有评论(0)