ECharts 學習筆記01, 柱狀圖

KunMinX 發布于2019-08-23 16:18 / 1726人閱讀

摘要：編寫文件我們需要通過方法初始化一個實例然后通過方法繪圖。初始化實例設定圖表的配置項和數據柱狀圖銷量襯衫褲子襪子銷量顯示圖表小結以上就是使用進行繪圖的第一個例子。休息一下，馬上開始下一次學習

目標

使用 ECharts 繪制簡單的柱狀圖, 示例如下

搭建環境

新建文件夾 note01, 并新建 index.html, index.css, index.css 文件

獲取 echarts
下載源代碼版本, 保存為 ./note01/echarts.js

至此, note01 的目錄結構應該是這樣的

./note01/
 |---index.html
 |---index.js
 |---index.css
 |---echarts.js

編寫 index.html

編寫一個普通的 html5 文件即可, 然后引入我們的 js, css 文件




    
    echarts note01

編寫 css 文件

在繪圖前我們需要為 ECharts 準備一個具備高寬的 DOM 容器。

main{
    width: 600px;
    height: 400px;
}

編寫 js 文件

我們需要通過 echarts.init(domElement) 方法初始化一個 echarts 實例, 然后通過 setOption() 方法繪圖。

"use strict";
// 初始化 echarts 實例
var myEChart = echarts.init(document.getElementsByTagName("main")[0]);

// 設定圖表的配置項和數據
var option = {
    title:{
        text: "柱狀圖"
    },
    tooltip:{

    },
    legend:{
        data:["銷量"]
    },
    xAxis:{
        data:["襯衫", "褲子", "襪子"]
    },
    yAxis:{

    },
    series:[{
        name: "銷量",
        type: "bar",
        data: [5, 36, 20]
    }],
};

// 顯示圖表
myEChart.setOption(option);

小結

以上就是使用 ECharts 進行繪圖的第一個例子。休息一下，馬上開始下一次學習~

云服務器 GPU云服務器柱狀圖畫柱狀圖柱狀圖各種圖形 mpandroidchart柱狀圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102890.html

Echarts使用筆記

摘要：柱狀圖頂部數據展示柱狀圖自定義主題柱形圖默認參數最小高度改為默認自適應柱間距離，默認為柱形寬度的，可設固定值類目間柱形距離，默認為類目間距的，可設固定值各異柱條邊線柱條邊線圓角，單位，默認為柱條邊線線寬，單位，默認為默認自適應，水平布局為，柱狀圖頂部數據展示 itemStyle: { normal: { label: { show: true ...

geekidentity 2019-08-19 17:23 評論0 收藏0
深夜學姐問我在Vue中Echarts柱狀圖如何自定義頂部亮點

摘要：深夜學姐問我在中柱狀圖如何自定義頂部亮點先看效果圖我們可以看到圖中圖表不僅有漸變色，同時柱狀圖頂部位置有一個不相同的頂部亮點圖片接下來，我們一起來實現一下這個效果部分部分獲取元素左側名稱列表號 ...

Blackjun 2021-10-11 10:59 評論0 收藏0
手把手教你用echarts和SovitChart開發帶漸變色的柱狀圖

摘要：我們在開發應用的時候經常美工會設計一些樣式比較特殊的圖表，這對于前端開發人員來說會增加開發量，如下圖就是筆者開發過程中要求制作的帶漸變色效果的柱狀圖今天在這里教大家如何用原生和如何用圖表開發工具來實現。我們在開發web應用的時候經常美工會設計一些樣式比較特殊的圖表，這對于前端開發人員來說會...

RaoMeng 2021-09-10 10:50 評論0 收藏0
echarts拆線圖和柱狀圖疊加，雙Y軸，動畫延時

摘要：需求制作疊加的拆線圖，柱狀圖，雙軸工具代碼交易日柱狀圖動畫延遲成交價昨收價成交額成交價元成交額萬元成交價昨收價成交額效果圖關鍵說明中可以疊加多組數據，要指定中的第二個軸中的表示的位置，表示在最大值處，默認在值一端表示數值序列是否倒置。需求制作疊加的拆線圖，柱狀圖，雙Y軸工具 echarts 代碼 var xAxisData = []; var data1 = []; var da...

LeexMuller 2019-08-23 10:52 評論0 收藏0