Echarts+VUE柱狀圖繪制細(xì)節(jié)并且屏幕自適應(yīng)完整代碼
前言
最近有一個(gè)大屏的需求，需要完成一些柱狀圖、餅圖、折線圖基本圖形的繪制，我果斷采取了Echarts來實(shí)現(xiàn)這個(gè)功能，官方已有很多的demo，但是我這里主要分享一些細(xì)節(jié)，官方文檔看起來比較繁瑣，為大家節(jié)省時(shí)間去查找。
官方文檔：Apache EChartsApache ECharts，一款基于JavaScript的數(shù)據(jù)可視化圖表庫，提供直觀，生動，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表：https://echarts.apache.org/zh/index.html
一、先上效果圖
下面我按照最開始的順序詳細(xì)講解如何從0開始完成一個(gè)你想要的效果圖。
1、安裝 Echarts：
首先，確保你的項(xiàng)目中已安裝了 Echarts?？梢酝ㄟ^ npm 或 yarn 進(jìn)行安裝，或者直接在 HTML 文件中引入 Echarts 的源文件。
方法一：從 npm 安裝
npm install echarts
方法二：從 yarn 安裝
yarn add echarts
以vue項(xiàng)目為例：在所需要的組件中使用Echarts
import echarts from 'echarts';
2、準(zhǔn)備數(shù)據(jù)：
在開始繪制圖表之前，需要準(zhǔn)備好要顯示的數(shù)據(jù)。這可能包括一個(gè)或多個(gè)數(shù)組、對象或其他數(shù)據(jù)結(jié)構(gòu)。
柱狀圖分為X軸和Y軸，這里的數(shù)據(jù)分為兩個(gè)，一個(gè)是X軸上的數(shù)據(jù)，一個(gè)是Y軸上的數(shù)據(jù)，都是以數(shù)組的形式，他們是一一對應(yīng)的。通常放在配置項(xiàng)options中（下面會詳細(xì)介紹配置項(xiàng)options）
3、創(chuàng)建容器：
在 HTML 頁面中創(chuàng)建一個(gè)容器元素，用于顯示圖表?？梢允且粋€(gè) <div> 元素或其他合適的元素。
<template>
<div class="center-wrap">
<div class="headTitle">
<img class="my-img" :src="require('../../../assets/images/大
屏/homeScreen_04.png')" alt="" />
<span class="title">各地市群眾監(jiān)督員統(tǒng)計(jì)情況</span>
</div>
<div id="center-bottom" class="center-bottom"></div>
</div>
</template>我們只需要關(guān)注id為center-bottom的這個(gè)容器，它是我們等會要用來繪制柱狀圖所需要的容器。
4、設(shè)置容器樣式：
為圖表容器設(shè)置樣式，例如寬度、高度和邊距等。這樣可以確保圖表在頁面上正確顯示，并適應(yīng)所需的尺寸。
注意：這里有兩處細(xì)節(jié)可能踩坑
（1）這里必須要設(shè)置容器的具體寬高，如果不給容器設(shè)置寬高，會無法正常顯示圖表，原因是Echarts 默認(rèn)會將圖表容器的寬度和高度設(shè)置為 0px。
（2）有時(shí)候高度如果用百分比設(shè)置無效的時(shí)候，可以使用px。在給柱狀圖設(shè)置高度時(shí)，使用百分比和像素（px）單位的效果可能不同的原因是，百分比高度是相對于其父元素的尺寸進(jìn)行計(jì)算的。如果父元素的尺寸沒有明確設(shè)置或者無法確定，那么百分比設(shè)置可能無法正確地計(jì)算出實(shí)際的高度值。
.center-bottom {
width: 100%;
height: calc(100% - 36px);
}5. 初始化圖表實(shí)例：
使用 JavaScript 代碼創(chuàng)建一個(gè) Echarts 實(shí)例，并將其與圖表容器相關(guān)聯(lián)。這可以通過調(diào)用 echarts.init() 方法來完成。
this.chart = this.$echarts.init(document.getElementById("center-bottom"));
6、通過配置選項(xiàng)對象來定義圖表的樣式、數(shù)據(jù)和其他屬性。
可以設(shè)置圖表類型（如折線圖、柱狀圖、餅圖等）、坐標(biāo)軸、圖例、數(shù)據(jù)系列等。（PS:重點(diǎn)介紹配置項(xiàng)，應(yīng)該是大家最關(guān)注的地方，這里先以柱狀圖為例，后續(xù)如果有需要我繼續(xù)出折線圖，餅圖，詞云圖等，其實(shí)配置大致類似）
我先上一個(gè)完整的options配置項(xiàng)代碼，大家一遍參考代碼一遍看解釋。
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// 圖例設(shè)置
legend: {
data: ["群眾監(jiān)督員"],
icon: 'roundRect', //ECharts 提供的標(biāo)記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
top: 0,
right: "0%",
itemWidth: 20,
itemHeight: 10,
itemGap: 10,
textStyle: {
fontSize: 12,
color: "#554C3A",
letterSpacing: 1,
textAlign: 'center',
fontFamily: "也字工廠熬夜黑, cursive",
fontWeight: "bold",
padding: [0, 10, 0, 0],
},
},
grid: {
top: '15%',
left: '3%',
right: '4%',
bottom: '0%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['湖北公司本部', '武漢市分公司', '黃石市分公司', '十堰市分公司', '宜昌市分公司', '襄陽市分公司', '鄂州市分公司', '荊門市分公司', '孝感市分公司', '荊州市分公司', '黃岡市分公司', '咸寧市分公司', '隨州市分公司', '恩施土家族苗族自治州分公司', '仙桃市分公司', '潛江市分公司', '天門市分公司', '神農(nóng)架林區(qū)', '省電信傳輸局'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
rotate: 0 // 設(shè)置文字傾斜角度為45度
},
axisLine: { // 設(shè)置X軸樣式
lineStyle: {
type: 'solid',
color: '#000'
}
},
axisTick: {
show: false // 不顯示坐標(biāo)軸刻度線
},
}
],
yAxis: [
{
type: 'value',
interval: 40,
splitLine: {
show: true,
lineStyle: {
type: 'dashed', // 設(shè)置為虛線
color: '#ccc' // 設(shè)置虛線的顏色
}
},
axisTick: {
show: false // 不顯示坐標(biāo)軸刻度線
},
},
],
series: [
{
name: '群眾監(jiān)督員',
type: 'bar',
barWidth: '30%',
// data: [100, 150, 190, 50, 200, 50, 60, 30, 90, 120, 50, 50, 30, 70, 40, 50, 80, 80, 90,],
data: this.supervisor,
itemStyle: {
borderWidth: 2, // 設(shè)置圓圈的邊框粗細(xì)為2像素
borderColor: '#ffa428', // 設(shè)置圓圈的邊框顏色為藍(lán)色
color: '#ffa428',//設(shè)置折線圖粗細(xì)
normal: {
color: function (params) {
// 定義每個(gè)柱子的漸變色
var colorList = [
{
offset: 0,
color: '#fcc171'
},
{
offset: 0.25,
color: '#ec8347'
},
{
offset: 0.5,
color: '#e46432'
},
{
offset: 0.75,
color: '#e46432'
},
{
offset: 1,
color: '#e05126'
}
];
// params.dataIndex表示當(dāng)前柱子的索引
return {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: colorList
};
},
barBorderRadius: [10, 10, 0, 0] // 柱子的四個(gè)角分別設(shè)置圓角半徑
}
},
lineStyle: {
width: 3,//設(shè)置折線的粗細(xì)為2像素
},
label: {
show: true, // 顯示標(biāo)簽
position: 'top', // 標(biāo)簽位置
color: '#000'
},
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#df5126"
},
{
offset: 1,
color: "#df5126"
}
]
},
}
]
};以下是我查閱官方文檔手冊為大家整理的，可能有遺漏可自行前往官方文檔查閱補(bǔ)充。
1、tooltip：提示框配置，用于顯示數(shù)據(jù)項(xiàng)的詳細(xì)信息。設(shè)置了觸發(fā)方式為坐標(biāo)軸觸發(fā)，顯示陰影指示器。tooltip是指當(dāng)你的鼠標(biāo)移入到柱狀圖時(shí)，你想要給每個(gè)柱子的背景顏色，數(shù)據(jù)顯示位置，是否顯示等等，以下舉幾個(gè)常用例子，由于配置項(xiàng)實(shí)在是過多，我不可能一一配置，需要的時(shí)候就像查字典一樣去查找即可。
（1）show:布爾值，默認(rèn)開啟為true，鼠標(biāo)移入柱狀圖會有提示框顯示數(shù)據(jù)項(xiàng)，手動關(guān)閉需要設(shè)置show為false。
（2）trigger：tooltip中的trigger屬性用于設(shè)置觸發(fā)提示框的條件，具體有以下幾個(gè)可選參數(shù)，
1.item：鼠標(biāo)懸停在數(shù)據(jù)項(xiàng)上時(shí)觸發(fā)提示框。
2.axis：鼠標(biāo)懸停在坐標(biāo)軸上時(shí)觸發(fā)提示框。
3.none：不觸發(fā)提示框。
（3）axisPointer：axisPointer是tooltip的子屬性，用于配置提示框的指示器樣式和行為。它可以設(shè)置以下幾個(gè)參數(shù)：
type：指示器類型，默認(rèn)為'line'，表示直線型指示器。還可以設(shè)置為'shadow'，表示陰影指示器。
snap：是否自動吸附到最近的數(shù)據(jù)點(diǎn)，默認(rèn)為false。當(dāng)設(shè)置為true時(shí)，指示器會自動吸附到最近的數(shù)據(jù)點(diǎn)上。
z：指示器的層級，默認(rèn)為100。當(dāng)多個(gè)指示器同時(shí)存在時(shí)，通過調(diào)整層級可以控制顯示的先后順序。
label：提示框文本標(biāo)簽的樣式設(shè)置，包括字體大小、顏色等。
lineStyle：指示器線條的樣式設(shè)置，包括線寬、顏色等。
（4） showContent：showContent是tooltip的子屬性之一，用于配置提示框中內(nèi)容的顯示與隱藏。具體可設(shè)置的參數(shù)為布爾值，默認(rèn)為 true。當(dāng)showContent為true時(shí)，提示框會顯示數(shù)據(jù)項(xiàng)的詳細(xì)內(nèi)容。當(dāng)showContent為false時(shí)，提示框不會顯示數(shù)據(jù)項(xiàng)的詳細(xì)內(nèi)容，僅顯示指示器和標(biāo)題。
（5） transitionDuration：transitionDuration是ECharts中的一個(gè)配置項(xiàng)，用于設(shè)置圖表動畫的過渡時(shí)間。它表示圖表從一個(gè)狀態(tài)過渡到另一個(gè)狀態(tài)所花費(fèi)的時(shí)間，單位為毫秒（ms）。通過設(shè)置transitionDuration，你可以調(diào)整圖表的動畫效果的持續(xù)時(shí)間。較短的過渡時(shí)間可以使動畫更加迅速，而較長的過渡時(shí)間可以使動畫變得平滑。根據(jù)實(shí)際需求，你可以根據(jù)這個(gè)參數(shù)來控制圖表動畫的速度和流暢度。
（6）formatter：formatter是ECharts中tooltip的一個(gè)子屬性，用于格式化提示框的內(nèi)容。它可以是一個(gè)函數(shù)或者字符串。
當(dāng)formatter為函數(shù)時(shí)，它會接收兩個(gè)參數(shù)：params和ticket。其中，params是一個(gè)數(shù)組，包含了當(dāng)前鼠標(biāo)所指示的數(shù)據(jù)項(xiàng)的詳細(xì)信息；ticket是異步回調(diào)標(biāo)識，用于告知 ECharts 異步數(shù)據(jù)已經(jīng)加載完成。
當(dāng)formatter為字符串時(shí)，它可以使用占位符來引用數(shù)據(jù)項(xiàng)的字段，如{a}表示系列名，表示類目名，{c}表示數(shù)據(jù)值等。
通過設(shè)置tooltip.formatter，你可以自定義提示框的內(nèi)容展示方式，以滿足特定的可視化需求。例如，你可以將提示框的內(nèi)容設(shè)置為一個(gè)表格，顯示更加詳細(xì)的數(shù)據(jù)信息，或者根據(jù)業(yè)務(wù)需求對提示框的內(nèi)容進(jìn)行定制化。下面是一個(gè)例子：
tooltip: {
formatter: function (params) {
var result = '';
for (var i = 0; i < params.length; i++) {
result += params[i].seriesName + '：' + params[i].value + '<br/>';
}
return result;
}
}
2、legend：legend是ECharts中的配置項(xiàng)之一，用于配置圖例（Legend）。圖例用于展示不同系列（Series）在圖表中的標(biāo)識和說明，方便用戶理解并區(qū)分不同的數(shù)據(jù)系列。
legend可以配置以下參數(shù)：
show：是否顯示圖例，默認(rèn)為true。
type：圖例的類型，默認(rèn)為'plain'，表示普通圖例。還可以設(shè)置為'scroll'，表示可滾動的圖例。
left、top、right、bottom：圖例組件離容器邊界的距離。
width、height：圖例組件的寬度和高度。
orient：圖例的布局方向，默認(rèn)為'horizontal'，表示水平布局。還可以設(shè)置為'vertical'，表示垂直布局。
align：圖例的對齊方式，默認(rèn)為'auto'，表示自動對齊。還可以設(shè)置為'left'、'right'、'center'，分別表示左對齊、右對齊、居中對齊。
padding：圖例內(nèi)邊距，用于調(diào)整圖例內(nèi)容與邊框的距離。
itemGap：圖例每項(xiàng)之間的間隔距離。
itemWidth、itemHeight：圖例每項(xiàng)的寬度和高度。
textStyle：圖例文本的樣式設(shè)置，包括字體大小、顏色等。
通過配置legend，你可以控制圖例的顯示與隱藏，以及調(diào)整圖例的布局、樣式等。根據(jù)具體需求，你可以根據(jù)這些參數(shù)進(jìn)行定制化配置來滿足自己的可視化要求。
// 圖例設(shè)置
legend: {
data: ["群眾監(jiān)督員"],
icon: 'roundRect', //ECharts 提供的標(biāo)記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
top: 0,
right: "0%",
itemWidth: 20,
itemHeight: 10,
itemGap: 10,
textStyle: {
fontSize: 12,
color: "#554C3A",
letterSpacing: 1,
textAlign: 'center',
fontFamily: "也字工廠熬夜黑, cursive",
fontWeight: "bold",
padding: [0, 10, 0, 0],
},
},3、grid：grid 是 ECharts 中的配置項(xiàng)之一，用于配置網(wǎng)格（Grid）。網(wǎng)格是圖表中的坐標(biāo)系，用于布局和定位圖表中的各個(gè)組件。
grid 可以配置以下參數(shù)：
show：是否顯示網(wǎng)格，默認(rèn)為false。
left、top、right、bottom：網(wǎng)格組件離容器邊界的距離。
width、height：網(wǎng)格組件的寬度和高度。
containLabel：是否包含坐標(biāo)軸的刻度標(biāo)簽，默認(rèn)為false。如果設(shè)置為true，則網(wǎng)格區(qū)域?qū)ㄗ鴺?biāo)軸的刻度標(biāo)簽，否則不包括。
backgroundColor：網(wǎng)格的背景顏色。
borderColor：網(wǎng)格的邊框顏色。
borderWidth：網(wǎng)格的邊框?qū)挾取?/p>
zlevel：組件的層級，控制繪制順序。
通過配置grid，你可以調(diào)整網(wǎng)格的位置、大小和樣式。網(wǎng)格的作用是提供一個(gè)基準(zhǔn)坐標(biāo)系，用于放置和對齊其他圖表組件，例如坐標(biāo)軸、數(shù)據(jù)系列等。根據(jù)具體需求，你可以根據(jù)這些參數(shù)進(jìn)行定制化配置來滿足自己的可視化要求。
grid: {
top: '15%',
left: '3%',
right: '4%',
bottom: '0%',
containLabel: true
}, 4、backgroundColor：backgroundColor 是 ECharts 中的配置項(xiàng)之一，用于設(shè)置圖表的背景顏色。
通過配置 backgroundColor，你可以為整個(gè)圖表設(shè)置一個(gè)背景色。這對于美化圖表、增強(qiáng)可讀性或與頁面的整體風(fēng)格相匹配非常有用。
例如，你可以將 backgroundColor 設(shè)置為 "#f5f5f5" 來給圖表添加一個(gè)灰色的背景，或者將其設(shè)置為 "transparent" 來使背景透明。
這個(gè)配置項(xiàng)可以接受各種 CSS 顏色值，包括十六進(jìn)制值、RGB、RGBA、顏色名等。注意，backgroundColor 僅為整個(gè)圖表的背景顏色，不包括坐標(biāo)軸、數(shù)據(jù)系列等組件的背景色。如果你需要設(shè)置其他組件的背景色，可以通過其他相關(guān)配置項(xiàng)進(jìn)行設(shè)置，例axisLabel.backgroundColor、tooltip.backgroundColor 等。
5、borderWidth：borderWidth 是 ECharts 中的配置項(xiàng)之一，用于設(shè)置圖表組件的邊框?qū)挾取?/p>
通過配置 borderWidth，你可以為圖表組件（例如網(wǎng)格、坐標(biāo)軸、圖例等）設(shè)置邊框的寬度，以增加圖表的可視效果和邊界清晰度。
這個(gè)配置項(xiàng)可以接受一個(gè)數(shù)字值，表示邊框的寬度，單位為像素。例如，borderWidth: 1 表示邊框?qū)挾葹?1 像素。
你可以在不同的組件上使用 borderWidth 進(jìn)行邊框的設(shè)置，如網(wǎng)格的邊框、坐標(biāo)軸的邊框、圖例的邊框等。通過調(diào)整邊框?qū)挾?，你可以改變組件的邊界線的粗細(xì)，從而影響整體的視覺效果。
6、xAxis：xAxis 是 ECharts 中的配置項(xiàng)之一，用于設(shè)置圖表的 X 軸。xAxis 可以配置以下參數(shù)：
type：坐標(biāo)軸類型，包括'value'、'category'、'time'、'log'四個(gè)選項(xiàng)，默認(rèn)為'category'。
name：坐標(biāo)軸名稱。
nameTextStyle：坐標(biāo)軸名稱的文本樣式。
axisLabel：坐標(biāo)軸刻度標(biāo)簽的文本樣式和其他設(shè)置。
axisTick：坐標(biāo)軸刻度線的樣式和其他設(shè)置。
axisLine：坐標(biāo)軸線的樣式和其他設(shè)置。
boundaryGap：是否在數(shù)據(jù)兩側(cè)留白，默認(rèn)為true。如果設(shè)置為false，則刻度線和數(shù)據(jù)點(diǎn)將會在坐標(biāo)軸兩端對齊。
data：類目型坐標(biāo)軸的刻度標(biāo)簽內(nèi)容。
min、max：數(shù)值型坐標(biāo)軸的最小值和最大值。
splitNumber：分割段數(shù)，用于控制刻度線的數(shù)量。
interval：刻度間隔，用于控制刻度線的跨度。
axisPointer：坐標(biāo)軸指示器的樣式和其他設(shè)置。
以上參數(shù)可以根據(jù)實(shí)際需求進(jìn)行靈活的配置，比如可以通過 type 參數(shù)將坐標(biāo)軸類型設(shè)置為 'value'，然后配置 min 和 max 來控制數(shù)值型坐標(biāo)軸的范圍；或者通過 data 參數(shù)將坐標(biāo)軸類型設(shè)置為 'category'，然后配置類目型 X 軸的刻度標(biāo)簽內(nèi)容。
xAxis: [
{
type: 'category',
data: ['湖北公司本部', '武漢市分公司', '黃石市分公司', '十堰市分公司', '宜昌市分公司', '襄陽市分公司', '鄂州市分公司', '荊門市分公司', '孝感市分公司', '荊州市分公司', '黃岡市分公司', '咸寧市分公司', '隨州市分公司', '恩施土家族苗族自治州分公司', '仙桃市分公司', '潛江市分公司', '天門市分公司', '神農(nóng)架林區(qū)', '省電信傳輸局'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
rotate: 0 // 設(shè)置文字傾斜角度為45度
},
axisLine: { // 設(shè)置X軸樣式
lineStyle: {
type: 'solid',
color: '#000'
}
},
axisTick: {
show: false // 不顯示坐標(biāo)軸刻度線
},
}
],7、yAxis：yAxis 是 ECharts 中的配置項(xiàng)之一，用于設(shè)置圖表的 Y 軸。通過配置 yAxis，你可以對 Y 軸的樣式、刻度、標(biāo)簽等進(jìn)行設(shè)置，以適應(yīng)不同的數(shù)據(jù)和可視化需求。yAxis 可以配置以下參數(shù)：
type：坐標(biāo)軸類型，包括'value'、'category'、'time'、'log'四個(gè)選項(xiàng)，默認(rèn)為'value'。
name：坐標(biāo)軸名稱。
nameTextStyle：坐標(biāo)軸名稱的文本樣式。
axisLabel：坐標(biāo)軸刻度標(biāo)簽的文本樣式和其他設(shè)置。
axisTick：坐標(biāo)軸刻度線的樣式和其他設(shè)置。
axisLine：坐標(biāo)軸線的樣式和其他設(shè)置。
boundaryGap：是否在數(shù)據(jù)兩側(cè)留白，默認(rèn)為true。如果設(shè)置為false，則刻度線和數(shù)據(jù)點(diǎn)將會在坐標(biāo)軸兩端對齊。
data：類目型坐標(biāo)軸的刻度標(biāo)簽內(nèi)容。
min、max：數(shù)值型坐標(biāo)軸的最小值和最大值。
splitNumber：分割段數(shù)，用于控制刻度線的數(shù)量。
interval：刻度間隔，用于控制刻度線的跨度。
axisPointer：坐標(biāo)軸指示器的樣式和其他設(shè)置。
yAxis: [
{
type: 'value',
interval: 40,
splitLine: {
show: true,
lineStyle: {
type: 'dashed', // 設(shè)置為虛線
color: '#ccc' // 設(shè)置虛線的顏色
}
},
axisTick: {
show: false // 不顯示坐標(biāo)軸刻度線
},
},
],8、series:通過配置 series，你可以定義圖表中的各個(gè)系列，包括折線圖、柱狀圖、餅圖等不同類型的圖表。
series 可以配置以下參數(shù)：
type：系列類型，包括'line'、'bar'、'pie'等多種類型，默認(rèn)為'line'。
name：系列名稱。
data：系列數(shù)據(jù)，具體格式根據(jù)不同的系列類型而定。
smooth：是否平滑顯示折線圖，默認(rèn)為false。
stack：是否堆疊顯示柱狀圖，默認(rèn)為false。
label：標(biāo)簽相關(guān)的設(shè)置，用于顯示數(shù)據(jù)標(biāo)簽。
itemStyle：圖形樣式的設(shè)置，包括顏色、邊框等。
areaStyle：填充區(qū)域的樣式設(shè)置，僅在折線圖中有效。
radius：餅圖的半徑設(shè)置。
center：餅圖的中心位置設(shè)置。
roseType：是否展示為南丁格爾圖（玫瑰圖），僅在餅圖中有效。
animation：動畫效果的設(shè)置，包括動畫類型、延遲等。
以上參數(shù)只是部分常用的配置，具體的細(xì)節(jié)和其他可配置項(xiàng)可以根據(jù)不同的系列類型而定。不同的圖表類型可能有特定的配置項(xiàng)，比如折線圖可以配置平滑顯示、堆疊顯示等，柱狀圖可以配置堆疊顯示，餅圖可以配置半徑、南丁格爾圖等。
需要注意的是，series 是一個(gè)數(shù)組，可以包含多個(gè)系列對象，用于在同一個(gè)圖表中顯示多個(gè)數(shù)據(jù)系列。
series: [
{
name: '群眾監(jiān)督員',
type: 'bar',
barWidth: '30%',
// data: [100, 150, 190, 50, 200, 50, 60, 30, 90, 120, 50, 50, 30, 70, 40, 50, 80, 80, 90,],
data: this.supervisor,
itemStyle: {
borderWidth: 2, // 設(shè)置圓圈的邊框粗細(xì)為2像素
borderColor: '#ffa428', // 設(shè)置圓圈的邊框顏色為藍(lán)色
color: '#ffa428',//設(shè)置折線圖粗細(xì)
normal: {
color: function (params) {
// 定義每個(gè)柱子的漸變色
var colorList = [
{
offset: 0,
color: '#fcc171'
},
{
offset: 0.25,
color: '#ec8347'
},
{
offset: 0.5,
color: '#e46432'
},
{
offset: 0.75,
color: '#e46432'
},
{
offset: 1,
color: '#e05126'
}
];
// params.dataIndex表示當(dāng)前柱子的索引
return {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: colorList
};
},
barBorderRadius: [10, 10, 0, 0] // 柱子的四個(gè)角分別設(shè)置圓角半徑
}
},
lineStyle: {
width: 3,//設(shè)置折線的粗細(xì)為2像素
},
label: {
show: true, // 顯示標(biāo)簽
position: 'top', // 標(biāo)簽位置
color: '#000'
},
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#df5126"
},
{
offset: 1,
color: "#df5126"
}
]
},
}
]以上就是我給大家整理的關(guān)于配置項(xiàng)的部分內(nèi)容了，其它沒有的可自行官網(wǎng)查閱。
圖表重繪：我們還需要考慮到圖表重繪的問題
第一種情況：
當(dāng)用戶最小化窗口或拖動窗口改變窗口大小時(shí)，我們可以監(jiān)聽瀏覽器窗口的 resize 事件，并在事件回調(diào)函數(shù)中調(diào)用圖表對象的 resize 方法來實(shí)現(xiàn)圖表的重繪。
具體實(shí)現(xiàn)代碼如下：
// 第一種情況監(jiān)聽瀏覽器窗口的變化 讓圖表重繪
window.addEventListener("resize", () => {
this.chart.resize();
});
第二種情況：
用戶不改變窗口大小但會在圖表所在的 DOM 元素內(nèi)部改變大小。我們可以使用 ResizeObserver 實(shí)例來監(jiān)聽頁面中指定 DOM 元素的寬度變化，并在回調(diào)函數(shù)中執(zhí)行圖表的重繪操作。
首先安裝resize-observer-polyfill插件
npm install resize-observer-polyfill
項(xiàng)目中引入
import ResizeObserver from 'resize-observer-polyfill';
// 在圖表初始化時(shí)，創(chuàng)建 Resize Observer 實(shí)例 第二種情況 監(jiān)聽頁面中DOM元素的寬度變化讓圖表重繪
const resizeObserver = new ResizeObserver(entries => {
entries.forEach((entry => {
// entry.target 是被觀察的DOM元素
// 在這里執(zhí)行圖表重繪的操作
this.chart.resize()
}))
})
// 將 Resize Observer 綁定到圖表的 DOM 元素上
const chartContainer = document.getElementById('center-bottom')
resizeObserver.observe(chartContainer)注：下面是完整代碼：僅供參考
<template>
<div class="center-wrap">
<div class="headTitle">
<img class="my-img" :src="require('../../../assets/images/大屏/homeScreen_04.png')" alt="" />
<span class="title">各地市群眾監(jiān)督員統(tǒng)計(jì)情況</span>
</div>
<div id="center-bottom" class="center-bottom">
</div>
</div>
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
import { supervisor } from '@/api/bigScreen/screen'
import ResizeObserver from 'resize-observer-polyfill';
export default {
data() {
return {
chart: null,
supervisor: null
}
},
mixins: [echartMixins],
mounted() {
this.draw()
},
methods: {
async draw() {
this.chart = this.$echarts.init(document.getElementById("center-bottom"));
// 獲取各地市下的監(jiān)督員數(shù)量
let res = await supervisor()
this.supervisor = res.data.map((item) => {
return item.count
})
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
show: false
},
// 圖例設(shè)置
legend: {
data: ["群眾監(jiān)督員"],
icon: 'roundRect', //ECharts 提供的標(biāo)記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
top: 0,
right: "0%",
itemWidth: 20,
itemHeight: 10,
itemGap: 10,
textStyle: {
fontSize: 12,
color: "#554C3A",
letterSpacing: 1,
textAlign: 'center',
fontFamily: "也字工廠熬夜黑, cursive",
fontWeight: "bold",
padding: [0, 10, 0, 0],
},
},
grid: {
top: '15%',
left: '3%',
right: '4%',
bottom: '0%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['湖北公司本部', '武漢市分公司', '黃石市分公司', '十堰市分公司', '宜昌市分公司', '襄陽市分公司', '鄂州市分公司', '荊門市分公司', '孝感市分公司', '荊州市分公司', '黃岡市分公司', '咸寧市分公司', '隨州市分公司', '恩施土家族苗族自治州分公司', '仙桃市分公司', '潛江市分公司', '天門市分公司', '神農(nóng)架林區(qū)', '省電信傳輸局'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
rotate: 0 // 設(shè)置文字傾斜角度為45度
},
axisLine: { // 設(shè)置X軸樣式
lineStyle: {
type: 'solid',
color: '#000'
}
},
axisTick: {
show: false // 不顯示坐標(biāo)軸刻度線
},
}
],
yAxis: [
{
type: 'value',
interval: 40,
splitLine: {
show: true,
lineStyle: {
type: 'dashed', // 設(shè)置為虛線
color: '#ccc' // 設(shè)置虛線的顏色
}
},
axisTick: {
show: false // 不顯示坐標(biāo)軸刻度線
},
},
],
series: [
{
name: '群眾監(jiān)督員',
type: 'bar',
barWidth: '30%',
// data: [100, 150, 190, 50, 200, 50, 60, 30, 90, 120, 50, 50, 30, 70, 40, 50, 80, 80, 90,],
data: this.supervisor,
itemStyle: {
borderWidth: 2, // 設(shè)置圓圈的邊框粗細(xì)為2像素
borderColor: '#ffa428', // 設(shè)置圓圈的邊框顏色為藍(lán)色
color: '#ffa428',//設(shè)置折線圖粗細(xì)
normal: {
color: function (params) {
// 定義每個(gè)柱子的漸變色
var colorList = [
{
offset: 0,
color: '#fcc171'
},
{
offset: 0.25,
color: '#ec8347'
},
{
offset: 0.5,
color: '#e46432'
},
{
offset: 0.75,
color: '#e46432'
},
{
offset: 1,
color: '#e05126'
}
];
// params.dataIndex表示當(dāng)前柱子的索引
return {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: colorList
};
},
barBorderRadius: [10, 10, 0, 0] // 柱子的四個(gè)角分別設(shè)置圓角半徑
}
},
lineStyle: {
width: 3,//設(shè)置折線的粗細(xì)為2像素
},
label: {
show: true, // 顯示標(biāo)簽
position: 'top', // 標(biāo)簽位置
color: '#000'
},
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#df5126"
},
{
offset: 1,
color: "#df5126"
}
]
},
}
]
};
this.chart.setOption(option);
// 第一種情況監(jiān)聽瀏覽器窗口的變化 讓圖表重繪
window.addEventListener("resize", () => {
this.chart.resize();
});
// 在圖表初始化時(shí)，創(chuàng)建 Resize Observer 實(shí)例 第二種情況 監(jiān)聽頁面中DOM元素的寬度變化讓圖表重繪
const resizeObserver = new ResizeObserver(entries => {
entries.forEach((entry => {
// entry.target 是被觀察的DOM元素
// 在這里執(zhí)行圖表重繪的操作
this.chart.resize()
}))
})
// 將 Resize Observer 綁定到圖表的 DOM 元素上
const chartContainer = document.getElementById('center-bottom')
resizeObserver.observe(chartContainer)
}
},
destroyed() {
window.onresize = null;
},
}
</script>
<style scoped lang="scss">
.center-wrap {
width: 100%;
height: 100%;
.headTitle {
height: 30px;
width: 100%;
margin-top: 1px;
display: flex;
justify-content: flex-start;
align-content: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background: url(../../../assets/images/大屏/homeScreen_01.png) no-repeat center center;
background-size: cover;
.my-img {
width: 20px;
height: 20px;
margin: 4px 10px 0 22px;
}
.title {
height: 30px;
font-size: 16px;
color: #554C3A;
line-height: 32px;
letter-spacing: 1px;
text-align: center;
font-family: "也字工廠熬夜黑", cursive;
font-weight: bold;
margin: 0;
}
}
.center-bottom {
width: 100%;
height: calc(100% - 36px);
}
}
</style>總結(jié)：繪制一個(gè)完整的圖表需要
1.安裝 Echarts
2.準(zhǔn)備數(shù)據(jù)
3.創(chuàng)建容器
4.設(shè)置容器樣式
5.初始化圖表實(shí)例
6.配置圖表選項(xiàng)
7.渲染圖表
8.監(jiān)聽事件
9.更新圖表
10.銷毀圖表
值得注意的是，在創(chuàng)建容器的時(shí)候一定要給容器設(shè)置寬高，否則無法正常顯示，并且要考慮圖表重繪的問題，防止樣式錯(cuò)位。
到此這篇關(guān)于Echarts+VUE柱狀圖繪制細(xì)節(jié)并且屏幕自適應(yīng)的文章就介紹到這了,更多相關(guān)Echarts+VUE柱狀圖繪制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式(總結(jié))
這篇文章主要介紹了vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3中ref綁定dom或者組件失敗的原因及分析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3中g(shù)etCurrentInstance、頁面中route和router的獲取實(shí)現(xiàn)方式
這篇文章主要介紹了Vue3中g(shù)etCurrentInstance、頁面中route和router的獲取實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
今天小編就為大家分享一篇vue遍歷對象中的數(shù)組取值示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
一文詳解vue各種權(quán)限控制與管理實(shí)現(xiàn)思路
這篇文章主要為大家介紹了vue各種權(quán)限控制與管理的實(shí)現(xiàn)思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue-cli中設(shè)置publicPath的幾種方式對比
這篇文章主要介紹了vue-cli中設(shè)置publicPath的幾種方式對比，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue單頁面實(shí)現(xiàn)當(dāng)前頁面刷新或跳轉(zhuǎn)時(shí)提示保存
這篇文章主要介紹了vue單頁面實(shí)現(xiàn)當(dāng)前頁面刷新或跳轉(zhuǎn)時(shí)提示保存，在當(dāng)前頁面刷新或跳轉(zhuǎn)時(shí)提示保存并可取消刷新，以防止填寫的表單內(nèi)容丟失，感興趣的小伙伴們可以參考一下2018-11-11
vue.js使用v-pre與v-html輸出HTML操作示例
這篇文章主要介紹了vue.js使用v-pre與v-html輸出HTML操作,結(jié)合實(shí)例形式分析了vue.js基于v-pre與v-html屬性輸出HTML的具體操作技巧,需要的朋友可以參考下2018-07-07
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise實(shí)現(xiàn)基本
這篇文章主要介紹了Vue使用vue-recoure + http-proxy-middleware + vuex配合promise實(shí)現(xiàn)基本的跨域請求封裝問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁功能
當(dāng)今的Web開發(fā)趨勢中,前后端分離已經(jīng)成為一種流行的架構(gòu)模式,它將前端和后端的開發(fā)分離開來,使得前端和后端可以獨(dú)立進(jìn)行開發(fā)和部署,本文給大家介紹了Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁功能,需要的朋友可以參考下2024-06-06