在Vue2项目中使用ElementUI和Echarts

=Start=

缘由：

自己毕竟不是专门做前端/UI的，所以在页面布局以及样式上面没有那么专业，但爱美之心人皆有之，我也想做出一些好看的页面，用的时候感觉也会好些。这时，就需要借助一些UI框架以及图表工具了，对应的比较流行的就是ElementUI和Echarts了，这里简单介绍一下它们在Vue2的项目中该如何引入和使用，方便以后参考。

正文：

参考解答：

一、Vue2.0 项目中怎样添加 ElementUI 和 Echarts

方法一：直接在 package.json 文件里面的 dependencies 里配置

"echarts": "^4.1.0",
"element-ui": "^2.0.0-rc.1",

然后再执行 npm install 命令。

方法二：直接执行命令

# -D选项的使用是为了将安装的依赖写入 package.json 文件，方便移植
npm install element-ui --save -D
npm install echarts --save -D

二、Vue2.0 项目中如何使用 ElementUI 和 Echarts

2.1 elemnt-ui 只需在 main.js 里添加

// 引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 使用
Vue.use(ElementUI)

2.2 对于用到 echarts 的页面，哪个页面用到就在哪个.vue文件中添加

var echarts = require('echarts');

补充：.vue 文件结构介绍

<template>
  <div id="hello1">
    <p>欢迎信息：{{ msg }}</p>
    <el-button>默认按钮</el-button>
    <el-button type="primary" @click="test">主要按钮(变换欢迎信息)</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

<script type="text/javascript">
export default {
  name: 'hello1',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    test () {
      this.msg = "hello world"
    }
  }
}
</script>
 
<style>
</style>

三、简单样例

ElementUI样例

<template>
  <div id="matchlog">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin: 15px">
    <el-form-item label="审批人">
      <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    </el-form-item>

    <el-form-item label="活动区域">
      <el-select v-model="formInline.region" placeholder="活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 80%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>

      <el-table-column label="日期" width="120" sortable>
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      
      <el-table-column prop="name" label="姓名" width="120" sortable>
      </el-table-column>
      
      <el-table-column prop="address" label="地址" show-overflow-tooltip sortable>
      </el-table-column>
  </el-table>

  </div>
</template>
 
<script type="text/javascript">
  export default {
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        },
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: [],
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    }
  }

</script>

<style>
</style>

Echarts样例

<template>
  <div id="entry">
    <div>
      <div id="echart_etl_stat" style="height: 400px; width: 100%;"></div>
    </div>

    <div>
      <div id="echart_storm_stat" style="height: 400px; width: 100%;"></div>
    </div>

  </div>
</template>
 
<script type="text/javascript">
var echarts = require('echarts');

function fetchData(cb) {
    // 通过 setTimeout 模拟异步加载
    setTimeout(function() {
        cb({
            categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
            data: [5, 20, 36, 10, 10, 20]
        });
    }, 3000);
}

export default {
  data () {
    return {
      message: "样例"
    }
  },
  mounted: function() {
    this.init_echarts();
  },
  methods: {
    init_echarts () {
      // 基于准备好的dom，初始化echarts实例
      var echart_etl_stat = echarts.init(document.getElementById('echart_etl_stat'));
      // 设置option
      var echart_etl_stat_option = {
          title: {
              text: '已接入Topic日志量统计'
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              data:['category1', 'category2', 'category3', 'category4', ]
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          toolbox: {  // 右上角的小工具栏
              // show : true,
              // feature : {
              //     // mark : {show: true},
              //     dataView : {show: true, readOnly: true},
              //     magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              //     restore : {show: true},
              //     saveAsImage : {show: true}
              // }
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
          },
          yAxis: {
              type: 'value'
          },
          series: [
            {name: 'category1', type: 'line', data: [0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0]},
            {name: 'category2', type: 'line', data: [0, 0, 3, 1, 0, 0, 0, 5, 0, 0, 0, 0]},
            {name: 'category3', type: 'line', data: [0, 1, 2, 0, 3, 0, 2, 0, 0, 4, 0, 0]},
            {name: 'category4', type: 'line', data: [0, 0, 5, 0, 0, 5, 0, 0, 6, 0, 4, 0]},
          ]
      };
      // 绘制图表
      echart_etl_stat.setOption(echart_etl_stat_option);


      var echart_storm_stat = echarts.init(document.getElementById('echart_storm_stat'));
      var echart_storm_stat_option = {
          title: {
              text: 'Storm处理量统计'
          },
          tooltip: {},
          legend: {
              data:['销量']
          },
          xAxis: {
              data: []
          },
          yAxis: {},
          series: [{
              name: '销量',
              data: [],
              type: 'bar',
          }]
      };
      echart_storm_stat.setOption(echart_storm_stat_option);  // 必不可少，否则会报错
      echart_storm_stat.showLoading();
      fetchData(function (data) {
          echart_storm_stat.hideLoading();
          echart_storm_stat.setOption({
              xAxis: {
                  // data: data.categories,
                  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
              },
              series: [{
                  // 根据名字对应到相应的系列
                  name: '销量',
                  // data: data.data,
                  data: [5, 20, 36, 10, 10, 20],
                type: 'bar',
              }]
          });
      });

    }
  },
}
</script>
 
<style>
</style>

四、一些注意事项

需要注意的是：Echarts对应的DOM容器必须要指定宽高，否则Echarts无法渲染dom ！！！

错误：
Uncaught TypeError: Cannot read property ‘getAttribute’ of null
参考：
这个错误的发生是因为当方法被调用的时候这个HTML元素的对象还没有加载进去，所以你需要把这个报错的方法用在DOM对象加载之后。

或则你把js文件的调用放在body的最后，就是俗称的网页底部，在确定对应的HTML元素被加载之后再运行。

在 Vue2.0 里面一般就是放在 mounted 里面，然后整个网页就恢复正常了。

错误：
Uncaught Error: series.type should be specified.
参考：
https://segmentfault.com/q/1010000012411869

错误：
Uncaught TypeError: Cannot read property ‘get’ of undefined
参考：
echart_obj.setOption(echart_obj_option);
即便是空option 也需要先 setOption 之后再 setOption 其它的部分（当echarts的两个option存在不同的参数的时候），否则会报错。

参考链接：

=END=

30 6 月, 2018

Docker

KnowledgeBase, Programing

Echarts, ElementUI, Vue.js