Echart繪制簡(jiǎn)單圖表

Echart.js官網(wǎng)
http://echarts.baidu.com/examples.html

引入ECharts 文件

先從官網(wǎng)下載相應(yīng)的文件锡垄,從script標(biāo)簽中引入

<script src="echarts.min.js"></script>

繪制簡(jiǎn)單圖表

1、html
在靜態(tài)頁(yè)中準(zhǔn)備一個(gè)容器id為main缠捌,設(shè)置寬和高
必須要有寬高才能繪制圖

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

2疑故、js
在js中舌胶,先初始化一個(gè)實(shí)例

var myChart = echarts.init(document.getElementById('main'));

按照官網(wǎng)的示例续扔,寫指定圖表的配置項(xiàng)和數(shù)據(jù)
官網(wǎng)可以找到

var option = {
    title: {
        text: 'ECharts 入門示例'
    },
    tooltip: {},
    legend: {
         data:['銷量']
    },
   xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
   },
   yAxis: {},
   series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
   }]
};

使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。

myChart.setOption(option);

成功預(yù)覽

image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末钠四,一起剝皮案震驚了整個(gè)濱河市盗扒,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌缀去,老刑警劉巖侣灶,帶你破解...
    沈念sama閱讀 217,084評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異缕碎,居然都是意外死亡褥影,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門咏雌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)伪阶,“玉大人,你說(shuō)我怎么就攤上這事处嫌。” “怎么了斟湃?”我有些...
    開封第一講書人閱讀 163,450評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵熏迹,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我凝赛,道長(zhǎng)注暗,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,322評(píng)論 1 293
  • 正文 為了忘掉前任墓猎,我火速辦了婚禮捆昏,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘毙沾。我一直安慰自己骗卜,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,370評(píng)論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著寇仓,像睡著了一般举户。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上遍烦,一...
    開封第一講書人閱讀 51,274評(píng)論 1 300
  • 那天俭嘁,我揣著相機(jī)與錄音,去河邊找鬼服猪。 笑死供填,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的罢猪。 我是一名探鬼主播近她,決...
    沈念sama閱讀 40,126評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼坡脐!你這毒婦竟也來(lái)了泄私?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,980評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤备闲,失蹤者是張志新(化名)和其女友劉穎晌端,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體恬砂,經(jīng)...
    沈念sama閱讀 45,414評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡咧纠,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,599評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了泻骤。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片漆羔。...
    茶點(diǎn)故事閱讀 39,773評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖狱掂,靈堂內(nèi)的尸體忽然破棺而出演痒,到底是詐尸還是另有隱情,我是刑警寧澤趋惨,帶...
    沈念sama閱讀 35,470評(píng)論 5 344
  • 正文 年R本政府宣布鸟顺,位于F島的核電站,受9級(jí)特大地震影響器虾,放射性物質(zhì)發(fā)生泄漏讯嫂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,080評(píng)論 3 327
  • 文/蒙蒙 一兆沙、第九天 我趴在偏房一處隱蔽的房頂上張望欧芽。 院中可真熱鬧,春花似錦葛圃、人聲如沸千扔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)昏鹃。三九已至尚氛,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間洞渤,已是汗流浹背阅嘶。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留载迄,地道東北人讯柔。 一個(gè)月前我還...
    沈念sama閱讀 47,865評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像护昧,于是被迫代替她去往敵國(guó)和親魂迄。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,689評(píng)論 2 354

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

  • JavaScript 資源大全中文版很多程序員應(yīng)該記得 GitHub 上有一個(gè) Awesome - XXX 系列的...
    wwmin_閱讀 3,432評(píng)論 1 92
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,095評(píng)論 25 707
  • 2017年8月5日 星期六 晴 一個(gè)再普通不過(guò)的人惋耙,一段普普通通的人生捣炬,沒(méi)有影視劇扣人心弦的跌宕起伏,平凡人生...
    不想吃的豬閱讀 293評(píng)論 0 1
  • 這是一片猶如仙境般的地方绽榛,天空蔚藍(lán)如鏡湿酸,白云飄蕩,整個(gè)天地間都是在飄蕩著淡淡水霧灭美,那霧氣極為的奇特推溃,飄落下來(lái)卻是不...
    混沌天書閱讀 395評(píng)論 0 0