ECharts之階梯瀑布柱狀圖

效果圖

背景圖片

下載ECharts

npm install echarts --save

引入並註冊全局ECharts

    在 main.js 文件裏引入並註冊 ( 這裏是 Vue3.0 的模板 )

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在組件中使用ECharts

<template>
  <div class='wrapper'>
    <div class='chart' id='chart'></div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.drawChart()
  },
  methods: {
    drawChart () {
      // 基於準備好的dom，初始化echarts實例
      let chart = this.$echarts.init(document.getElementById('chart'))
      // 監聽屏幕變化自動縮放圖表
      window.addEventListener('resize', function () { chart.resize() })
      // 繪製圖表
      chart.setOption({
        // 設置圖表的位置
        grid: {
          x: 40, // 左間距
          x2: 40, // 右間距
          y: 80, // 上間距
          y2: 30, // 下間距
          // grid 區域是否包含座標軸的刻度標籤
          // 這常用於『防止標籤溢出』的場景，標籤溢出指的是，標籤長度動態變化時，
          // 可能會溢出容器或者覆蓋其他組件
          containLabel: true 
        },
        // dataZoom 組件 用於區域縮放
        dataZoom: [{
          type: 'inside',
          xAxisIndex: [0], // 設置 dataZoom-inside 組件控制的 x軸
          // 數據窗口範圍的起始和結束百分比  範圍: 0 ~ 100
          start: 0,
          end: 100
        }],
        // 圖表主標題
        title: {
          text: '總銷售額', // 主標題文本，支持使用 \n 換行
          top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具體的值或者百分比
          left: 'center', // 值: 'left', 'center', 'right' 同上
          textStyle: { // 文本樣式
            fontSize: 24,
            fontWeight: 600,
            color: '#fff'
          }
        },
        // 提示框組件
        tooltip: {
          trigger: 'axis', // 觸發類型, axis: 座標軸觸發
          textStyle: {
            fontSize: 14,
            color: '#d5dbff' // 文字顏色
          },
          // 提示框浮層內容格式器，支持字符串模板和回調函數兩種形式
          // 折線（區域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），{b}（類目值），{c}（數值）, {d}（無）
          formatter: '{b1}: {c1}萬'
        },
        // X軸
        xAxis: {
          type: 'category', // 座標軸類型,  'category' 類目軸，適用於離散的類目數據，爲該類型時必須通過 data 設置類目數據
          // 座標軸軸線
          axisLine: {
            lineStyle: {
              type: 'solid', // 座標軸線線的類型 'solid', 'dashed', 'dotted'
              color: '#676e88' // 座標軸線線的顏色
            }
          },
          // 座標軸刻度
          axisTick: {
            show: false
          },
          // 分隔線
          splitLine: {
            show: false
          },
          // 座標軸刻度標籤
          axisLabel: {
            fontSize: 14, // 文字的字體大小
            color: '#95B3D5', // 刻度標籤文字的顏色
            // 使用函數模板   傳入的數據值 -> value: number|Array,
            formatter: function (params) {
              var newParamsName = ''
              var paramsNameNumber = params.length
              var provideNumber = 4
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
          },
          // 類目數據，在類目軸（type: 'category'）中有效
          data: ['襯衫總銷售額', '褲子總銷售額', '外套總銷售額', '當年總銷售額', '預計總銷售額']
        },
        // Y軸
        yAxis: {
          type: 'value', // 座標軸類型,   'value' 數值軸，適用於連續數據
          // 座標軸在圖表區域中的分隔線
          splitLine: {
            show: true, // 是否顯示分隔線, 默認數值軸顯示
            lineStyle: {
              type: 'dashed', // 座標軸線線的類型 'solid', 'dashed', 'dotted'
              color: '#5d6e8c'
            }
          },
          // 座標軸軸線
          axisLine: {
            show: false
          },
          // 座標軸刻度
          axisTick: {
            show: false
          },
          // 座標軸刻度標籤
          axisLabel: {
            show: false
          }
        },
        series: [{
          type: 'bar', // 系列類型
          name: '輔助', // 系列名稱, 用於tooltip的顯示, legend 的圖例篩選
          // 數據堆疊，同個類目軸上系列配置相同的stack值後，後一個系列的值會在前一個系列的值上相加
          stack: '金額',
          // 圖形樣式
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)' // 柱條的顏色
            }
          },
          data: [0, 1000, 3000, 0, 2000] // 系列中的數據內容數組
        }, {
          type: 'bar', // 系列類型
          name: '運營管理', // 系列名稱, 用於tooltip的顯示, legend 的圖例篩選
          // 數據堆疊，同個類目軸上系列配置相同的stack值後，後一個系列的值會在前一個系列的值上相加
          stack: '金額',
          barMaxWidth: 50, // 柱條的最大寬度，不設時自適應
          // 圖形的樣式
          itemStyle: {
            normal: {
              color: '#4482AD', // 柱條的顏色
              barBorderRadius: [20, 20, 0, 0] // 圓角半徑, 單位px, 支持傳入數組分別指定 4 個圓角半徑
            }
          },
          // 圖形上的文本標籤
          label: {
            normal: {
              show: true,
              position: 'top', // 文本標籤的位置
              fontSize: 14, // 字體大小
              color: '#4482AD', // 字體顏色
              // 使用字符串模板，模板變量爲刻度默認標籤 {value}
              formatter: '{c0}萬'
            }
          },
          // 系列中的數據內容數組
          data: [1000, 2000, 3000, {
            value: 6000,
            itemStyle: {
              normal: {
                color: '#80FFFF',
                barBorderRadius: [0, 0, 0, 0]
              }
            }
          }, {
            value: 4000,
            label: {
              normal: {
                position: 'bottom'
              }
            },
            itemStyle: {
              normal: {
                color: '#4482AD',
                barBorderRadius: [0, 0, 18, 18]
              }
            }
          }]
        }]
      })
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
}
.wrapper .chart {
  width: 60%;
  height: 450px;
  margin: 100px auto 0;
  background: url(../../public/static/bg.png) no-repeat;
  background-size: 100% 100%;
}
</style>