Echarts之圖例legend基本配置方式
Echarts圖例legend基本配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>柱狀圖的基本實(shí)現(xiàn)和常見效果</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px; border: 1px solid black;"></div>
<script>
var myCharts = echarts.init(document.querySelector('div'))
var xDataArr = ['Dean', 'Jing', 'Amy', 'John', 'Rebecca', 'Lexie']
var yDataArr = [88, 99, 78, 67, 84, 32]
var yDataArr2 = [78, 89, 98, 57, 94, 92]
var option = {
title: {
text: 'Title',
textStyle: {
color: 'lightblue',
fontSize: 20
},
borderWidth: 2,
borderColor: 'lightblue',
borderRadius: 10,
top: 30,
left: '45%',
backgroundColor: 'black',
padding: 10
},
grid: {
show: true,
top: 90,
left: 100,
right: 40,
bottom: 40,
height: '60%',
},
tooltip: {
trigger: 'item',
triggerOn: 'click',
formatter: function(arg) {
console.log(arg)
return `cate: ${arg.name} ---> value: ${arg.data}`
}
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
legend: {
data: ['Math', 'English'],
left: 'center',
top: 'bottom'
},
series: [
{
name: 'Math',
type: 'bar',
label: {
show: true,
rotate: 30,
postion: 'middle',
color: 'pink'
},
barWidth: '30%',
data: yDataArr
},
{
type: 'bar',
name: 'English',
data: yDataArr2,
color: 'lightblue',
barWidth: '30%',
label: {
show: true,
color: '#fff'
}
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>
left和top可以控制圖例顯示的位置：
orient控制圖例的顯示方式是橫著還是豎著，默認(rèn)horizontal橫著
改為vertical:
Echarts圖例位置-legend屬性
[如何設(shè)置Echarts圖例位置]
Echarts可以幫助我們快速構(gòu)建柱狀圖、餅圖、條形圖，這對于多圖形化展示數(shù)據(jù)來說尤其方便，可幫助我們快速開發(fā)。
不過我們在使用Echarts過程中經(jīng)常會(huì)遇到如下問題：圖例經(jīng)常不知道如何調(diào)節(jié)到我們想要的位置。
遇到此情況該如何調(diào)節(jié)呢？
只需要legend屬性中修改如下幾個(gè)示數(shù)即可：
legend: {
orient: ‘vertical',
x:‘right', //可設(shè)定圖例在左、右、居中
y:‘center', //可設(shè)定圖例在上、下、居中
padding:[0,50,0,0], //可設(shè)定圖例[距上方距離，距右方距離，距下方距離，距左方距離]
data: [‘直接訪問',‘微信',‘百度',‘其他文章',‘網(wǎng)頁']
},①x : 可以設(shè)定圖例在----左（left）、右（right）、居中（center）、填寫數(shù)字（如:100px）
②y : 可以設(shè)定圖例在----上（top）、下（bottom）、居中（center）、填寫數(shù)字（如:100px）
③另外，可使用padding:
padding:[0,50,0,0] [（距離上方距離），（距離右方距離）、（距離下方距離）、（距離左方距離）]
當(dāng)前(2020年6月)直接只設(shè)置left、right、top、bottom具體像素值或百分比即可：left、right、top、bottom
legend: {
orient: ‘vertical',
right: 10, //當(dāng)前直接只設(shè)置此具體像素值、百分比即可了
data: [‘直接訪問', ‘郵件營銷', ‘聯(lián)盟廣告', ‘視頻廣告', ‘搜索引擎']
},如此設(shè)置完就可以得到自己想要的位置啦。
參考：Echarts官網(wǎng)配置項(xiàng)介紹：https://echarts.apache.org/zh/option.html#legend
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
通過vue手動(dòng)封裝on、emit、off的代碼詳解
這篇文章主要介紹了通過vue手動(dòng)封裝on，emit，off的代碼詳解，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別
這篇文章主要介紹了Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
今天小編就為大家分享一篇vue獲取form表單的值示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue-cli使用stimulsoft.reports.js的詳細(xì)教程
Stimulsoft?Reports.JS是一個(gè)使用JavaScript和HTML5生成報(bào)表的平臺。它擁有所有擁來設(shè)計(jì)，編輯和查看報(bào)表的必需組件。該報(bào)表工具根據(jù)開發(fā)人員數(shù)量授權(quán)而不是根據(jù)應(yīng)用程序的用戶數(shù)量。接下來通過本文給大家介紹vue-cli使用stimulsoft.reports.js的方法，一起看看吧2021-12-12
這篇文章主要介紹了vue中的搜索關(guān)鍵字實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了vue webuploader 文件上傳組件開發(fā)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
windows下vue.js開發(fā)環(huán)境搭建教程
這篇文章主要為大家詳細(xì)介紹了windows下vue.js開發(fā)環(huán)境搭建教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家介紹了c++游戲教程使用easyx實(shí)現(xiàn)大飛機(jī)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue利用History記錄上一頁面的數(shù)據(jù)方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue利用History記錄上一頁面的數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
下面小編就為大家分享一篇淺談vue的幾種綁定變量的值 防止其改變的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03