echarts：vue項目中使用柱狀圖

安裝Echarts

# 最新穩定版
$ cnpm install echarts --save

代碼：

父組件：

<template>
  <div>
    <basic-bar></basic-bar>
  </div>
</template>

<script>
import BasicBar from './BasicBar'

export default {
  name: 'home',
  components: {
    BasicBar
  }
}
</script>

子組件（官方代碼）：

<template>
  <div>
    <div ref="chart1" style="width:100%;height:400px;text-align: center;"></div>
  </div>
</template>

<script>
export default {
  name: 'BasicBar',
  data () {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }]
      }
    }
  },
  mounted () {
    var echarts = require('echarts')
    echarts.init(this.$refs.chart1).setOption(this.option, true)
  }
}
</script>

<style scoped>

</style>

效果：

 由於Bar的寬度太寬，我們可以在series中設置barWidth屬性來控制Bar的寬度

series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          barWidth: 40
        }]

效果如下：

 帶背景色的柱狀圖：在series中添加showBackground屬性來控制是否顯示Bar的背景色

series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          barWidth: 40,
       showBackground: true，

　　　　　　backgroundStyle: {
  　　　　　　　color: 'rgba(180, 180, 180, 0.2)'
　　　　　　}

        }]

效果如下：

 在series中添加itemStyle屬性控制Bar的顏色：

series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          barWidth: 40,
          showBackground: true,
          itemStyle: { normal: { // 配置柱狀圖顏色
              color: function () {
                return '#CD69C9' } } }
        }]

效果如下：

  在series中添加itemStyle屬性控制是否顯示文字，文字顯示的位置，文字的大小以及樣式

itemStyle: {
  normal: {
    // 配置柱狀圖顏色
    color: function () {
      return '#CD69C9'
    },
    // 顯示數值
    label: {
      show: true, // 開啟顯示
      position: 'top', // 在上方顯示
      textStyle: { // 數值樣式
        color: 'red',
        fontSize: 18
      }
    }
  }
}

效果：

   在series中添加itemStyle屬性控制鼠標懸停在Bar上的樣式

series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          barWidth: 40,
          showBackground: true,
          itemStyle: {
            normal: {
              // 配置柱狀圖顏色
              color: function () {
                return '#CD69C9'
              },
              // 顯示數值
              label: {
                show: true, // 開啟顯示
                position: 'top', // 在上方顯示
                textStyle: { // 數值樣式
                  color: 'red',
                  fontSize: 18
                }
              }

            },
            // 鼠標懸停時
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)' }
          }
        }]

效果如下：

 控制y軸是否顯示：

yAxis: {
          type: 'value',
          axisLine: { show: true }
        },

效果如下：

 控制x軸和y軸文字的顏色和大小：

xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: { textStyle: { color: '#999',
              fontSize: 18 } }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true
          },
          axisLabel: { textStyle: { color: '#999',
              fontSize: 18 } }
        },

效果如下：

 控制柱狀圖的寬度

<template>
  <div>
    <div ref="chart1" style="width:100%;height:400px;text-align: center;"></div>
  </div>
</template>

 坐標軸刻度與標簽對齊：給xAxis添加屬性axisTick；

xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            textStyle: {
              color: '#999',
              fontSize: 18
            }
          },
         axisTick: { alignWithLabel: true }
        },

效果如下：

最終代碼：

<template>
  <div>
    <div ref="chart1" style="width:100%;height:400px;text-align: center;"></div>
  </div>
</template>

<script>
export default {
  name: 'BasicBar',
  data () {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            textStyle: {
              color: '#999',
              fontSize: 18
            }
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true
          },
          axisLabel: {
            textStyle: {
              color: '#999',
              fontSize: 18
            }
          }
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          barWidth: 40,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          itemStyle: {
            normal: {
              // 配置柱狀圖顏色
              color: function () {
                return '#CD69C9'
              },
              // 顯示數值
              label: {
                show: true, // 開啟顯示
                position: 'top', // 在上方顯示
                textStyle: { // 數值樣式
                  color: 'red',
                  fontSize: 18
                }
              }

            },
            // 鼠標懸停時
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
    }
  },
  mounted () {
    var echarts = require('echarts')
    echarts.init(this.$refs.chart1).setOption(this.option, true)
  }
}
</script>

<style scoped>

</style>