目錄

• 橫向柱狀圖
  
• 動態更新資料和樣式
  
• 解決 echarts 寬高自適應問題
  
• 縱向柱狀圖
  
• 縱向柱狀圖實現
  
• 座標指示器背景漸變色
  
• 柱體設定不同顏色
  
• 柱狀圖上方顯示數值
  
• tooltip 提示框自定義
  
• 總體實現
• 總結

接上一篇# Echart Bar柱狀圖樣式詳解續寫，可以先看看上一篇，不看的話，影響也不是特別大。

橫向柱狀圖

動態更新資料和樣式

實現資料按月統計和按日統計的動態切換。按月統計時，每個月資料都會展示，x 軸顯示 12 個標籤；按日統計時，x 軸不完全顯示所有標籤，間隔顯示，而且柱狀體的寬度也會變化。主要是採用的是setOption方法。

官方文件[setOption]：echarts.apache.org/zh/api.html…

<script>
  import * as R from "ramda";

  const source1 = [
    ["1月",1330,666,560],["2月",820,760,660],......
    ["11月",901,880,360],["12月",934,600,700],];
  const source2 = [
    ["1日",["2日",......
    ["29日",["30日",];

  // 具體配置如之前所示，詳細省略，只做基本示例展示
  const initOption = {
    ...
    dataset: { source: source1 },};

  export default {
    data() {
      return {
        charts: null,isDaily: false,};
    },mounted() {
      this.charts = this.$echarts.init(
        document.getElementById("barCharts"),null,{
          renderer: 
 
"svg",}
      );
      this.charts.setOption(R.clone(initOption));
    },methods: {
      handleSource() {
        this.isDaily = !this.isDaily;
        this.charts.setOption(
          R.mergeDeepRight(initOption,{
            // 動態更新資料來源
            dataset: {
              source: this.isDaily ? source2 : source1,},xAxis: {
              // 動態更新標籤間隔
              axisLabel: {
                interval: this.isDaily ? 4 : "auto",series: R.map(
              // 動態更新柱體寬度
              (o) => ((o.barWidth = this.isDaily ? 12 : 24),o),initOption.series
            ),}),true
        );
        this.charts.resize();
      },};
</script>

解決 echarts 寬高自適應問題

在 web 專案中做圖表時，圖表的寬高不是固定的，需要隨著瀏覽器寬度高度自適應，使用的方法就是resize。如果有多個圖表，需要同時進行resize處理。

<script>
  export default {
    mounted() {
      window.addEventListener("resize",this.handleResize,false);
    },destroyed() {
      window.removeEventListener("resize",this.handleResize);
    },methods: {
      handleResize() {
        const _this = this;
        const timer = setTimeout(() => {
          _this.lineCharts.resize();
          _this.barCharts.resize();
        },500);
        // 清除定時器
        this.$once("hook:beforeDestroy",() => {
          setTimeout(timer);
        });
      },};
</script>

縱向柱狀圖

縱向柱狀圖實現

本質和橫向是一樣的，就是將 x，y 軸值更換一下；x 軸為value，y 軸為category

let option = {
  xAxis: {
    type: "value",yAxis: {
    type: "category",};

座標指示器背景漸變色

其實原理和橫向的一樣，就是漸變色處理的地方 x，y 值更換一下

let horizontalColor = {
  type: "linear",x: 1,// 更換
  y: 0,x2: 0,y2: 0,// 更換
  colorStops: [
    { offset: 0,color: "rgba(234,244,255,1)" },{ offset: 1,0.3)" },],global: false,};

柱體設定不同顏色

柱體的屬性設定series中color可以是一個函式，在函式中處理。核心程式碼為colorList[params.dataIndex]

let colorList = [
  "#1890ff","#52c41a","#faad14","#f5222d","#1DA57A","#d9d9d9",];
let series = [
  {
    type: "bar",barWidth: 16,itemStyle: {
      // 定製顯示（按順序）,實現不同顏色的柱體
      color: (params) => {
        return colorList[params.dataIndex];
      },dimensions: ["型別","銷售數量"],];

柱狀圖上方顯示數值

柱體的屬性設定series中label可以是一個函式，在函式中處理。可以設定位置，字型顏色和大小等。核心程式碼為params.value[params.encode.x[0]]。

let series = [
  {
    // ......
    type: "bar",label: {
      // 柱圖頭部顯示值
      show: true,position: "right",color: "#333",fontSize: "12px",formatter: (phttp://www.cppcns.comarams) => {
        return params.value[params.encode.x[0]];
      },];

tooltip 提示框自定義

和橫向的一樣，就是要注意取值params[0].axisValue,item.seriesName,item.value[item.encode.x[0]]

let tooltip = R.merge(tooltip,{
  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.x[0]]
                }</span>
              </div>客棧;`
            )
            .join("")}
        </div>`;
    return html;
  },});

總體實現

charts.setOption({
  title: {
    text: "銷售數量分佈",dataset: {
    source: [
      ["蘋果",200],["桃子",180],["葡萄",340],["香蕉",25qXlJYD0],["芒果",166],["榴蓮",185],xAxis: R.merge(yAxis,{
    type: "value",yAxis: R.mergeDeepRight(xAxis,{
    type: "category",axisPointer: {
      shadowStyle: {
        color: horizontalColor,series,tooltip,});

總結

到此這篇關於Echarts Bar橫向柱狀圖的文章就介紹到這了,更多相關Echarts Bar橫向柱狀圖內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！