Vue 整合 Echarts 並使用餅圖、柱形圖 ...

1. 使用Vue手腳架(Vue CLI)創建一個Vue項目

   • 在此之前你需要安裝node.js（官網：http://nodejs.cn/）。
   • 打開命令提示符(CMD)
   • 運行命令：vue create demo - demo是你的項目名，可以修改。
   • 按照提示創建項目。

2. 安裝Echarts依賴

   • Echarts官網：https://www.echartsjs.com/zh/index.html
   • 在cmd中進入項目根路徑。
   • 運行命令：npm install echarts --save

3. 整合Echarts

   • 打開項目文件的入口js文件main.js(項目/src/main.js)。
   • 添加下文部分

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

4. 寫一個demo

   • 在頁面js頭部添加以下代碼(script 之下 export default 之上)

     // 引入基本模板
     // let echarts = require('echarts/lib/echarts')
     // 引入柱狀圖組件
     require('echarts/lib/chart/bar')
     // 引入提示框和title組件
     require('echarts/lib/component/tooltip')
     require('echarts/lib/component/title')
     

   • 在頁面定義一個div,並添加一個Id以及寬高。
     <div id="myChart1" :style="{width: '500px', height: '400px'}"></div>
     • Id爲Echarts渲染時所需要的
     • 寬高如果不設置則頁面將不會顯示
   • 在頁面DOM加載完成後渲染Echarts圖表

       mounted(){
         // 需要在頁面DOM加載完成後加載圖表
         this.initEcharts()
       },
       methods: {
         initEcharts() {
           // 基於準備好的dom，初始化echarts實例
           let myChart1 = this.$echarts.init(document.getElementById('myChart1'))
           let dataAxis = ['在用', '待修', '在修', '備用', '調劑', '閒置', '待報廢', '報廢', '丟失', '歸檔', '其他'];
           let data = [
             { value: 54, name: '在用' },
             { value: 6, name: '待修' },
             { value: 3, name: '在修' },
             { value: 10, name: '備用' },
             { value: 10, name: '調劑' },
             { value: 2, name: '閒置' },
             { value: 5, name: '待報廢' },
             { value: 7, name: '報廢' },
             { value: 6, name: '丟失' },
             { value: 4, name: '歸檔' },
             { value: 8, name: '其他' }
           ]
           myChart1.setOption({
             title: {
               text: '資產總數(類型別)',
               x: '300px'
             },
             tooltip: {
               trigger: 'item',
               formatter: "{a} <br/>{b} : {c} ({d}%)"
             },
             legend: {
               orient: 'vertical',
               left: 'left',
               data: dataAxis
             },
             series: [{
               name: '資產數量',
               type: 'pie',
               radius: '55%',
               center: ['55%', '47%'],
               label: {
                 normal: {
                   formatter: '{b}:{d}%',
                   textStyle: {
                     fontWeight: 'normal',
                     fontSize: 15
                   }
                 }
               },
               data: data,
               itemStyle: {
                 emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
               }
             }]
           })
         }
       }