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>
