EChart绘制风速风向曲线分析图

　　1、获取ECharts

　　在ECharts的GitHub上下载最新的release版本，解压出来的文件夹里的dist目录里可以找到最新版本的echarts库。

　　2、引入ECharts

　　像普通的JavaScript库一样用script标签引入。

　　1<!DOCTYPEhtml>

　　2<html>

　　3<head>

　　4<metacharset="utf-8">

5

　　6<scriptsrc="echarts.min.js"></script>

　　7</head>

　　8</html>

　　3、绘制图表

　　1<body>

2

　　3<divid="main"style="width:600px;height:400px;"></div>

　　4</body>

　　然后就可以通过echarts.init方法初始化一个echarts实例并通过setOption方法生成一个简单的柱状图，下面是完整代码。

　　1<!DOCTYPEhtml>

　　2<html>

　　3<head>

　　4<metacharset="utf-8">

　　5<title>ECharts</title>

6

　　7<scriptsrc="echarts.min.js"></script>

　　8</head>

　　9<body>

10

　　11<divid="main"style="width:600px;height:400px;"></div>

　　12<scripttype="text/javascript">

　　13//基于准备好的dom，初始化echarts实例

　　14vardata=[

　　15[

　　161483488000000,

　　176.19,

　　180.9545

　　19],

　　20[

　　211483574400000,

　　226.19,

　　230.2303

　　24],

　　25[

　　261483660800000,

　　273.19,

　　280

　　29],

　　30[

　　311483747200000,

　　326.19,

　　330

　　34],

　　35[

　　361483833600000,

　　376.19,

　　384

　　39],

　　40[

　　411483920000000,

　　4211.19,

　　432

　　44],

　　45[

　　461484006400000,

　　4717.19,

　　484.7124

　　49]

　　50];

　　51//数据参数顺序

　　52vardims={

　　53time:0,

　　54windSpeed:1,

　　55R:2

　　56};

　　57//箭头大小

　　58vararrowSize=12;

　　59//方向绘制

　　60functionrenderArrow(param,api){

　　61varpoint=api.coord([

　　62api.value(dims.time),

　　63api.value(dims.windSpeed)

　　64]);

　　66return{

　　67type:'path',

　　68shape:{

　　69pathData:'M3116l-15-15v9h-26v12h26v9z',

　　70x:-arrowSize/2,

　　71y:-arrowSize/2,

　　72width:arrowSize,

　　73height:arrowSize

　　74},

　　75rotation:api.value(dims.R),

　　76position:point,

　　77style:api.style({

　　78stroke:'#555',

　　79lineWidth:1

　　80})

　　81};

　　82}

　　84varoption={

　　85title:{

　　86text:'风速风向数据分析图',

　　87left:'center'

　　88},

　　89tooltip:{

　　90trigger:'axis',

　　91formatter:function(params){

　　92return[

　　93echarts.format.formatTime('yyyy-MM-dd',params[0].value[dims.time])

　　94+''+echarts.format.formatTime('hh:mm',params[0].value[dims.time]),

　　95'风速：'+params[0].value[dims.windSpeed],

　　96'风向：'+params[0].value[dims.R]

　　97].join('<br>');

　　98}

　　99},

　　100grid:{

　　101top:40,

　　102bottom:60

　　103},

　　104xAxis:{

　　105type:'time'

　　106},

　　107yAxis:[{

　　108name:'风速（节）',

　　109nameLocation:'middle',

　　110nameGap:35,

　　111axisLine:{

　　112lineStyle:{

　　113color:'#666'

　　114}

　　115},

　　116splitLine:{

　　117lineStyle:{

　　118color:'#ddd'

　　119}

　　120}

　　121},{

　　122axisLine:{show:false},

　　123axisTick:{show:false},

　　124axisLabel:{show:false},

　　125splitLine:{show:false}

　　126}],

　　127visualMap:{

　　128type:'piecewise',

　　129orient:'horizontal',

　　130left:'center',

　　131bottom:10,

　　132pieces:[{

　　133gte:17,

　　134color:'#D33C3E',

　　135label:'大风（>=17节）'

　　136},{

　　137gte:11,

　　138lt:17,

　　139color:'#f4e9a3',

　　140label:'中风（11~17节）'

　　141},{

　　142lt:11,

　　143color:'#18BF12',

　　144label:'微风（小于11节）'

　　145}],

　　146seriesIndex:0,

　　147dimension:1

　　148},

　　149dataZoom:[{

　　150type:'inside',

　　151xAxisIndex:0,

　　152minSpan:5

　　153}],

　　154series:[{

　　155type:'custom',

　　156renderItem:renderArrow,

　　157encode:{

　　158x:dims.time,

　　159y:dims.windSpeed

　　160},

　　161data:data,

　　162z:10

　　163},{

　　164type:'line',

　　165symbol:'none',

　　166encode:{

　　167x:dims.time,

　　168y:dims.windSpeed

　　169},

　　170lineStyle:{

　　171normal:{

　　172color:'#aaa',

　　173type:'dotted'

　　174}

　　175},

　　176data:data,

　　177z:1

　　178}]

　　179};

　　180

　　181myChart.setOption(option);

　　182

　　183//窗口变化更改Chart大小

　　184window.onresize(function(){

　　185myChart.resize();

　　186});

　　187</script>

　　188</body>

　　189</html>

　　运行测试图表如下:

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56627.shtml