Echart Bar雙柱狀圖樣式最全詳解
前言
在最近的項目中,有可視化圖表的需求,第一時間就想到瞭Echarts和Hightcharts。
要用到的可視化圖表都是比較常見的,Echarts文檔和實例都比較全面,而且還是中文的,方便閱讀,於是選擇瞭Echarts。
Echarts的圖表樣式如果是自用,肯定是沒啥問題的,但是 UI 肯定是不滿意的,於是進行瞭一系列的樣式調整…
安裝及配置
前端框架為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"; // 引入提示框,標題,直角坐標系等組件,組件後綴都為 Component import { TitleComponent, TooltipComponent, ToolboxComponent, GridComponent, LegendComponent, AxisPointerComponent, DatasetComponent, } from "echarts/components"; // 引入 Canvas 渲染器,註意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步 import { SVGRenderer } from "echarts/renderers"; // 註冊必須的組件 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: "逐月消費趨勢", // 標題 subtext: "柱狀圖", // 副標題 }, xAxis: { type: "category", }, yAxis: { type: "value", }, color: ["#1890ff", "#52c41a", " #faad14"], // 柱狀圖顏色 dataset: { source: [ // 數據源 ["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: [ // 圖標列設置 { type: "bar", stack: "total", name: "蘋果" }, { type: "bar", stack: "total", name: "梨子" }, { type: "bar", stack: "total", name: "桃子" }, ], tooltip: { // 提示框組件 } }; charts.setOption(option); }, }, }; </script> <style lang="scss" scoped></style>
原始效果展示:
改造後目標效果展示:
樣式優化
x 軸基礎樣式
基礎設置如下所示,可設置刻度和軸線相關的屬性
xAxis: { type: "category", boundaryGap: true, // 坐標軸兩邊留白策略,默認為true axisTick: { // 刻度 show: false, }, axisLabel: { // 刻度標簽 color: "#808080", fontSize: 12, margin: 8, // 刻度標簽與軸線之間的距離 interval: "auto", // x軸標簽顯示間隔,自動 }, axisLine: { // 軸線 lineStyle: { color: "#c3c3c3", width: 0.5, }, }, splitLine: { // 分割線 show: false, interval: "auto", }, splitArea: { // 分割區域 show: false, areaStyle: {}, }, },
最大和最小刻度標簽
主要屬性是interval,要設置的足夠大,比正常展示的刻度個數大一些,就能實現隻展示最大和最小刻度標簽
xAxis: { axisLabel: { // interval: "auto", interval: 50, // 隻顯示最大和最小坐標 showMinLabel: true, // 顯示最小刻度標簽 showMaxLabel: true, // 顯示最大刻度標簽 } }
series 數據列懸浮高亮
const stackBarSeries = { type: "bar", // 柱狀圖 barWidth: 32, // 柱體寬度 stack: "total", // 數據堆疊 showBackground: false, // 是否顯示柱條背景色 // 高亮的圖形樣式和標簽樣式 emphasis: { // 鼠標hover時,同業務項高亮,其他項淡出圖形 // focus: "series", // 默認配置,僅當前hover數據淡出 focus: "none", }, }; let option = { series: R.map( (o) => R.merge(stackBarSeries, { name: o, }), ["蘋果", "梨子", "桃子"] ), };
坐標指示器背景漸變色
主要是設置tooltip提示框組件的trigger,讓 x 軸懸浮觸發;然後設置xAxis的坐標指示器axisPointer,指示器遮罩樣式shadowStyle可以設置漸變色
let option = { tooltip: { // 提示框組件 trigger: "axis", // 坐標軸觸發 }, xAxis: { // 坐標軸指示器 axisPointer: { type: "shadow", // 坐標軸指示器的 z 值,控制圖形的前後順序 z: 1, // 指示器遮罩樣式 shadowStyle: { // 解決hover背景色漸變問題 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 }, // 設置背景色及陰影 // color: "rgba(234,244,255,1)", // opacity: 1, // shadowColor: "rgba(0, 0, 0, 0.5)", // shadowBlur: 10, // shadowOffsetX: 10, // shadowOffsetY: 10, }, }, }, };
tooltip 提示框自定義樣式
tooltip默認的樣式或者值可能不符合開發的要求,可以使用formatter函數自定義處理
let option = { tooltip: { // 提示框組件 trigger: "axis", // 坐標軸觸發 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>總計</span> <span>¥${R.reduceRight( R.add, 0, R.drop(1, params[0].value || []) )}</span> </div> </div>`; return html; }, }, };
y 軸基礎樣式
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, }, // 圖例設置 legend: { top: 32, left: -5, icon: "circle", itemHeight: 6, // 修改icon圖形大小 itemGap: 24, textStyle: { fontSize: 12, color: "#333", padding: [0, 0, 0, -8], // 修改文字和圖標距離 }, }, };
總結
到此這篇關於Echart Bar雙柱狀圖樣式的文章就介紹到這瞭,更多相關Echart Bar雙柱狀圖樣式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Echarts Bar橫向柱狀圖實例代碼
- 原生echart和vue-echart的使用詳解
- echarts柱狀堆疊圖實現示例(圖例和x軸都是動態的)
- Echarts直角坐標系x軸y軸屬性設置整理大全
- vue使用ECharts實現折線圖和餅圖