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 肯定是不滿意的，于是進(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: "蘋果" },
            { 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,
      }),
    ["蘋果", "梨子", "桃子"]
  ),
};

坐標(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)距離
    },
  },
};