创新实训——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>

样子就是这样：

使用起来非常方便，而且官网还提供了示例代码。