技術標籤：echarts

先看效果：圖一：

圖二：

數值大於零的在x軸上方，label在柱狀圖上方，小於零的在x軸下方，label在軸下方；相關程式碼如下：

<template>
  <div>
    <ChartTitle :name="config.titleName1" />
    <div id="areaRate"></div>
    <ChartTitle :name="config.titleName2" />
    <div id="difference"></div>
  </div>
</template>
<script>
import { fontSize } from "@/utils/fn";
import ChartTitle from "@/components/welcome/chartTitle";
import bus from "@/components/js/bus";
let fs16 = fontSize(0.16);
let fs36 = fontSize(0.36);
let fs18 = fontSize(0.18);
let list = [];
export default {
  components: { ChartTitle },
  data() {
    return {
      myChart: null,
      myChart2: null, 
    };
  },
  props: {
    config: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    // window.addEventListener("resize", this.resizeMyChart);
    // bus.$on("collapse", (msg) => {
    // });
    this.initChart();
    this.initChart2();
  },
  destroyed() {
    // window.removeEventListener("resize", this.resizeMyChart);
  },
  methods: {
    initChart() {
      this.myChart = this.$echarts.init(document.getElementById("areaRate"));
      let colorList = [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: this.config.oneTopColors[0], // 0% 處的顏色
            },
            {
              offset: 1,
              color: this.config.oneTopColors[1], // 100% 處的顏色
            },
          ],
          global: false, // 預設為 false
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: this.config.oneBottomColors[0], // 0% 處的顏色
            },
            {
              offset: 1,
              color: this.config.oneBottomColors[1], // 100% 處的顏色
            },
          ],
          global: false, // 預設為 false
        },
      ];
      let option = {
        grid: {  
            left: '5%',  
            right: '3%',  
        },
        tooltip: {
          formatter: "{b}<br>{a}：{c}",
        },
        toolbox: {
          show: false,
        },
        xAxis: [
          {
            position: "bottom",
            type: "category",
            nameLocation: "middle",
            offset:15,
            nameGap: 0,
            data: this.config.dataX,
            splitLine:{
                show:false,
                color: ["#BFCCE3"]
            },
            axisTick:{
                show:false
            },
            axisLine: {
              lineStyle: {
                color: 'rgb(191,204,227)',
                type: 'solid'
              }
            }
          },
        ],
        yAxis: [
           {
            type: "value",
            show: true,
            axisLine: {
                   lineStyle: {
                       color:'#fff',
                       width:'2'
                   }
               },
            splitLine: {
              show: true,
              lineStyle: {
                  color:['#BFCCE3'],
                  type: 'dashed'
              }
            },
            axisLabel:{
                show: true,
                color: "#A9B6CD",
                formatter: '{value}%'
            }
          },
        ],
        series: [
          {
            name: "學段課收增長率",
            type: "bar",
            fontSize: 20, 
            barWidth: 60,
            // barGap: 1,
            // barCategoryGap: 20,
            data: this.config.dataTop.map(item => {
              return {
                value: item,
                label: {
                  // 設定顯示label
                  show: true,
                  // 設定label的位置
                  position: item > 0 ? 'top' : 'bottom',
                  // 設定label的文字顏色
                  color: '#6783EE',
                  // 格式化label文字
                  formatter: item > 0 ? '+'+'{c}%' : '{c}%'
                },
                itemStyle:{
                  color: item > 0 ? colorList[0] : colorList[1],
                  barBorderRadius: item > 0 ? [5, 5, 0, 0] : [0, 0, 5, 5]
                }
              }
            }),
          },
        ],
      };
      this.myChart.setOption(option, true);
    },
    initChart2() {
      this.myChart2 = this.$echarts.init(document.getElementById("difference"));
      let colorList = [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: this.config.twoTopColors[0], // 0% 處的顏色
            },
            {
              offset: 1,
              color: this.config.twoTopColors[1], // 100% 處的顏色
            },
          ],
          global: false, // 預設為 false
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: this.config.twoBottomColors[0], // 0% 處的顏色
            },
            {
              offset: 1,
              color: this.config.twoBottomColors[1], // 100% 處的顏色
            },
          ],
          global: false, // 預設為 false
        },
      ];

      let option = {
        // 直角座標系內繪圖網格
        grid: {  
            left: '5%', // grid 元件離容器左側的距離
            right: '3%',  // grid 元件離容器右側的距離
        },
        // 提示框設定
        tooltip: {
          // 提示框浮層內容格式器
          formatter: "{b}<br>{a}：{c}",
        },
        toolbox: {
          show: false,
        },
        xAxis: [
          {
            position: "top", // x 軸的位置。
            type: "category", // 座標軸型別。
            nameLocation: "middle", // 座標軸名稱顯示位置。
            offset:15, // X 軸相對於預設位置的偏移
            nameGap: 0, // 座標軸名稱與軸線之間的距離。
            data: this.config.dataX,
            // 分割線設定
            splitLine:{
                show:false
            },
            // 座標軸刻度相關設定。
            axisTick:{ 
                show:false
            },
            // 座標軸軸線相關設定。
            axisLine: {
              lineStyle: {
                color: 'rgb(191,204,227)',
                type: 'solid'
              }
            }
          },
        ],
        yAxis: [
           {
            type: "value",
            show: true,
            // 座標軸軸線相關設定
            axisLine: {
                   lineStyle: {
                       color:'#fff', // 座標軸線線的顏色
                       width:'2' // 座標軸線線的寬度
                   }
               },
            //  y軸分割線設定
            splitLine: {
              show: true, // 是否顯示分割線
              lineStyle: {
                  color:['#BFCCE3'], // 分割線顏色
                  type: 'dashed' // 分割線型別
              }
            },
            // 座標軸刻度標籤的相關設定。
            axisLabel:{
                show: true, // 座標軸標籤是否顯示
                color: "#A9B6CD", // 座標軸標籤顏色
                formatter: '{value}%' // 座標軸標籤文案
            }
          },
        ],
        series: [
          {
            name: "學段課收差額",
            type: "bar",
            fontSize: 20, 
            // 標籤設定
            label: {
              normal: {
                show: true, // 標籤
                // 標籤內容格式化
                formatter: function(data){
                  if(data.value > 0){
                    return '{a|' + '+' + data.value + '%}'
                  } else {
                    return '{b|' + data.value + '%}'
                  }
                },
                // 自定義樣式
                rich: {
                  a: {
                    // 顏色設定
                      color: '#F68C9D',
                  },
                  b: { 
                    // 顏色設定
                      color: '#74C7C6'
                  }
                } 
              }
            },
            // 柱條的寬度
            barWidth: 60, 
            data: this.config.dataBottom.map(item => {
              return {
                value: item,
                label: {
                  // 設定顯示label
                  show: true,
                  // 設定label的位置
                  position: item > 0 ? 'top' : 'bottom',
                },
                itemStyle: {
                  // 設定柱條的背景色
                  color: item > 0 ? '#F68C9D' : '#74C7C6',
                  barBorderRadius: item > 0 ? [5, 5, 0, 0] : [0, 0, 5, 5] // 設定倒角
                } 
              }
            }),
          },
        ],
      };
      this.myChart2.setOption(option, true);
    },
  },
};
</script>
<style lang='less' scoped>
#areaRate {
  height: 2.8rem;
}
#difference {
  height: 2.8rem;
}
</style>