創新實訓——004

因爲一直在寫代碼，所以也一直沒寫博客，現在基本寫完了，我來總結一下我在編碼過程中遇到的問題和解決辦法吧。
這一篇主要介紹echarts和element-ui

使用echarts

因爲要做的系統要用到可視化，所以我就用之前用過的echarts吧，echarts是一種配置式的可視化工具，樣式很是比較多的，但靈活性還是要比像OpenGL這種編程式的差，但也可以基本滿足需要了。
前端框架使用的是Vue.js，下面介紹如何在其中引入echarts吧

• npm install echarts --save
• 在main.js中import echarts from 'echarts'和Vue.prototype.$echarts=echarts
• 然後在組件中我這裏以一個餅狀圖爲例，代碼如下所示：

<template>
    <div>
       <!--一定要有，相當於先聲明瞭個架子，然後往裏面填值-->
       <div  :style="{width: widthPie, height: heightPie}" ref="myEchart"></div>
    </div>
</template>
<script>
    // 引入基本模板（引用方式有很多種，我這裏可能會將所有的組件全部引用）
    import echarts from "echarts";
    //引入餅狀圖組件
    require('echarts/lib/chart/pie')
    // 引入提示框和title組件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
    export default {
        name: "graphForFirst",
        props: {
            widthPie:{type:String,default:"100%"},
            heightPie:{type:String,default:"500px"}
        },
        data(){
            return{
                chart:null,
                //option爲圖表的配置信息，可以定義圖表的樣式等
                option:{
                    title: {
                        text: '請求總覽',
                        left: 'center',
                        top: 20,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    backgroundColor:'#1e1e1e',
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: ['成功請求數量', '錯誤請求數量', '異常請求數量'],
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '數量',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: [
                                {value: 335, name: '成功請求數量'},
                                {value: 310, name: '錯誤請求數量'},
                                {value: 274, name: '異常請求數量'}
                            ],
                            roseType: 'radius',
                            label: {
                                color: '#fff'
                            },
                            itemStyle: {
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    ]
                }
//上述爲option
            }
        },
        mounted(){
            this.initChart();
            
        },
        beforeDestroy() {
            if (!this.chart) {
                return;
            }
            this.chart.dispose();
            this.chart = null;
        },
        methods:{
            initChart(){
                // 初始化echarts實例
                this.chart =echarts.init(this.$refs.myEchart);
                window.onresize=echarts.init(this.$refs.myEchart).resize;
                // 繪製圖表
                this.chart.setOption(this.option);
            }
        }
    }
</script>

樣子就是這樣：
關於echarts使用的重點就是option的設置，關於這方面官網非常詳細，見echarts官方教程

echarts的點擊事件

在本系統中要點擊圖標，然後做出對應的變化，所以就需要知道echarts如何使用點擊事件，使用方法如下：

initChart(){
                // 初始化echarts實例
                this.chart =echarts.init(this.$refs.myEchart);
                window.onresize=echarts.init(this.$refs.myEchart).resize;
                // 繪製圖表
                //這裏在添加點擊事件前，一定要先清空一下，否則會出現重複值的現像
                this.chart.setOption(this.option);
                if(this.chart._$handlers.click){
                    this.chart._$handlers.click.length = 0;
                }
                //增加餅狀圖選中事件
                var _this=this;
                this.chart.on('click',function(params){
                    console.log("params:"+params.name)
                    //回傳選中的選項，只能傳data中定義的
                    _this.piePara=params.name
                    _this.$emit('func',_this.piePara,_this.kind)
                })
            }

在initChart方法中做出如上改變即可

echarts反映實時值

因爲本系統要做一個實時的系統，實時性也要反映在echarts圖表上，按照我上面的寫法，option是作爲一個data的，這就非常好，因爲我們在實時獲取值之後就可以動態改變設置該option中的選項值，然後this.chart.setOption(that.option);重新設置選項值就可以達到想要的效果

感覺關於echarts也沒有其他好說的，具體去看官網就非常詳細

使用element-ui

element-ui非常適合vue框架，它的官網是：element-ui官網，提供的組件樣式也是非常多的
使用方法：

• npm install element-ui --save
• 在main.js中import 'element-ui/lib/theme-chalk/index.css'和Vue.use(ElementUI)
  然後就可以在組件中使用了，這裏我以導航欄組件爲例，代碼如下所示：

<!--導航欄組件-->
<template>
    <el-menu
      :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#1e1e1e"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router='true'>
      <el-menu-item index="/">總體概況</el-menu-item>
      <el-menu-item index="/statusPage">服務狀態</el-menu-item>
      <el-menu-item index="/securePage">安全審計</el-menu-item>
      <el-menu-item index="/ipPage">IP詳情</el-menu-item>
    </el-menu>
</template>
<script>
  export default {
    data() {
      return {
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

樣子就是這樣：

使用起來非常方便，而且官網還提供了示例代碼。