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