Echarts插件的使用

一方咆、首先引入echarts-all.js文件到項(xiàng)目頁面中去

二露氮、項(xiàng)目中放置圖表的html文件

<div class="zjzl" style="margin-top:80px;">

? ? ? ? <div class="floatzs fixwid"><div class="flot-chart-content" style="height:400px;width: 1500px" id="flot-line-chart"></div></div>

</div>

? ??直接在容器中控制圖表的高度和寬度即可峡碉。

三瞎惫、js書寫及配置項(xiàng)的說明

? ??<script type="text/javascript">

$(function() {

? ? //實(shí)例化圖表

? ? var lineChart = echarts.init(document.getElementById("flot-line-chart"));

? ? var lineoption = {

? ? ? ? title : {

? ? ? ? ? ? text: '充值渠道分析圖'

? ? ? ? },

? ? ? ? tooltip : {

? ? ? ? ? ? trigger: 'axis'

? ? ? ? },

? ? ? ? legend: {? ? //圖例組件

? ? ? ? ? ? left: 'left',? //控制圖例顯示方向

? ? ? ? ? ? data: ['充值用戶數(shù)', '管理員充值', '轉(zhuǎn)賬匯款', '網(wǎng)銀支付', '平臺(tái)支付', '快捷支付', '充值卡支付', '掃碼支付', '手機(jī)支付', '活動(dòng)獎(jiǎng)勵(lì)', '積分兌換'], //定義都有哪些圖例顯示

? ? ? ? ? ? selected:{

? ? ? ? ? ? ? ? '充值用戶數(shù)':true,

? ? ? ? ? ? ? ? '管理員充值':true,

? ? ? ? ? ? ? ? '轉(zhuǎn)賬匯款':false,

? ? ? ? ? ? ? ? '網(wǎng)銀支付':false,

? ? ? ? ? ? ? ? '平臺(tái)支付':false,

? ? ? ? ? ? ? ? '快捷支付':false,

? ? ? ? ? ? ? ? '充值卡支付':false,

? ? ? ? ? ? ? ? '掃碼支付':false,

? ? ? ? ? ? ? ? '手機(jī)支付':false,

? ? ? ? ? ? ? ? '活動(dòng)獎(jiǎng)勵(lì)':false,

? ? ? ? ? ? ? ? '積分兌換':false,

? ? ? ? ? ? }? ? //設(shè)置為false的代表初始化的時(shí)候隱藏，只有點(diǎn)擊的時(shí)候折線才出來顯示

? ? ? ? },

? ? ? ? //右上角工具條

? ? ? ? toolbox: {

? ? ? ? ? ? show : true,

? ? ? ? ? ? feature : {

? ? ? ? ? ? ? ? mark : {show: true},

? ? ? ? ? ? ? ? dataView : {show: true, readOnly: false},

? ? ? ? ? ? ? ? magicType : {show: true, type: ['line', 'bar']},

? ? ? ? ? ? ? ? restore : {show: true},

? ? ? ? ? ? ? ? saveAsImage : {show: true}

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? calculable : false,

? ? ? ? xAxis : [

? ? ? ? ? ? {

? ? ? ? ? ? ? ? type : 'category',

? ? ? ? ? ? ? ? boundaryGap : false,

? ? ? ? ? ? ? ? data : JSON.parse('["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"]')? //橫坐標(biāo)（月份）

? ? ? ? ? ? }

? ? ? ? ],

? ? ? ? yAxis : [

? ? ? ? ? ? {

? ? ? ? ? ? ? ? type : 'value',

? ? ? ? ? ? ? ? axisLabel : {

? ? ? ? ? ? ? ? ? ? formatter: '{value}'

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ],

? ? ? ? series : [

? ? ? ? ? ? {

? ? ? ? ? ? ? ? name:'充值用戶數(shù)',

? ? ? ? ? ? ? ? type:'line',

? ? ? ? ? ? ? ? data:JSON.parse("[983,721,871,990,1069,1209,1305,1322,1256,1154,1112,1059]"),

? ? ? ? ? ? ? ? markPoint : {

? ? ? ? ? ? ? ? ? ? data : [

? ? ? ? ? ? ? ? ? ? ? ? {type : 'max', name: '最大值'},

? ? ? ? ? ? ? ? ? ? ? ? {type : 'min', name: '最小值'}

? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? name:'管理員充值',

? ? ? ? ? ? ? ? type:'line',

? ? ? ? ? ? ? ? data:JSON.parse("[79704,44050,57647,51128,70335,75272,65962,67807,72766,75978,114158,146508]"),

? ? ? ? ? ? ? ? markPoint : {

? ? ? ? ? ? ? ? ? ? data : [

? ? ? ? ? ? ? ? ? ? ? ? {type : 'max', name: '最大值'},

? ? ? ? ? ? ? ? ? ? ? ? {type : 'min', name: '最小值'}

? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? name:'轉(zhuǎn)賬匯款',

? ? ? ? ? ? ? ? type:'line',

? ? ? ? ? ? ? ? data:JSON.parse("[0,0,0,0,0,1,0,0,0,0,0,0]"),

? ? ? ? ? ? ? ? markPoint : {

? ? ? ? ? ? ? ? ? ? data : [

? ? ? ? ? ? ? ? ? ? ? ? {type : 'max', name: '最大值'},

? ? ? ? ? ? ? ? ? ? ? ? {type : 'min', name: '最小值'}

? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? },

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? name:'網(wǎng)銀支付',

? ? ? ? ? ? ? ? type:'line',//'bar'柱狀圖

? ? ? ? ? ? ? ? data:JSON.parse("[110044,78428,68683,60068,55417,56340,77075,64883,49924,57333,56631,45331]"),

? ? ? ? ? ? ? ? markPoint : {

? ? ? ? ? ? ? ? ? ? data : [

? ? ? ? ? ? ? ? ? ? ? ? {type : 'max', name: '最大值'},

? ? ? ? ? ? ? ? ? ? ? ? {type : 'min', name: '最小值'}

? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? name:'平臺(tái)支付',

? ? ? ? ? ? ? ? type:'line',

? ? ? ? ? ? ? ? data:JSON.parse("[7640,3030,3290,4695,6474,11037,5639,10667,11140,11009,19363,19547]"),

? ? ? ? ? ? ? ? markPoint : {

? ? ? ? ? ? ? ? ? ? data : [

? ? ? ? ? ? ? ? ? ? ? ? {type : 'max', name: '最大值'},

? ? ? ? ? ? ? ? ? ? ? ? {type : 'min', name: '最小值'}

? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? name:'快捷支付',

? ? ? ? ? ? ? ? type:'line',

? ? ? ? ? ? ? ? data:JSON.parse("[32506,18185,21635,19973,16158,3479,0,0,0,0,0,0]"),

? ? ? ? ? ? ? ? markPoint : {

? ? ? ? ? ? ? ? ? ? data : [

? ? ? ? ? ? ? ? ? ? ? ? {type : 'max', name: '最大值'},

? ? ? ? ? ? ? ? ? ? ? ? {type : 'min', name: '最小值'}

? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? name:'充值卡支付',

? ? ? ? ? ? ? ? type:'line',

? ? ? ? ? ? ? ? data:JSON.parse("[6940,3300,4950,3550,4330,7940,4910,3820,4280,6230,1840,1770]"),

? ? ? ? ? ? ? ? markPoint : {

? ? ? ? ? ? ? ? ? ? data : [

? ? ? ? ? ? ? ? ? ? ? ? {type : 'max', name: '最大值'},

? ? ? ? ? ? ? ? ? ? ? ? {type : 'min', name: '最小值'}

? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? name:'掃碼支付',

? ? ? ? ? ? ? ? type:'line',

? ? ? ? ? ? ? ? data:JSON.parse("[215634,150567,196881,240088,224504,231833,301198,278504,271896,312199,364621,314737]"),

? ? ? ? ? ? ? ? markPoint : {

? ? ? ? ? ? ? ? ? ? data : [

? ? ? ? ? ? ? ? ? ? ? ? {type : 'max', name: '最大值'},

? ? ? ? ? ? ? ? ? ? ? ? {type : 'min', name: '最小值'}

? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? name:'手機(jī)支付',

? ? ? ? ? ? ? ? type:'line',

? ? ? ? ? ? ? ? data:JSON.parse("[50398,34254,46416,66275,70673,64320,91509,140628,158441,101461,68432,43693]"),

? ? ? ? ? ? ? ? markPoint : {

? ? ? ? ? ? ? ? ? ? data : [

? ? ? ? ? ? ? ? ? ? ? ? {type : 'max', name: '最大值'},

? ? ? ? ? ? ? ? ? ? ? ? {type : 'min', name: '最小值'}

? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? name:'活動(dòng)獎(jiǎng)勵(lì)',

? ? ? ? ? ? ? ? type:'line',

? ? ? ? ? ? ? ? data:JSON.parse("[0,0,0,0,0,0,0,0,0,0,0,0]"),

? ? ? ? ? ? ? ? markPoint : {

? ? ? ? ? ? ? ? ? ? data : [

? ? ? ? ? ? ? ? ? ? ? ? {type : 'max', name: '最大值'},

? ? ? ? ? ? ? ? ? ? ? ? {type : 'min', name: '最小值'}

? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? name:'積分兌換',

? ? ? ? ? ? ? ? type:'line',

? ? ? ? ? ? ? ? data:JSON.parse("[11,0,20,100,127,219,134,441,140,313,313,178]"),

? ? ? ? ? ? ? ? markPoint : {

? ? ? ? ? ? ? ? ? ? data : [

? ? ? ? ? ? ? ? ? ? ? ? {type : 'max', name: '最大值'},

? ? ? ? ? ? ? ? ? ? ? ? {type : 'min', name: '最小值'}

? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ]

? ? };

? ? lineChart.setOption(lineoption);

</script>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末胎源，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子屿脐，更是在濱河造成了極大的恐慌涕蚤，老刑警劉巖，帶你破解...
    沈念sama閱讀 221,406評(píng)論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件的诵，死亡現(xiàn)場離奇詭異万栅，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)西疤，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,395評(píng)論 3贊 398
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門烦粒，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人代赁，你說我怎么就攤上這事扰她。” “怎么了芭碍？”我有些...
    開封第一講書人閱讀 167,815評(píng)論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵徒役，是天一觀的道長。 經(jīng)常有香客問我窖壕，道長忧勿，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 59,537評(píng)論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任瞻讽，我火速辦了婚禮鸳吸，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘速勇。我一直安慰自己晌砾，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,536評(píng)論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布快集。 她就那樣靜靜地躺著贡羔，像睡著了一般。 火紅的嫁衣襯著肌膚如雪个初。 梳的紋絲不亂的頭發(fā)上乖寒，一...
    開封第一講書人閱讀 52,184評(píng)論 1贊 308
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音院溺，去河邊找鬼楣嘁。 笑死，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的逐虚。 我是一名探鬼主播聋溜，決...
    沈念sama閱讀 40,776評(píng)論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼叭爱！你這毒婦竟也來了撮躁？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,668評(píng)論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤买雾，失蹤者是張志新（化名）和其女友劉穎把曼，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體漓穿，經(jīng)...
    沈念sama閱讀 46,212評(píng)論 1贊 319
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡嗤军，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,299評(píng)論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了晃危。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片叙赚。...
    茶點(diǎn)故事閱讀 40,438評(píng)論 1贊 352
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖僚饭，靈堂內(nèi)的尸體忽然破棺而出震叮，到底是詐尸還是另有隱情，我是刑警寧澤浪慌，帶...
    沈念sama閱讀 36,128評(píng)論 5贊 349
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布冤荆，位于F島的核電站，受9級(jí)特大地震影響权纤，放射性物質(zhì)發(fā)生泄漏钓简。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,807評(píng)論 3贊 333
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一汹想、第九天 我趴在偏房一處隱蔽的房頂上張望外邓。 院中可真熱鬧，春花似錦古掏、人聲如沸损话。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,279評(píng)論 0贊 24
  • 一樁弒父案槽唾，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽丧枪。三九已至，卻和暖如春庞萍，著一層夾襖步出監(jiān)牢的瞬間拧烦，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,395評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工钝计， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留恋博，地道東北人齐佳。 一個(gè)月前我還...
    沈念sama閱讀 48,827評(píng)論 3贊 376
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像债沮，于是被迫代替她去往敵國和親炼吴。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,446評(píng)論 2贊 359

推薦閱讀更多精彩內(nèi)容