【移動應用開發(fā)技術】怎么用jQuery插件Echarts實現(xiàn)雙軸圖效果_第1頁
【移動應用開發(fā)技術】怎么用jQuery插件Echarts實現(xiàn)雙軸圖效果_第2頁
【移動應用開發(fā)技術】怎么用jQuery插件Echarts實現(xiàn)雙軸圖效果_第3頁
【移動應用開發(fā)技術】怎么用jQuery插件Echarts實現(xiàn)雙軸圖效果_第4頁
【移動應用開發(fā)技術】怎么用jQuery插件Echarts實現(xiàn)雙軸圖效果_第5頁
免費預覽已結束,剩余2頁可下載查看

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權,請進行舉報或認領

文檔簡介

【移動應用開發(fā)技術】怎么用jQuery插件Echarts實現(xiàn)雙軸圖效果

這篇文章主要介紹“怎么用jQuery插件Echarts實現(xiàn)雙軸圖效果”的相關知識,在下通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“怎么用jQuery插件Echarts實現(xiàn)雙軸圖效果”文章能幫助大家解決問題。1、問題描述:利用Echarts制作一個折線圖,條件是:三條折線,一條代表可利用率,另外兩條代表數(shù)量。2、實現(xiàn)源碼:<!DOCTYPE

html>

<html>

<head>

<meta

charset="UTF-8">

<title>echarts-雙軸圖</title>

<script

type="text/javascript"

src="jquery-1.4.2.min.js"

></script>

<script

type="text/javascript"

src="echarts.js"

></script>

<style>

body,html{

width:

99%;

height:

99%;

font-family:

"微軟雅黑";

font-size:

12px;

}

#double{

width:

100%;

height:

100%;

font-family:

"agency

fb";

font-weight:

bolder;

}

</style>

<script>

$(function(){

var

chart

=

document.getElementById('double');

var

echart

=

echarts.init(chart);

var

option

=

{

title

:

{

text:

'可利用率',

subtext:

'',

x:

'center',

align:

'right'

},

grid:

{

bottom:

80

},

tooltip

:

{

trigger:

'axis',

axisPointer:

{

animation:

false

},

formatter:

function

(params)

{

var

res

=

params[0].name;

for

(var

i

=

0,

l

=

params.length;

i

<

l;

i++)

{

if(i==0)

{

res

+=

'<br/>'

+

params[i].seriesName

+

'

:

'

+

params[i].value

+

"%";

}

else

{

res

+=

'<br/>'

+

params[i].seriesName

+

'

:

'

+

params[i].value;

}

}

return

res;

}

},

legend:

{

data:['可利用率','A','B'],

x:

'left'

},

xAxis

:

[

{

type

:

'category',

axisLabel:

{

rotate:

45

},

boundaryGap

:

false,

axisLine:

{onZero:

false},

data

:

['2016年1月',

'2016年2月',

'2016年3月',

'2016年4月',

'2016年5月','2016年6月','2016年7月','2016年8月','2016年9月','2016年10月','2016年11月','2016年12月'].map(function

(str)

{

return

str.replace('

',

'\n')

})

}

],

yAxis:

[

{

name:

'可利用率',

type:

'value',

max:

100,

axisLabel:

{

show:

true,

interval:

'auto',

formatter:

'{value}

%'

}

},

{

name:

'A',

nameLocation:

'start',

type:

'value',

inverse:

true

},

{

name:

'B',

nameLocation:

'start',

type:

'value',

inverse:

true

}

],

series:

[

{

name:'可利用率',

type:'line',

hoverAnimation:

false,

itemStyle:

{

normal:

{

label

:

{

show:false,

position:'top',

formatter:'{c}

%'

}

}

},

areaStyle:

{

normal:

{}

},

lineStyle:

{

normal:

{

width:

1

}

},

data:[12,78,34,67,88,45,65,77,31,21,90,54]

},

{

name:'A',

type:'line',

yAxisIndex:1,

hoverAnimation:

false,

areaStyle:

{

normal:

{}

},

lineStyle:

{

normal:

{

width:

1

}

},

data:

[1,4,5,8,3,2,7,6,9,2,4,3]

},

{

name:'B',

type:'line',

yAxisIndex:1,

hoverAnimation:

false,

areaStyle:

{

normal:

{}

},

lineStyle:

{

normal:

{

width:

1

}

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論