实例代码：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8"/>
<style>
#container02{
background-color: rgba(0, 0, 255, .2);
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body style="height: 100%; margin: 0">
<div id="container01" style="height: 100%"></div>
<div id="container02"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container01");
var myChart = echarts.init(dom);
var app = {};
option = null;
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
}
}
var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
data.push(randomData());
}
let handleTag=false;
let handleData=null;
let callback=function(params){
console.log('code',params);
}
option = {
title: { //图表名
text: '动态数据 + 时间坐标轴'
},
tooltip: { //浮框
show:true,
trigger: 'axis',
alwaysShowContent:true,
triggerOn:'mousemove',
formatter: function (params) {
console.log(params);
handleData=params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
},
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
axisPointer:{
show:false,
status:'hide',
type:'line',
handle:{
show:true,
color:"hsl(206,100%,52%)"
}
},
brush: {
xAxisIndex: 'all',
brushLink: 'all',
outOfBrush: {
colorAlpha: 0.1
}
},
xAxis: [{ //x 轴
type: 'time',
axisPointer:{
show:true,
triggerOn:'click',
},
axisPointer:{
show:true,
},
splitLine: {
show: false
}
}],
yAxis: { //y 轴
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{ //数据点
name: '模拟数据',
type: 'line',
// showSymbol: false,
hoverAnimation: false,
data: data,
smooth: true,
symbol: 'circle',
symbolSize: 3,
sampling: 'average',
markLine:{
data:[
{
name: 'Y 轴值为 100 的水平线',
xAxis: '1998-07-09'
}
]
},
markPoint:{
data:[{
name: '固定 x 像素位置',
yAxis: 10,
x: '90%'
}]
},
itemStyle: {
normal: {
color: '#8ec6ad'
}
}
}]
};
// setInterval(function () {
// for (var i = 0; i < 5; i++) {
// data.shift();
// data.push(randomData());
// }
// myChart.setOption({
// series: [{
// data: data
// }]
// });
// }, 1000);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
console.log(myChart);
/*
* 默认显示
* */
myChart.dispatchAction({
type:'showTip',//默认显示江苏的提示框
seriesIndex: 0,//这行不能省
dataIndex:0
});
myChart.on('click',function(params){
console.log("click");
});
myChart.getZr().on('mousedown',function(params){
try{
console.log(params.target.style.fill);
console.log(params.target.style.fill=="hsl(206,100%,52%)");
if(params.target.style.fill=="hsl(206,100%,52%)"){
handleTag=true;
}
}catch(e){}
});
myChart.getZr().on('mouseup',function(params){
console.log(handleTag);
if(handleTag){
console.log(handleData);
//提交数据
console.log('提交数据');
handleTag=false;
}
});
</script>
</body>
</html>
