Vue學(xué)習(xí)筆記-引入Echarts圖表

近期，公司出了一個(gè)新需求蔫骂，我們需要開發(fā)一個(gè)數(shù)據(jù)統(tǒng)計(jì)平臺(tái)，于是就需要使用圖表來是數(shù)據(jù)更直觀的呈現(xiàn)硬鞍。Echarts是我們的首選戴已。

重點(diǎn)：用較少的代碼實(shí)現(xiàn)比較酷炫的數(shù)據(jù)統(tǒng)計(jì)表.

ECharts，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫糖儡，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11握联，Chrome，F(xiàn)irefox纯露，Safari等）代芜，底層依賴輕量級(jí)的矢量圖形庫 ZRender，提供直觀挤庇，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表渴语。

豐富的可視化類型

ECharts 提供了常規(guī)的折線圖昆咽、柱狀圖屠升、散點(diǎn)圖狭郑、餅圖腹暖、K線圖翰萨，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖殖告、熱力圖雳锋、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖玷过、treemap、旭日?qǐng)D粤蝎，多維數(shù)據(jù)可視化的平行坐標(biāo)袋马，還有用于 BI 的漏斗圖，儀表盤虑凛，并且支持圖與圖之間的混搭。

除了已經(jīng)內(nèi)置的包含了豐富功能的圖表延柠，ECharts 還提供了自定義系列霉囚，只需要傳入一個(gè)renderItem函數(shù)匕积，就可以從數(shù)據(jù)映射到任何你想要的圖形，更棒的是這些都還能和已有的交互組件結(jié)合使用而不需要操心其它事情闪唆。

你可以在下載界面下載包含所有圖表的構(gòu)建文件，如果只是需要其中一兩個(gè)圖表悄蕾，又嫌包含所有圖表的構(gòu)建文件太大础浮，也可以在在線構(gòu)建中選擇需要的圖表類型后自定義構(gòu)建奠骄。

多種數(shù)據(jù)格式無需轉(zhuǎn)換直接使用

ECharts 內(nèi)置的 dataset 屬性（4.0+）支持直接傳入包括二維表，key-value 等多種格式的數(shù)據(jù)源影锈，通過簡單的設(shè)置 encode 屬性就可以完成從數(shù)據(jù)到圖形的映射蝉绷，這種方式更符合可視化的直覺，省去了大部分場景下數(shù)據(jù)轉(zhuǎn)換的步驟熔吗，而且多個(gè)組件能夠共享一份數(shù)據(jù)而不用克隆。

為了配合大數(shù)據(jù)量的展現(xiàn)讼载，ECharts 還支持輸入 TypedArray 格式的數(shù)據(jù)中跌，TypedArray 在大數(shù)據(jù)量的存儲(chǔ)中可以占用更少的內(nèi)存，對(duì) GC 友好等特性也可以大幅度提升可視化應(yīng)用的性能晒他。

下面介紹一下echarts的使用過程。

安裝echarts依賴

npm install echarts -S

或者使用國內(nèi)的淘寶鏡像：

安裝

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用
```
cnpm install echarts -S
```
創(chuàng)建圖表

main.js

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

使用步驟：

第一步：引用Js文件

<script type="text/javascript" src="js/echarts.js"></script>

第二步：準(zhǔn)備一個(gè)放圖表的容器（畫布）必須指定高度津滞，否則不會(huì)顯示

<div id="chartmain" style="width:600px; height: 400px;"></div>

第三步：echarts.init(dom容器)灼伤，初始化echarts實(shí)例,一般放在最后（定義）

var myChart = echarts.init(document.getElementById('chartmain'));

第四步：使用制定的配置項(xiàng)和數(shù)據(jù)顯示圖表,這兩步都放在最后（顯示）

myChart.setOption(option);

第五步：設(shè)置參數(shù)

柱狀圖其實(shí)也很簡單，只要修改一個(gè)參數(shù)就可以了狐赡。把series里的type 值修改為”bar”

餅圖和折線圖、柱狀圖有一點(diǎn)區(qū)別鸟雏。主要是在參數(shù)和數(shù)據(jù)綁定上览祖。餅圖沒有X軸和Y軸的坐標(biāo)，數(shù)據(jù)綁定上也是采用value 和name對(duì)應(yīng)的形式展蒂。

<template>
    <div>
        <div class="pubPart section1">
            <h3>數(shù)據(jù)概括</h3>
            <el-row>
                <el-col :span="6">
                    <div class="content">
                        <h6>日期</h6>
                        <h3>昨日</h3>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="content">
                        <h6>開機(jī)量(次)</h6>
                        <h3>0</h3>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="content">
                        <h6>開機(jī)數(shù)(臺(tái))</h6>
                        <h3>0</h3>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="content">
                        <h6>開機(jī)酒店(間) </h6>
                        <h3>0</h3>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <div class="content">
                        <h3>今日</h3>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="content">
                        <h3>0</h3>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="content">
                        <h3>0</h3>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="content">
                        <h3>0</h3>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="pubPart section2">
            <h3>數(shù)據(jù)詳情</h3>
            <div class="searchCondition">
                <el-row>
                    <el-col :span="12">
                        <el-radio-group size="big">
                            <el-radio-button label="昨日"></el-radio-button>
                            <el-radio-button label="近7日"></el-radio-button>
                            <el-radio-button label="近30日"></el-radio-button>
                        </el-radio-group>
                    </el-col>
                </el-row>
            </div>
            <el-row style="padding-top: 10px">
                <el-col :span="12">
                    <div id="chart1"
                         style="width: 500px;height:350px;border:1px solid rgba(144,144,144,0.42);">
                        <div id="myChart" :style="{width: '480px', height: '330px'}"></div>
                        <a style="margin-left: 80%" @click="toHistogram">查看更多...</a>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div id="chart2"
                         style="width: 500px;height:350px;border:1px solid rgba(144,144,144,0.42);">
                        <h3>酒店排行</h3>
                        <el-row :gutter="20" style="margin-bottom:20px;">
                            <el-col :span="4">
                                <el-button type="primary" @click="toHotel">酒店詳情</el-button>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" style="margin-bottom:20px;">
                        </el-row>
                        <el-table
                                :data="hotelData"
                                style="width: 100%">
                            <el-table-column
                                    prop="order"
                                    label="序號(hào)"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="酒店名稱"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="openCount"
                                    label="開機(jī)量">
                            </el-table-column>
                            <el-table-column
                                    prop="openNumber"
                                    label="開機(jī)數(shù)">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="pubPart section3">
            <el-row style="padding-top: 30px">
                <el-col :span="12">
                    <div id="chart3"
                         style="width: 500px;height:400px; border:1px solid rgba(144,144,144,0.42);">
                        <h3>地區(qū)排行</h3>
                        <el-row :gutter="20" style="margin-bottom:20px;">
                            <el-col :span="2">
                                <el-button type="primary" @click="toArea">地區(qū)詳情</el-button>
                            </el-col>
                        </el-row>
                        <el-table
                                :data="areaData"
                                style="width: 100%">
                            <el-table-column
                                    prop="order"
                                    label="序號(hào)"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="地區(qū)"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="openCount"
                                    label="開機(jī)量">
                            </el-table-column>
                            <el-table-column
                                    prop="openNumber"
                                    label="開機(jī)數(shù)">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div id="chart4"
                         style="width: 500px;height:400px;border:1px solid rgba(144,144,144,0.42);">
                        <mapHot></mapHot>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
  import mapHot from '@/components/echats/mapHot'

  export default {
    components: {
      mapHot
    },
    data() {
      return {
        data: '數(shù)據(jù)統(tǒng)計(jì)首頁',
        hotelData: [
          {
            'order': '1',
            'name': '智驛大酒店',
            'openCount': '100',
            'openNumber': '888800'
          }
        ],
        areaData: [
          {
            'order': '1',
            'name': '北京',
            'openCount': '100',
            'openNumber': '888800'
          }
        ],
        currentPage: 1
      }
    },
    mounted() {
      this.drawLine()
    },
    methods: {
      handleSizeChange() {
      },
      handleCurrentChange() {
      },
      toHotel() {
        this.$router.push({
          path: '/statistics/hotel'
        })
      },
      toArea() {
        this.$router.push({
          path: '/statistics/area'
        })
      },
      toHistogram() {
        this.$router.push({
          path: '/statistics/histogram'
        })
      },
      drawLine() {
        // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 繪制圖表
        myChart.setOption({
          title: { text: '近7日酒店開機(jī)情況' },
          tooltip: {},
          xAxis: {
            data: ['3月1日', '3月2日', '3月3日', '3月4日', '3月5日', '3月6日', '3月7日']
          },
          yAxis: {},
          series: [{
            name: '開機(jī)情況',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20, 90]
          }]
        })
      }
    }
  }
</script>

<template>
    <div class="echarts">
        <div :style="{height:'400px',width:'100%'}" ref="myEchart"></div>
    </div>
</template>
<script>
  import 'echarts/map/js/china.js' // 引入中國地圖數(shù)據(jù)

  export default {
    name: 'echarts',
    props: ['userJson'],
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.chinaConfigure()
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      chinaConfigure() {
        console.log(this.userJson)
        let myChart = this.$echarts.init(this.$refs.myEchart) //這里是為了獲得容器所在位置
        window.onresize = myChart.resize
        myChart.setOption({ // 進(jìn)行相關(guān)配置
          backgroundColor: '#02AFDB',
          tooltip: {}, // 鼠標(biāo)移到圖里面的浮動(dòng)提示框
          dataRange: {
            show: false,
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['orangered', 'yellow', 'lightskyblue']
          },
          geo: { // 這個(gè)是重點(diǎn)配置區(qū)
            map: 'china', // 表示中國地圖
            roam: true,
            label: {
              normal: {
                show: true, // 是否顯示對(duì)應(yīng)地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
            type: 'scatter',
            coordinateSystem: 'geo' // 對(duì)應(yīng)上方配置
          },
            {
              name: '啟動(dòng)次數(shù)', // 浮動(dòng)框的標(biāo)題
              type: 'map',
              geoIndex: 0,
              data: [{
                'name': '北京',
                'value': 599
              }, {
                'name': '上海',
                'value': 142
              }, {
                'name': '黑龍江',
                'value': 44
              }, {
                'name': '深圳',
                'value': 92
              }, {
                'name': '湖北',
                'value': 810
              }, {
                'name': '四川',
                'value': 453
              }]
            }
          ]
        })
      }
    }
  }
</script>