資訊專(zhuān)欄INFORMATION COLUMN
摘要：編寫(xiě)文件我們需要通過(guò)方法初始化一個(gè)實(shí)例然后通過(guò)方法繪圖。初始化實(shí)例設(shè)定圖表的配置項(xiàng)和數(shù)據(jù)柱狀圖銷(xiāo)量襯衫褲子襪子銷(xiāo)量顯示圖表小結(jié)以上就是使用進(jìn)行繪圖的第一個(gè)例子。休息一下，馬上開(kāi)始下一次學(xué)習(xí)
目標(biāo)
使用 ECharts 繪制簡(jiǎn)單的柱狀圖, 示例如下
新建文件夾 note01, 并新建 index.html, index.css, index.css 文件
獲取 echarts
下載源代碼版本, 保存為 ./note01/echarts.js
至此, note01 的目錄結(jié)構(gòu)應(yīng)該是這樣的
./note01/ |---index.html |---index.js |---index.css |---echarts.js
編寫(xiě)一個(gè)普通的 html5 文件即可, 然后引入我們的 js, css 文件
echarts note01
在繪圖前我們需要為 ECharts 準(zhǔn)備一個(gè)具備高寬的 DOM 容器。
main{
width: 600px;
height: 400px;
}
我們需要通過(guò) echarts.init(domElement) 方法初始化一個(gè) echarts 實(shí)例, 然后通過(guò) setOption() 方法繪圖。
"use strict";
// 初始化 echarts 實(shí)例
var myEChart = echarts.init(document.getElementsByTagName("main")[0]);
// 設(shè)定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title:{
text: "柱狀圖"
},
tooltip:{
},
legend:{
data:["銷(xiāo)量"]
},
xAxis:{
data:["襯衫", "褲子", "襪子"]
},
yAxis:{
},
series:[{
name: "銷(xiāo)量",
type: "bar",
data: [5, 36, 20]
}],
};
// 顯示圖表
myEChart.setOption(option);
小結(jié)
以上就是使用 ECharts 進(jìn)行繪圖的第一個(gè)例子。休息一下，馬上開(kāi)始下一次學(xué)習(xí)~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102890.html
摘要：柱狀圖頂部數(shù)據(jù)展示柱狀圖自定義主題柱形圖默認(rèn)參數(shù)最小高度改為默認(rèn)自適應(yīng)柱間距離，默認(rèn)為柱形寬度的，可設(shè)固定值類(lèi)目間柱形距離，默認(rèn)為類(lèi)目間距的，可設(shè)固定值各異柱條邊線柱條邊線圓角，單位，默認(rèn)為柱條邊線線寬，單位，默認(rèn)為默認(rèn)自適應(yīng)，水平布局為， 柱狀圖頂部數(shù)據(jù)展示 itemStyle: { normal: { label: { show: true ...
摘要：深夜學(xué)姐問(wèn)我在中柱狀圖如何自定義頂部亮點(diǎn)先看效果圖我們可以看到圖中圖表不僅有漸變色，同時(shí)柱狀圖頂部位置有一個(gè)不相同的頂部亮點(diǎn)圖片接下來(lái)，我們一起來(lái)實(shí)現(xiàn)一下這個(gè)效果部分部分獲取元素左側(cè)名稱(chēng)列表號(hào) ...
摘要：我們?cè)陂_(kāi)發(fā)應(yīng)用的時(shí)候經(jīng)常美工會(huì)設(shè)計(jì)一些樣式比較特殊的圖表，這對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)會(huì)增加開(kāi)發(fā)量，如下圖就是筆者開(kāi)發(fā)過(guò)程中要求制作的帶漸變色效果的柱狀圖今天在這里教大家如何用原生和如何用圖表開(kāi)發(fā)工具來(lái)實(shí)現(xiàn)。 我們?cè)陂_(kāi)發(fā)web應(yīng)用的時(shí)候經(jīng)常美工會(huì)設(shè)計(jì)一些樣式比較特殊的圖表，這對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)會(huì)...
摘要：需求制作疊加的拆線圖，柱狀圖，雙軸工具代碼交易日柱狀圖動(dòng)畫(huà)延遲成交價(jià)昨收價(jià)成交額成交價(jià)元成交額萬(wàn)元成交價(jià)昨收價(jià)成交額效果圖關(guān)鍵說(shuō)明中可以疊加多組數(shù)據(jù)，要指定中的第二個(gè)軸中的表示的位置，表示在最大值處，默認(rèn)在值一端表示數(shù)值序列是否倒置。 需求 制作疊加的拆線圖，柱狀圖，雙Y軸 工具 echarts 代碼 var xAxisData = []; var data1 = []; var da...
閱讀 3096·2023-04-25 20:43
閱讀 1730·2021-09-30 09:54
閱讀 1600·2021-09-24 09:47
閱讀 2890·2021-09-06 15:02
閱讀 3522·2021-02-22 17:09
閱讀 1245·2019-08-30 15:53
閱讀 1448·2019-08-29 17:04
閱讀 1970·2019-08-28 18:22
