Echarts圖例元件的屬性與原始碼

阿新 • • 發佈：2021-06-17

圖例（legend）元件是ECharts中較為常用的元件，它用於以不同的顏色區別系列標記的名字，表述了資料與圖形的關聯。使用者在操作時，可以通過單擊圖例控制哪些資料系列顯示或不顯示。

在ECharts 3.x/ECharts 4.x中，單個ECharts例項可以存在多個圖例元件，方便多個圖例的佈局。當圖例數量過多時，可以使用滾動翻頁。

在ECharts中，圖例元件的屬性如表所示

Echarts圖例元件的屬性與原始碼

圖例元件屬性示意圖如圖所示。

Echarts圖例元件的屬性與原始碼

利用某一年的蒸發量、降水量、最低氣溫和最高氣溫資料繪製折柱混搭圖，併為圖表配置圖例元件。
當圖例數量過多或圖例長度過長時，可以使用垂直滾動圖例或水平滾動圖例，參見屬性legend.type。此時，設定type屬性的值為“scroll”，表示圖例只顯示在一行，多餘的部分會自動呈現為滾動

程式設計客棧效果，如圖所示。

由圖可知，右上方的滑動圖示即圖例的滾動圖示，可以將圖例呈現為滾動效果。

Echarts圖例元件的屬性與原始碼

圖例的原始碼如下;

<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts指令碼-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---為ECharts準備一個具備大小（寬高）的DOM-->
    <div id="main" style="width: 600px; height: 600px"></div>
    <script type="text/ 
javascript">
        //基於準備好的DOM，初始化ECharts圖表
        var myChart =程式設計客棧 echartshuQkx.init(document.getElementById("main"));
        //指定圖表的配置項和資料
        var option = {
            color: ["red",'green','blue','grey'],//使用自己預定義的顏色
            legend: {
                orient: 'horizontal',//'vertical'
                x: 'right',//'center'|'left'|{number},y: 'top',//'center'|'bottom'|{number}
                backgroundColor: '#eee',borderColor: 'rgba(178,34,0.8)',borderWidth: 4,padding: 10,itemGap: 20,textStyle: { color: 'red' },},xAxis: {  //配置x軸座標系
                data: ['週一','週二','週三','週四','週五','週六','週日']
            },yAxis: [  //配置y軸座標系
                {   //設定第1條y軸
                    type: 'value',axisLabel: { formatter: '{value} ml' }
                },{   //設定第2條y軸
                    type: 'value',axisLabel: { formatter: '{value} C' },splitLine: { show: false }
                }
            ],series: [  //配置資料系列
                {   //設定資料系列1
                    name: '某一年的蒸發量',type: 'bar',data: [2.0,4.9,7.0,23.2,25.6,76.7,135.6]
                },{   //設定資料系列2
                    name: '某一年的降水量',smooth: true,type: 'line',yAxisIndex: 1,data: [11,11,15,13,12,10]
                },{   //設定資料系列3
                    name: '某一年的最高氣溫',data: [2.6,5.9,9.0,26.4,28.7,70.7,175.6]
                },{   //設定資料系列4
                    name: '某一年的最低氣溫',data: [-2,1,2,5,3,0]
                }
            ]
        };
        //使用剛指定的配置項和資料顯示圖表
        myChart.setOption(option); 
    </script>
</bodhuQkx 
y>

</html>

總結

到此這篇關於Echarts圖例元件屬性與原始碼的程式設計客棧文章就介紹到這了,更多相關Echarts圖例元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

Echarts圖例元件的屬性與原始碼

echarts 圖例元件如何分行

技術標籤：視覺化大屏echarts legend: [ { left:\'80\', data: [\'郵件\', \'QQ檔案\', \'微信\', \'檔案傳輸\'],

python圖形開發GUI庫pyqt5的詳細使用方法及各控制元件的屬性與方法

本文主要列出來python圖形開發GUI庫pyqt5的窗體,控制元件屬性與方法如果你想看看python圖形開發GUI庫pyqt5的基礎使用方法可以檢視我們的另一篇文章 python圖形開發GUI庫pyqt5的基本使用方法詳解

Flutter scaffold元件的屬性與方法

Scaffold 是承載material design 控制元件的佈局控制元件，可以展示drawers、snack bars、bottom sheets。每個頁面的佈局都是在這裡面。相當於iOS中UIViewController中的self.view。

Django與forms元件校驗原始碼

1 讀的入口是: form.is_valid()--->self.errors(BaseForm類)---》self.full_clean()(BaseForm類)--》

echarts自定義圖例元件

//圖例元件 legend: { top: \'center\', right: 30, data: data, width: \"auto\", itemWidth: 10,// 小方塊尺寸

Vue高階元件之函式式元件的使用場景與原始碼分析

目錄介紹使用場景原始碼分析總結介紹提供了一種可以讓元件變為無狀態、無例項的函式化元件。從原理上說，一般子元件都會經過例項化的過程，而單純的函式元件並沒有這個過程，它可以簡單理解為一箇中間層，只處理資

vue中style的scope屬性與三方元件樣式的修改

在vue專案中通常會給style標籤加上scope屬性，以此來實現樣式的私有化，避免全域性汙染。

echarts的圖例元件（legend）如何設定兩列或多列排布

js程式碼 legend: [ { orient: \'horizontal\', right: \'10%\', // top: \'middle\', // padding:[0,50,0,0], // x:\'right\',//可設定圖例在左、右、居中

Java執行緒池原理與原始碼詳細解讀，再也不怕面試問執行緒池了！

執行緒池 “執行緒池”，顧名思義就是一個執行緒快取，執行緒是稀缺資源，如果被無限制的建立，不僅會消耗系統資源，還會降低系統的穩定性，因此Java中提供執行緒池對執行緒進行統一分配、調優和監控。

GNE v0.04版更新，支援提取正文圖片與原始碼

GeneralNewsExtractor以下簡稱GNE是一個新聞網頁通用抽取器，能夠在不指定任何抽取規則的情況下，把新聞網站的正文提取出來。

K8S 核心元件 kubelet 與 kube-proxy 分析

kubelet kubelet 程式用於處理master 下發的任務,管理pod 中的容器,註冊自身所在的節點.

打造一款適合自己的快速開發框架-前端篇之選擇樹元件設計與實現

前言任何業務系統都可能會涉及到對樹型類資料的管理，如選單管理、組織機構管理等。而在對樹型類資料進行管理的時候一般都需要選擇父節點，雖然elementui也有樹型元件，但是如果直接使用，要完成該功能，需要編寫的

Python 類屬性與例項屬性，類物件與例項物件用法分析

本文例項講述了Python 類屬性與例項屬性，類物件與例項物件用法。分享給大家供大家參考，具體如下：

Android開發獲取手機內網IP地址與外網IP地址的詳細方法與原始碼例項

在進行Android應用開發過程中，有時候會遇到獲取當前Android裝置所使用的網路IP地址的場景，有時候需要本地的網路IP地址，即區域網地址，更多的時候是需要當前網路的真實的對外IP地址，即真實的網路地址,如大資料分析

Android開發之InetAddress基礎入門簡介與原始碼例項

最近在學習soket程式設計中，看到有需要獲取到IP地址之類的需求，所以就去看了下如何獲取到主機名的IP地址。

PHP 面向物件程式設計之類屬性與類常量實現方法分析

本文例項講述了PHP 面向物件程式設計之類屬性與類常量。分享給大家供大家參考，具體如下：

JavaScript中的全域性屬性與方法深入解析

今天來補充JavaScript中的最後一部分內容，JavaScript中的全域性屬性和方法(函式)。

訪問類的靜態屬性與類的初始化

訪問類的靜態屬性與類的初始化驗證現有SuperClass類，其原始碼如下： public class SuperClass {

Python 簡明教程 --- 20，Python 類中的屬性與方法

微信公眾號：碼農充電站pro 個人主頁：https://codeshellme.github.io 與客戶保持良好的關係可以使生產率加倍。

Echarts圖例元件的屬性與原始碼

相關推薦