Echart Bar雙柱狀圖樣式最全詳解
更新時(shí)間：2021年08月25日 17:01:41 作者：時(shí)光足跡
echarts柱狀圖是用柱狀圖的形式展示數(shù)據(jù),這樣看起來(lái)比較直觀,下面這篇文章主要給大家介紹了關(guān)于Echart Bar雙柱狀圖樣式的相關(guān)資料,需要的朋友可以參考下
前言
在最近的項(xiàng)目中，有可視化圖表的需求，第一時(shí)間就想到了Echarts和Hightcharts。
要用到的可視化圖表都是比較常見(jiàn)的，Echarts文檔和實(shí)例都比較全面，而且還是中文的，方便閱讀，于是選擇了Echarts。
Echarts的圖表樣式如果是自用，肯定是沒(méi)啥問(wèn)題的，但是 UI 肯定是不滿(mǎn)意的，于是進(jìn)行了一系列的樣式調(diào)整...
安裝及配置
前端框架為easywebpack-vue，使用的Echarts版本為^5.0.1
Echarts 官方文檔: echarts.apache.org/zh/index.ht…
1. 安裝 Echarts
npm install echarts --save
2. 全局引入 Echarts
在 main.js 加入如下代碼：
import * as echarts from "echarts"; Vue.prototype.$echarts = echarts;
3. 按需引入 Echarts
（1）新增 echarts.js 文件
// 引入 echarts 核心模塊，核心模塊提供了 echarts 使用必須要的接口
import * as echarts from "echarts/core";
// 引入各種圖表，圖表后綴都為 Chart
import { BarChart, LineChart, PieChart } from "echarts/charts";
// 引入提示框，標(biāo)題，直角坐標(biāo)系等組件，組件后綴都為 Component
import {
TitleComponent,
TooltipComponent,
ToolboxComponent,
GridComponent,
LegendComponent,
AxisPointerComponent,
DatasetComponent,
} from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { SVGRenderer } from "echarts/renderers";
// 注冊(cè)必須的組件
echarts.use([
BarChart,
LineChart,
PieChart,
TitleComponent,
TooltipComponent,
ToolboxComponent,
GridComponent,
LegendComponent,
AxisPointerComponent,
DatasetComponent,
SVGRenderer,
]);
export default echarts;
（2）在 main.js 文件中引入
import echarts from "./utils/echarts"; Vue.prototype.$echarts = echarts;
使用舉例
<template>
<div id="charts" style="width: 600px; height: 400px"></div>
</template>
<script>
import * as R from "ramda";
export default {
mounted() {
this.initCharts();
},
methods: {
initCharts() {
let charts = this.$echarts.init(document.getElementById("charts"));
let option = {
title: {
text: "逐月消費(fèi)趨勢(shì)", // 標(biāo)題
subtext: "柱狀圖", // 副標(biāo)題
},
xAxis: {
type: "category",
},
yAxis: {
type: "value",
},
color: ["#1890ff", "#52c41a", " #faad14"], // 柱狀圖顏色
dataset: {
source: [
// 數(shù)據(jù)源
["1月", 1330, 666, 560],
["2月", 820, 760, 660],
["3月", 1290, 1230, 780],
["4月", 832, 450, 890],
["5月", 901, 880, 360],
["6月", 934, 600, 700],
],
},
series: [
// 圖標(biāo)列設(shè)置
{ type: "bar", stack: "total", name: "蘋(píng)果" },
{ type: "bar", stack: "total", name: "梨子" },
{ type: "bar", stack: "total", name: "桃子" },
],
tooltip: {
// 提示框組件
}
};
charts.setOption(option);
},
},
};
</script>
<style lang="scss" scoped></style>
原始效果展示：
改造后目標(biāo)效果展示：
樣式優(yōu)化
x 軸基礎(chǔ)樣式
基礎(chǔ)設(shè)置如下所示，可設(shè)置刻度和軸線相關(guān)的屬性
xAxis: {
type: "category",
boundaryGap: true, // 坐標(biāo)軸兩邊留白策略，默認(rèn)為true
axisTick: { // 刻度
show: false,
},
axisLabel: { // 刻度標(biāo)簽
color: "#808080",
fontSize: 12,
margin: 8, // 刻度標(biāo)簽與軸線之間的距離
interval: "auto", // x軸標(biāo)簽顯示間隔，自動(dòng)
},
axisLine: { // 軸線
lineStyle: {
color: "#c3c3c3",
width: 0.5,
},
},
splitLine: { // 分割線
show: false,
interval: "auto",
},
splitArea: { // 分割區(qū)域
show: false,
areaStyle: {},
},
},
最大和最小刻度標(biāo)簽
主要屬性是interval，要設(shè)置的足夠大，比正常展示的刻度個(gè)數(shù)大一些，就能實(shí)現(xiàn)只展示最大和最小刻度標(biāo)簽
xAxis: {
axisLabel: {
// interval: "auto",
interval: 50, // 只顯示最大和最小坐標(biāo)
showMinLabel: true, // 顯示最小刻度標(biāo)簽
showMaxLabel: true, // 顯示最大刻度標(biāo)簽
}
}
series 數(shù)據(jù)列懸浮高亮
const stackBarSeries = {
type: "bar", // 柱狀圖
barWidth: 32, // 柱體寬度
stack: "total", // 數(shù)據(jù)堆疊
showBackground: false, // 是否顯示柱條背景色
// 高亮的圖形樣式和標(biāo)簽樣式
emphasis: {
// 鼠標(biāo)hover時(shí)，同業(yè)務(wù)項(xiàng)高亮，其他項(xiàng)淡出圖形
// focus: "series",
// 默認(rèn)配置，僅當(dāng)前hover數(shù)據(jù)淡出
focus: "none",
},
};
let option = {
series: R.map(
(o) =>
R.merge(stackBarSeries, {
name: o,
}),
["蘋(píng)果", "梨子", "桃子"]
),
};
坐標(biāo)指示器背景漸變色
主要是設(shè)置tooltip提示框組件的trigger，讓 x 軸懸浮觸發(fā)；然后設(shè)置xAxis的坐標(biāo)指示器axisPointer，指示器遮罩樣式shadowStyle可以設(shè)置漸變色
let option = {
tooltip: {
// 提示框組件
trigger: "axis", // 坐標(biāo)軸觸發(fā)
},
xAxis: {
// 坐標(biāo)軸指示器
axisPointer: {
type: "shadow",
// 坐標(biāo)軸指示器的 z 值，控制圖形的前后順序
z: 1,
// 指示器遮罩樣式
shadowStyle: {
// 解決hover背景色漸變問(wèn)題
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(234,244,255,1)", // 0% 處的顏色
},
{
offset: 1,
color: "rgba(234,244,255,0.3)", // 100% 處的顏色
},
],
global: false, // 缺省為 false
},
// 設(shè)置背景色及陰影
// color: "rgba(234,244,255,1)",
// opacity: 1,
// shadowColor: "rgba(0, 0, 0, 0.5)",
// shadowBlur: 10,
// shadowOffsetX: 10,
// shadowOffsetY: 10,
},
},
},
};
tooltip 提示框自定義樣式
tooltip默認(rèn)的樣式或者值可能不符合開(kāi)發(fā)的要求，可以使用formatter函數(shù)自定義處理
let option = {
tooltip: {
// 提示框組件
trigger: "axis", // 坐標(biāo)軸觸發(fā)
padding: [20, 16, 12, 16],
backgroundColor: "#fff",
alwaysShowContent: false,
formatter: function(params) {
let html = `<div style="height:auto;width: 163px;">
<div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:16px;line-height:1;">
${params[0].axisValue}
</div>
${params
.map(
(
item
) => `<div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;">
<span style="display:inline-block;margin-right:8px;border-radius:6px;width:6px;height:6px;background-color:${
item.color
};"></span>
${item.seriesName}
<span style="flex:1;text-align:right;">¥${item.value[
item.encode.y[0]
] || 0}</span>
</div>`
)
.join("")}
<div style="display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#333;padding-top:4px;margin-bottom:8px;line-height:1;">
<span>總計(jì)</span>
<span>¥${R.reduceRight(
R.add,
0,
R.drop(1, params[0].value || [])
)}</span>
</div>
</div>`;
return html;
},
},
};
y 軸基礎(chǔ)樣式
let option = {
yAxis: {
type: "value",
minInterval: 100,
nameGap: 8,
axisLabel: {
color: "#808080",
fontSize: 10,
// formatter: (value) => {
// return moneyFormatValue(value);
// },
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#ebebeb",
width: 0.5,
},
},
},
};
legend 圖例樣式自定義
let option = {
grid: {
left: 0,
right: 12,
bottom: 0,
top: 68,
containLabel: true,
},
// 圖例設(shè)置
legend: {
top: 32,
left: -5,
icon: "circle",
itemHeight: 6, // 修改icon圖形大小
itemGap: 24,
textStyle: {
fontSize: 12,
color: "#333",
padding: [0, 0, 0, -8], // 修改文字和圖標(biāo)距離
},
},
};
總結(jié)
到此這篇關(guān)于Echart Bar雙柱狀圖樣式的文章就介紹到這了,更多相關(guān)Echart Bar雙柱狀圖樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
原生JS+CSS實(shí)現(xiàn)炫酷重力模擬彈跳系統(tǒng)的登錄頁(yè)面
今天小編給大家分享基于原生JS實(shí)現(xiàn)一個(gè)炫酷的登錄頁(yè)面，實(shí)現(xiàn)效果有點(diǎn)像重力模擬彈跳系統(tǒng)，效果非常棒，需要的朋友參考下實(shí)現(xiàn)代碼吧2017-11-11
收藏Javascript中常用的55個(gè)經(jīng)典技巧
收藏Javascript中常用的55個(gè)經(jīng)典技巧...2007-08-08
ionic js 模型 $ionicModal 可以遮住用戶(hù)主界面的內(nèi)容框
這篇文章主要介紹了ionic js 模型 $ionicModal 可以遮住用戶(hù)主界面的內(nèi)容框的相關(guān)資料,需要的朋友可以參考下2016-06-06
js string 轉(zhuǎn) int 注意的問(wèn)題小結(jié)
Javascript將string類(lèi)型轉(zhuǎn)換int類(lèi)型的過(guò)程中總會(huì)出現(xiàn)不如意的問(wèn)題，下面為大家介紹下js string轉(zhuǎn)int的一些注意的問(wèn)題，感興趣的朋友可以參考下2013-08-08
怎么理解wx.navigateTo的events參數(shù)使用詳情
這篇文章主要介紹了怎么理解wx.navigateTo的events參數(shù)使用詳情，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
詳解Bootstrap的aria-label和aria-labelledby應(yīng)用
這篇文章主要介紹了詳解Bootstrap的aria-label和aria-labelledby應(yīng)用的相關(guān)資料,需要的朋友可以參考下2016-01-01
js 表格排序(編輯+拖拽+縮放)實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-05-05
這篇文章主要為大家詳細(xì)介紹了原生JS封裝vue Tab切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了ES6正則的擴(kuò)展,結(jié)合實(shí)例形式詳細(xì)分析了ES6正則操作常用的修飾符、模式、屬性、方法及相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JavaScript判斷前綴、后綴是否是空格的方法,涉及javascript操作字符串的正則替換、判斷與屬性操作技巧,需要的朋友可以參考下2015-04-04