2. 程式人生 > >echarts圖表外掛的使用總結

echarts圖表外掛的使用總結

阿新 • • 發佈：2018-12-16

一、簡介

1.echarts一個純 Javascript 的圖表庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可互動，可高度個性化定製的資料視覺化圖表。
         ECharts 3 中更是加入了更多豐富的互動功能以及更多的視覺化效果，並且對移動端做了深度的優化。

二、下載

1.有精簡版、完整版等等，可以在ECharts官網

上下載，下載的檔案為echarts.min.js或echarts.js等等。
在這裡插入圖片描述
2.下載完成後我們需要在HTML頁面中引入echarts.min.js檔案:


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

三、使用方法

echarts的使用方法參考官網的配置項手冊裡面包含了一些屬性的設定如title標題，工具欄等都有詳細的說明，並以json格式顯示:
在這裡插入圖片描述

四、例項

1.我們通過設定一個容器，如div，並且給這個這個容器設定固定的寬度和高度，echarts圖表會自適應容器,並定義一個變數用來接收echarts.init(‘獲取到的元素’)方法定義的圖表:

<div class="lineDraw"></div>
    <script>
        var lineDraw = echarts.init(document.getElementsByClassName("lineDraw")[0]);
   </script>

2.我們可以通過一個option來接收echarts設定的配置項內容，這是一個案例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <
 
title>echarts</title>
    <script src="js/echarts.min.js"></script>
    <style>
        .lineDraw {
            height: 600px;
            width: 800px;
        }
    </style>
</head>

<body>
    <div class="lineDraw"></div>
    <script>
        var lineDraw = echarts.init(document.getElementsByClassName("lineDraw")[0]);
        option = {
            title: {
                x: 'left',
                text: '機票價格走勢圖',
                textStyle: {
					fontSize: '18',
					color: '#4c4c4c',
					fontWeight: 'bolder'
				}
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage:{
            			show:true
            		}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['12-01', '12-10', '12-20', '12-30', '01-01', '01-10', '01-20', '01-30', '02-01', '02-10',
                    '02-20', '02-30'
                ],
                axisLabel: {
                    interval: 0
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                    name: '北京-上海',
                    type: 'line',
                    data: [723, 642, 618, 745, 648, 649, 700, 745, 618, 765, 779, 600],
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: '#6be6c1'
                            }
                        }
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    }
                },
                {
                    name: '北京-長沙',
                    type: 'line',
                    data:[443, 352, 418, 345, 448, 349, 300, 352, 418, 445, 348, 449, 300],
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: '#626c91'
                            }
                        }
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    }
                },
                {
                    name: '北京-深圳',
                    type: 'line',
                    data: [943, 752, 718, 885, 848, 890, 900, 972, 998, 825, 888, 949, 800],
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: '#3fb1e3'
                            }
                        }
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    }
                }
            ]
        };
        lineDraw.setOption(option);
    </script>
</body>

</html>

3.option配置項根據實際情況設定好後直接通過定好好的變數lineDraw.setOption(option)方法呼叫即可，效果如下圖所示:
在這裡插入圖片描述
4.echarts官網給我提供了更多的例項，請參考 官方例項
更多參考: echarts教程 echarts線上API 地圖
在這裡插入圖片描述

相關推薦

echarts圖表外掛的使用總結

一、簡介 1.echarts一個純 Javascript 的圖表庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可互動，可高度個

ECharts圖表外掛(4.x版本)使用（一、關係圖force節點顯示為自定義影象/圖片，帶分類選擇）

導讀 ECharts，一個使用 JavaScript 實現的開源視覺化庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的向量圖形庫 ZRender，提供直觀，互動豐富，可高度個性化定製的資料視覺

ECharts 圖表外掛使用整理（圖表配置實現）

ECharts 圖表外掛使用整理 說明 ECharts 是一個 JavaScript 實現的開源視覺化庫，相容當前絕大部分瀏覽器 IE 8 以上，是一個可高度個性化定製的資料視覺化圖表 ECharts 版本 –> 4.0.2

Echarts 圖表外掛學習（3）-- 給柱形圖的每個柱子設定不同顏色

1.實現的效果 2.引用Echarts 本地：<script src="../lib-v3/echarts/echarts.min.js"></script> 線上：<script src="http://echarts.baidu.c

ECharts圖表外掛禁止拖動合併

    ECharts是一個圖表類JS外掛，地址：http://echarts.baidu.com/index.html     學習和使用起來都比較方便，最近使用的時候發現，ECharts雖然自帶的有拖拽合併的功能，但在某些時候，並不想讓生成的圖表具有這個功能，於是可以使

推薦好輪子【Echarts資料視覺化】圖表外掛 相容ie6、7、8

前幾天在網上找一些圖表外掛，無意間發現的一個外掛，開源來自百度商業前端資料視覺化團隊。簡單的貼一些他的簡介：官網：http://echarts.baidu.com/echarts2/index.html介紹ppt：http://echarts.baidu.com/echart

Vue 使用圖表外掛 -- Echarts 原始碼+效果圖展示

安裝外掛 npm install echarts -save 使用npm 安裝 Echarts，安裝成功後，可在專案package.json 檔案中檢視到 全域性引入 main.js中配置 import echarts from 'echarts'; //引入

HTML在表格中添加echarts圖表

charts tab char echarts 圖表 inline body .get dom 在HTML的table中，只要將需要插入echarts圖表的格子設定為明確的寬高（不能為百分比），並賦予一個id，就可以插入echarts圖表。

eCharts圖表（polar極坐標圖）

als slab axis etop 分享 sys style golden trigge 極坐標圖 HTML: <div id="eChart"></div> css: #eChart{ w

echarts圖表裏label文字過長換行的方法

.com 但是 echarts 求余 字符串數組 字數 進行 http 圖標 在做一些圖標時,有時會出現顯示文字過長的問題,需要將其按照指定的字數換行,像下圖這樣 而echarts沒有提供換行的方法,但是可以使用fomatter方法進行設置,代碼如下 formatt

Echarts圖表橫坐標顯示不全

cat data isl itl slab log take type 顯示不全 xAxis: { "axisLabel":{ //加上這個強制顯示 interval: 0 }, type: ‘category‘, data: self[theData

百度Echarts的使用總結

font .sh 中間 etop auto 最大值 位置 顏色漸變 gap 在HTML寫個空div <div id="mainTL" style="height:100% ;width:100%;"></div> JS中： myChartT

Echarts圖表常用功能配置，Demo示例

label IV dem tooltip 分享圖片 webp 獲取元素 http tlist Demo完整源碼下載請移步到 Github: https://github.com/imxiaoer/EchartsDemo 先看下效果圖： 就如上圖所示，都是些常用

修改Echarts 圖表的坐標軸的文本的排列位置

重復值 mat \n [] interval var 文本 UNC 重復 option.xAxis.axisLabel[‘interval‘] = 0 　　option.xAxis.axisLabel[‘formatter‘] = function(value,index)

Echarts圖表學習

jquery req sql view mob edi ready olt 自動 最近項目已經運行的比較穩定了，正巧看到ECcharts的圖標很炫，遂做一個玩玩，以備後面做數據分析使用。 官網地址：http://echarts.baidu.com/index.html 大致

Vue使用vue-echarts圖表

api ade git rom doc 來源 ast 調整 rgb vue-echarts和echarts的區別： vue-echarts是封裝後的vue插件， 基於 ECharts v4.0.1+ 開發，依賴 Vue.js v2.2.6+，功能一樣的只是把它封裝成v

echarts圖表tooltip浮動框顯示單位——散點圖

專案中要求在圖表的浮動提示窗上顯示相對應的單位如圖： 方法有二，如下： 方法1： 利用自定義提示框進行拼接： 但是這樣的話根據後臺返回的資料格式的不同進行處理，在tooltip的formatter中進行拼接即可，注意這樣的話要考慮的情況比較多。 方法2（如果和後臺商量好可以

關於echarts圖表下載

echarts圖表生成後的下載，本身是帶有這個下載工具欄的， 但是可以通過另外的方法對該圖表進行下載或者是展示。 如圖： 圖表一是用echarts畫出的，圖表二是僅一張img圖片，圖表三則是一張可以下載的img圖片。 html： <div id="main

Echarts繪圖技術總結

Echarts是百度釋出的一種繪圖工具，通過Echarts，我們可以繪製各種圖形：包括折線圖(Line)、條形圖(Bar)、餅圖(Pie)、散點圖(Scatter)、地圖(Map)等。今天我們來談談如何繪製地圖。 首先我們來捋一捋Echarts繪圖的整個流程： 1.一般而言，Echart

angular 在TypeScript 中使用 ECharts 圖表

最近專案需要用到echarts圖表，但網上關於結合angular使用不多，而且總是匯入報錯，關於我用的版本做一個總結： （angular v6.0.9，echarts v4.1.0，@types/echarts v0.0.13） 1.安裝 typings 庫，以及 ECharts： np