ECharts实现动态曲线(上)
文章目录
- 上手ECharts
- 方法
- 参数
- grid组件(网格组件)
- X轴
- Y轴
- tooltip组件(提示框组件)
- 效果图
- 实现
- 代码结构
- 详细代码
间接用过ECharts。
之所以说“间接”，是因为内部组件库实际是将ECharts再封装一次，然后拿出来给大家使用。然而，经此番“封装”，这个内部组件库好像不怎么友好。
“想要实现XXX功能，有这样的一个接口么？”
“呃，目前没有提供此类接口”
“报告，组件里有个bug”
不仅功能接口“缺斤少两”，还得帮忙找bug。苦，但不哭不闹，习惯就好。
到ECharts官网瞧瞧，不论是文档还是实例，保你满意。
上手ECharts
方法
echarts.init(dom)
script标签引入echarts.min.js，即可获取全局对象echarts。调用该对象的init方法，返回一个echartsInstance，之后我们所有的工作都是围绕着这个实例。echartsInstance.setOption(option)
设置初始化|修改 实例的各项参数。
echartsInstance.setOption(option1);
echartsInstance.setOption(option2);
option2、option1会合并，且option2优先，“有则改之，无则加勉”。
参数
grid组件(网格组件)
gridshow
是否显示网格。true则显示，false则不显示。默认为falseborderWidth
设置网格边框的宽度。left|right|top|bottom
grid组件离容器左、右、上、下侧的距离
X轴
xAxisdata
显示在轴上的数据axisLabelrotate
数据的旋转角度
axisTickalignWithLabel
true时，保证刻度线和数据对齐
Y轴
yAxismin
轴上的最小刻度max
轴上的最大刻度
tooltip组件(提示框组件)
tooltipaxisPointer
坐标指示器，用来显示点的坐标值。坐标指示器就是一个tooltip组件。type
指示器类型，有四种，line|shadow|cross|none
trigger
每个轴上都有个坐标指示器，且默认不显示。
将trigger设置为"axis"可以让它们显示出来。而至于显示哪个轴的坐标指示器，坐标系会自动选择。
这次就用ECharts来实现一个动态曲线，尝个鲜。
效果图
实现
逻辑挺简单的。
MyChart.js封装了数据生成器，其中createTimes用来生成X轴的时间数据，createValues用来生成Y轴的带宽利用率数据。
一旦点击“开始”，将启动一个定时器。每隔1秒，数据生成器会生产出新的的X轴、Y轴数据，随后这些新数据将被更新在图表中，从而实现动态曲线。
点击“结束”，定时器停止，停止生产新数据，图表也停止刷新。
代码结构
详细代码
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态曲线</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="myChart"></div>
<div class="container">
<div class="buttons">
<div class="button" id="start">开始</div>
<div class="button" id="end"> 结束</div>
</div>
</div>
<script src="./MyButton.js"></script>
<script src="./MyChart.js"></script>
<script src="./index.js"></script>
</body>
</html>
//index.js
initButtons();
const myChart = new MyChart(document.getElementById("myChart"));
myChart.init();
function initButtons(){
var timer;
const startBtn = new MyButton(document.querySelector("#start"));
startBtn.addEventListener("click",function(){
timer = startTimer();
startBtn.disable();
});
const endBtn = new MyButton(document.querySelector("#end"));
endBtn.addEventListener("click",function(){
closeTimer(timer);
startBtn.enable();
});
}
function startTimer(){
return timer = setInterval(function(){
myChart.update();
},1000,myChart);
}
function closeTimer(timer){
clearInterval(timer)
}
//MyChart.js
(function(win){
function MyChart(elm){
this.dotNum = 10;
this.interval = 1000;
this.lastStartTime = undefined;
this.lastValues = [];
this.elm = elm;
this.chart = echarts.init(elm);
this.chart.gap = 40;
}
MyChart.prototype.init = function(){
const times = createTimes(this).map(t => formatTime(t));
const values = [];
const gap = this.chart.gap;
const option = {
grid:{
bottom:50,
top:gap,
left:gap,
right:gap
},
xAxis: {
type: 'category',
data:times,
axisLabel:{
rotate:45
},
axisTick: {
alignWithLabel: true
},
name:"时间"
},
yAxis: {
type: 'value',
min:0,
max:1,
name:"带宽利用率"
},
series: [{
data:values,
type: 'line',
smooth: true
}],
tooltip: {
trigger: 'axis',
axisPointer: {
type:'line'
}
}
};
this.chart.setOption(option);
}
MyChart.prototype.update = function(){
const times = createTimes(this);
const values = createValues(this);
const formatedTimes = times.map(t => formatTime(new Date(t)));
console.log(formatedTimes);
this.chart.setOption({
xAxis:{
data:formatedTimes
},
series:[{
data:values
}]
});
}
function createTimes(myChart){
let {dotNum,interval,lastStartTime} = myChart;
let startTime = lastStartTime?lastStartTime:new Date().getTime();
lastStartTime = startTime + interval;
let times = [];
for(var i=0;i<dotNum;++i){
var time = new Date(startTime+i*interval);
times.push(time);
}
return times;
}
function createValues(myChart){
let {dotNum,lastValues} = myChart;
let values;
if(lastValues.length === 0){
values = [];
for(var i=0;i<dotNum;++i){
var value = parseFloat(Math.random().toFixed(2));
values.push(value);
}
}else {
values = lastValues.slice(1);
values.push(parseFloat(Math.random().toFixed(2)));
}
myChart.lastValues = values.slice();
return values;
}
function formatTime(time){
const hour = time.getHours();
const min = time.getMinutes();
const sec = time.getSeconds();
const h = hour<10 ? "0"+hour : hour;
const m = min<10 ? "0"+min : min;
const s = sec<10 ? "0"+sec : sec;
return h+":"+m+":"+s;
}
win.MyChart = MyChart;
}(window))
//MyButton.js
(function(win){
function MyButton(elm){
this.elm = elm;
}
MyButton.prototype.addEventListener = function(type,handler){
if(this.elm.addEventListener){
this.elm.addEventListener(type,handler,false);
}else {
this.elm["on"+type] = handler;
}
}
MyButton.prototype.disable = function(){
this.elm.classList.add("disabled");
}
MyButton.prototype.enable = function(){
this.elm.classList.remove("disabled");
}
win.MyButton = MyButton;
}(window));
//index.css
#myChart{
display:inline-block;
width:400px;height:200px;
border:1px solid lightgray;
border-right:none;
vertical-align:middle;
}
.container{
display:inline-block;
width:80px;height:200px;
border:1px solid lightgray;
border-left:none;
margin:-5px;
vertical-align:middle;
}
.buttons{
display:table-cell;
width:inherit;height: inherit;
vertical-align: middle;
}
.button{
font-size:0.75em;
padding:.3em;
background-color:rgba(0,0,255,.5);
border:1px solid transparent;
border-radius:.5em;
box-shadow:1px 1px 1px black;
text-align:center;
margin:1em;
}
.button:hover{
cursor:pointer;
background-color:rgba(0,0,255,1);
color:white;
}
.disabled{
background-color:lightgray;
color:lavender;
box-shadow:1px 1px 1px lightslategray;
}
.disabled:hover{
cursor:not-allowed;
background-color:lightgray;
color:lavender;
}