echarts.js文件下载地址:Apache ECharts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM--->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option={
color:["red",'green','blue','yellow','grey','#FA8072'], //使用自己预定义的颜色
tooltip:{ //配置提示框组件
trigger:'axis'
},
legend:{ //配置图例组件
x:300,data:['最高','最低']
},
toolbox:{ //配置工具箱组件
show:true, //设置是否显示工具箱组件
orient:'horizontal', //设置布局方式,默认为水平布局,可选：'horizontal'和'vertical'
//设置水平安放位置,默认为右对齐
//可选：'center','left','right'、{number} (x坐标,单位为px)
x:'right',
y:'top',
color:['#le90ff','#22bb22','#4b0082','d269le'],
backgroundColor:'rgba(0,0,0,0)', //设置工具箱背景颜色
borderColor:'#ccc', //设置工具箱边框颜色
borderWidth:0, //设置工具箱边框线宽,单位为px,默认为0(无边框)
padding:5, //设置工具箱内边距,单位为px,默认各方向内边距为5
showTitle:true,
feature:{
mark:{ //设置标记
show:true,
title:{
mark:'辅助线-开关',
markUndo:'辅助线-删除',
markClear:'辅助线-清空'
},
lineStyle:{width:1,color:'#1e90ff',type:'dashed'}
},
dataZoom:{ //设置数据区域缩放
show:true,
title:{dataZoom:'区域缩放',dataZoomReset:'区域缩放-后退'}
},
dataView:{ //设置数据视图
show:true,title:'数据试图',
readOnly:false,lang:['数据图','关闭','刷新'],
optionToContent:function(opt) {
var axisData=opt.xAxis[0].data;
var series = opt.series;
var table='<table style="width:100%;text-align:center"><tbody><tr>'
+'<td>时间</td>'
+'<td>' + series[0].name+'</td>'
+'<td>' + series[1].name+'</td>'
+'</td>';
for (var i=0,l=axisData.length;i<l;i++) {
table +='<tr>'
+'<td>' + axisData[i] + '</td>'
+'<td>' + series[0].data[i] + '</td>'
+'<td>' + series[1].data[i] + '</td>'
+'</td>';
}
table +='</tbody></table>';
return table;
}
},
magicType:{ //设置动态类型切换
show:true,
title:{
line:'动态类型切换-折线图',
bar:'动态类型切换-柱状图',
stack:'动态类型切换-堆积',
tiled:'动态类型切换-平辅',
},
type:['line','bar','stack','tiled']
},
restore:{ //设置数据重置
show:true,title:'还原',color:'black'
},
saveAsImage:{ //设置导出图片
show:true,title:'保存为图片',
type:'jpeg',lang:['单击本地保存']
},
myTool:{ //设置自定义工具按钮
show:true,title:'自定义扩展方法',
icon:"image://images//girl3.gif",
icon:'image://https://www.qianduange.cn/upload/article/favicon.png',
onclick:function(){alert('广科院,大数据与人工智能学院')}
}
}
},
calculable:true,
dataZoom:{ //设置数据区域缩放
show:true,realtime:true,
start:20,end:80
},
xAxis:[ //配置x轴坐标系
{
type:'category',boundaryGap:false,
data:function() {
var list=[];
for (var i=1;i<=30;i++){ list.push('2020-03-'+i);}
return list;
}()
}
],
yAxis:[ //配置y轴坐标系
{type:'value'}
],
series:[ //配置数据系列
{ //设置数据系列1
name:'最高',type:'line',smooth:true,
data:function() {
var list=[];
for (var i =1;i<=30;i++){
list.push(Math.round(Math.random()*30)+10);
}
return list;
}()
},
{ //设置数据系列2
name:'最低',
type:'line',smooth:true,
data:function(){
var list=[];
for(var i=1;i<=30;i++) {
list.push(Math.round(Math.random()*10));
}
return list;
}()
}
]
};
myChart.setOption(option);
</script>
</body>
</html>