{"id":4004,"date":"2018-06-30T16:35:46","date_gmt":"2018-06-30T08:35:46","guid":{"rendered":"https:\/\/ixyzero.com\/blog\/?p=4004"},"modified":"2018-06-30T16:35:46","modified_gmt":"2018-06-30T08:35:46","slug":"%e5%9c%a8vue2%e9%a1%b9%e7%9b%ae%e4%b8%ad%e4%bd%bf%e7%94%a8elementui%e5%92%8cecharts","status":"publish","type":"post","link":"https:\/\/ixyzero.com\/blog\/archives\/4004.html","title":{"rendered":"\u5728Vue2\u9879\u76ee\u4e2d\u4f7f\u7528ElementUI\u548cEcharts"},"content":{"rendered":"

=Start=<\/p>\n

\u7f18\u7531\uff1a<\/h4>\n

\u81ea\u5df1\u6bd5\u7adf\u4e0d\u662f\u4e13\u95e8\u505a\u524d\u7aef\/UI\u7684\uff0c\u6240\u4ee5\u5728\u9875\u9762\u5e03\u5c40\u4ee5\u53ca\u6837\u5f0f\u4e0a\u9762\u6ca1\u6709\u90a3\u4e48\u4e13\u4e1a\uff0c\u4f46\u7231\u7f8e\u4e4b\u5fc3\u4eba\u7686\u6709\u4e4b\uff0c\u6211\u4e5f\u60f3\u505a\u51fa\u4e00\u4e9b\u597d\u770b\u7684\u9875\u9762\uff0c\u7528\u7684\u65f6\u5019\u611f\u89c9\u4e5f\u4f1a\u597d\u4e9b\u3002\u8fd9\u65f6\uff0c\u5c31\u9700\u8981\u501f\u52a9\u4e00\u4e9bUI\u6846\u67b6\u4ee5\u53ca\u56fe\u8868\u5de5\u5177\u4e86\uff0c\u5bf9\u5e94\u7684\u6bd4\u8f83\u6d41\u884c\u7684\u5c31\u662fElementUI\u548cEcharts\u4e86\uff0c\u8fd9\u91cc\u7b80\u5355\u4ecb\u7ecd\u4e00\u4e0b\u5b83\u4eec\u5728Vue2\u7684\u9879\u76ee\u4e2d\u8be5\u5982\u4f55\u5f15\u5165\u548c\u4f7f\u7528\uff0c\u65b9\u4fbf\u4ee5\u540e\u53c2\u8003\u3002<\/p>\n

\u6b63\u6587\uff1a<\/h4>\n

\u53c2\u8003\u89e3\u7b54\uff1a<\/h5>\n
\u4e00\u3001Vue2.0 \u9879\u76ee\u4e2d\u600e\u6837\u6dfb\u52a0 ElementUI \u548c Echarts<\/strong><\/span><\/h6>\n

\u65b9\u6cd5\u4e00\uff1a\u76f4\u63a5\u5728 package.json \u6587\u4ef6\u91cc\u9762\u7684 dependencies \u91cc\u914d\u7f6e<\/strong><\/p>\n

\"echarts\": \"^4.1.0\",\r\n\"element-ui\": \"^2.0.0-rc.1\",<\/pre>\n
\u7136\u540e\u518d\u6267\u884c npm install \u547d\u4ee4\u3002<\/p>\n
\u65b9\u6cd5\u4e8c\uff1a\u76f4\u63a5\u6267\u884c\u547d\u4ee4<\/strong><\/p>\n
# -D\u9009\u9879\u7684\u4f7f\u7528\u662f\u4e3a\u4e86\u5c06\u5b89\u88c5\u7684\u4f9d\u8d56\u5199\u5165 package.json \u6587\u4ef6\uff0c\u65b9\u4fbf\u79fb\u690d\r\nnpm install element-ui --save -D\r\nnpm install echarts --save -D<\/pre>\n
\u4e8c\u3001<\/strong><\/span>Vue2.0 \u9879\u76ee\u4e2d<\/strong><\/span>\u5982\u4f55\u4f7f\u7528 ElementUI \u548c Echarts<\/strong><\/span><\/h6>\n
2.1 elemnt-ui \u53ea\u9700\u5728 main.js \u91cc\u6dfb\u52a0<\/strong><\/p>\n
\/\/ \u5f15\u5165\r\nimport ElementUI from 'element-ui'\r\nimport 'element-ui\/lib\/theme-chalk\/index.css'\r\n\/\/ \u4f7f\u7528\r\nVue.use(ElementUI)<\/pre>\n
2.2 \u5bf9\u4e8e\u7528\u5230 echarts \u7684\u9875\u9762\uff0c\u54ea\u4e2a\u9875\u9762\u7528\u5230\u5c31\u5728\u54ea\u4e2a.vue\u6587\u4ef6\u4e2d\u6dfb\u52a0<\/strong><\/p>\n
var echarts = require('echarts');<\/pre>\n
\u8865\u5145\uff1a.vue \u6587\u4ef6\u7ed3\u6784\u4ecb\u7ecd<\/strong><\/h6>\n
<template>\r\n  <div id=\"hello1\">\r\n    <p>\u6b22\u8fce\u4fe1\u606f\uff1a{{ msg }}<\/p>\r\n    <el-button>\u9ed8\u8ba4\u6309\u94ae<\/el-button>\r\n    <el-button type=\"primary\" @click=\"test\">\u4e3b\u8981\u6309\u94ae(\u53d8\u6362\u6b22\u8fce\u4fe1\u606f)<\/el-button>\r\n    <el-button type=\"success\">\u6210\u529f\u6309\u94ae<\/el-button>\r\n    <el-button type=\"info\">\u4fe1\u606f\u6309\u94ae<\/el-button>\r\n    <el-button type=\"warning\">\u8b66\u544a\u6309\u94ae<\/el-button>\r\n    <el-button type=\"danger\">\u5371\u9669\u6309\u94ae<\/el-button>\r\n  <\/div>\r\n<\/template>\r\n\r\n<script type=\"text\/javascript\">\r\nexport default {\r\n  name: 'hello1',\r\n  data () {\r\n    return {\r\n      msg: 'Welcome to Your Vue.js App'\r\n    }\r\n  },\r\n  methods: {\r\n    test () {\r\n      this.msg = \"hello world\"\r\n    }\r\n  }\r\n}\r\n<\/script>\r\n \r\n<style>\r\n<\/style><\/pre>\n
\u4e09\u3001\u7b80\u5355\u6837\u4f8b<\/strong><\/h6>\n
ElementUI\u6837\u4f8b<\/strong><\/p>\n
<template>\r\n  <div id=\"matchlog\">\r\n    <el-form :inline=\"true\" :model=\"formInline\" class=\"demo-form-inline\" style=\"margin: 15px\">\r\n    <el-form-item label=\"\u5ba1\u6279\u4eba\">\r\n      <el-input v-model=\"formInline.user\" placeholder=\"\u5ba1\u6279\u4eba\"><\/el-input>\r\n    <\/el-form-item>\r\n\r\n    <el-form-item label=\"\u6d3b\u52a8\u533a\u57df\">\r\n      <el-select v-model=\"formInline.region\" placeholder=\"\u6d3b\u52a8\u533a\u57df\">\r\n        <el-option label=\"\u533a\u57df\u4e00\" value=\"shanghai\"><\/el-option>\r\n        <el-option label=\"\u533a\u57df\u4e8c\" value=\"beijing\"><\/el-option>\r\n      <\/el-select>\r\n    <\/el-form-item>\r\n\r\n    <el-form-item>\r\n      <el-button type=\"primary\" @click=\"onSubmit\">\u67e5\u8be2<\/el-button>\r\n    <\/el-form-item>\r\n  <\/el-form>\r\n\r\n  <el-table ref=\"multipleTable\" :data=\"tableData\" tooltip-effect=\"dark\" style=\"width: 80%\"\r\n      @selection-change=\"handleSelectionChange\">\r\n      <el-table-column type=\"selection\" width=\"55\">\r\n      <\/el-table-column>\r\n\r\n      <el-table-column label=\"\u65e5\u671f\" width=\"120\" sortable>\r\n        <template slot-scope=\"scope\">{{ scope.row.date }}<\/template>\r\n      <\/el-table-column>\r\n      \r\n      <el-table-column prop=\"name\" label=\"\u59d3\u540d\" width=\"120\" sortable>\r\n      <\/el-table-column>\r\n      \r\n      <el-table-column prop=\"address\" label=\"\u5730\u5740\" show-overflow-tooltip sortable>\r\n      <\/el-table-column>\r\n  <\/el-table>\r\n\r\n  <\/div>\r\n<\/template>\r\n \r\n<script type=\"text\/javascript\">\r\n  export default {\r\n    data() {\r\n      return {\r\n        formInline: {\r\n          user: '',\r\n          region: ''\r\n        },\r\n        tableData: [{\r\n          date: '2016-05-03',\r\n          name: '\u738b\u5c0f\u864e',\r\n          address: '\u4e0a\u6d77\u5e02\u666e\u9640\u533a\u91d1\u6c99\u6c5f\u8def 1518 \u5f04'\r\n        }, {\r\n          date: '2016-05-02',\r\n          name: '\u738b\u5c0f\u864e',\r\n          address: '\u4e0a\u6d77\u5e02\u666e\u9640\u533a\u91d1\u6c99\u6c5f\u8def 1518 \u5f04'\r\n        }, {\r\n          date: '2016-05-04',\r\n          name: '\u738b\u5c0f\u864e',\r\n          address: '\u4e0a\u6d77\u5e02\u666e\u9640\u533a\u91d1\u6c99\u6c5f\u8def 1518 \u5f04'\r\n        }, {\r\n          date: '2016-05-01',\r\n          name: '\u738b\u5c0f\u864e',\r\n          address: '\u4e0a\u6d77\u5e02\u666e\u9640\u533a\u91d1\u6c99\u6c5f\u8def 1518 \u5f04'\r\n        }, {\r\n          date: '2016-05-08',\r\n          name: '\u738b\u5c0f\u864e',\r\n          address: '\u4e0a\u6d77\u5e02\u666e\u9640\u533a\u91d1\u6c99\u6c5f\u8def 1518 \u5f04'\r\n        }, {\r\n          date: '2016-05-06',\r\n          name: '\u738b\u5c0f\u864e',\r\n          address: '\u4e0a\u6d77\u5e02\u666e\u9640\u533a\u91d1\u6c99\u6c5f\u8def 1518 \u5f04'\r\n        }, {\r\n          date: '2016-05-07',\r\n          name: '\u738b\u5c0f\u864e',\r\n          address: '\u4e0a\u6d77\u5e02\u666e\u9640\u533a\u91d1\u6c99\u6c5f\u8def 1518 \u5f04'\r\n        }],\r\n        multipleSelection: [],\r\n      }\r\n    },\r\n    methods: {\r\n      onSubmit() {\r\n        console.log('submit!');\r\n      },\r\n      handleSelectionChange(val) {\r\n        this.multipleSelection = val;\r\n      },\r\n    }\r\n  }\r\n\r\n<\/script>\r\n\r\n<style>\r\n<\/style><\/pre>\n
Echarts\u6837\u4f8b<\/strong><\/p>\n
<template>\r\n  <div id=\"entry\">\r\n    <div>\r\n      <div id=\"echart_etl_stat\" style=\"height: 400px; width: 100%;\"><\/div>\r\n    <\/div>\r\n\r\n    <div>\r\n      <div id=\"echart_storm_stat\" style=\"height: 400px; width: 100%;\"><\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/template>\r\n \r\n<script type=\"text\/javascript\">\r\nvar echarts = require('echarts');\r\n\r\nfunction fetchData(cb) {\r\n    \/\/ \u901a\u8fc7 setTimeout \u6a21\u62df\u5f02\u6b65\u52a0\u8f7d\r\n    setTimeout(function() {\r\n        cb({\r\n            categories: [\"\u886c\u886b\",\"\u7f8a\u6bdb\u886b\",\"\u96ea\u7eba\u886b\",\"\u88e4\u5b50\",\"\u9ad8\u8ddf\u978b\",\"\u889c\u5b50\"],\r\n            data: [5, 20, 36, 10, 10, 20]\r\n        });\r\n    }, 3000);\r\n}\r\n\r\nexport default {\r\n  data () {\r\n    return {\r\n      message: \"\u6837\u4f8b\"\r\n    }\r\n  },\r\n  mounted: function() {\r\n    this.init_echarts();\r\n  },\r\n  methods: {\r\n    init_echarts () {\r\n      \/\/ \u57fa\u4e8e\u51c6\u5907\u597d\u7684dom\uff0c\u521d\u59cb\u5316echarts\u5b9e\u4f8b\r\n      var echart_etl_stat = echarts.init(document.getElementById('echart_etl_stat'));\r\n      \/\/ \u8bbe\u7f6eoption\r\n      var echart_etl_stat_option = {\r\n          title: {\r\n              text: '\u5df2\u63a5\u5165Topic\u65e5\u5fd7\u91cf\u7edf\u8ba1'\r\n          },\r\n          tooltip: {\r\n              trigger: 'axis'\r\n          },\r\n          legend: {\r\n              data:['category1', 'category2', 'category3', 'category4', ]\r\n          },\r\n          grid: {\r\n              left: '3%',\r\n              right: '4%',\r\n              bottom: '3%',\r\n              containLabel: true\r\n          },\r\n          toolbox: {  \/\/ \u53f3\u4e0a\u89d2\u7684\u5c0f\u5de5\u5177\u680f\r\n              \/\/ show : true,\r\n              \/\/ feature : {\r\n              \/\/     \/\/ mark : {show: true},\r\n              \/\/     dataView : {show: true, readOnly: true},\r\n              \/\/     magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},\r\n              \/\/     restore : {show: true},\r\n              \/\/     saveAsImage : {show: true}\r\n              \/\/ }\r\n          },\r\n          xAxis: {\r\n              type: 'category',\r\n              boundaryGap: false,\r\n              data: ['\u4e00\u6708','\u4e8c\u6708','\u4e09\u6708','\u56db\u6708','\u4e94\u6708','\u516d\u6708','\u4e03\u6708','\u516b\u6708','\u4e5d\u6708','\u5341\u6708','\u5341\u4e00\u6708','\u5341\u4e8c\u6708']\r\n          },\r\n          yAxis: {\r\n              type: 'value'\r\n          },\r\n          series: [\r\n            {name: 'category1', type: 'line', data: [0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0]},\r\n            {name: 'category2', type: 'line', data: [0, 0, 3, 1, 0, 0, 0, 5, 0, 0, 0, 0]},\r\n            {name: 'category3', type: 'line', data: [0, 1, 2, 0, 3, 0, 2, 0, 0, 4, 0, 0]},\r\n            {name: 'category4', type: 'line', data: [0, 0, 5, 0, 0, 5, 0, 0, 6, 0, 4, 0]},\r\n          ]\r\n      };\r\n      \/\/ \u7ed8\u5236\u56fe\u8868\r\n      echart_etl_stat.setOption(echart_etl_stat_option);\r\n\r\n\r\n      var echart_storm_stat = echarts.init(document.getElementById('echart_storm_stat'));\r\n      var echart_storm_stat_option = {\r\n          title: {\r\n              text: 'Storm\u5904\u7406\u91cf\u7edf\u8ba1'\r\n          },\r\n          tooltip: {},\r\n          legend: {\r\n              data:['\u9500\u91cf']\r\n          },\r\n          xAxis: {\r\n              data: []\r\n          },\r\n          yAxis: {},\r\n          series: [{\r\n              name: '\u9500\u91cf',\r\n              data: [],\r\n              type: 'bar',\r\n          }]\r\n      };\r\n      echart_storm_stat.setOption(echart_storm_stat_option);  \/\/ \u5fc5\u4e0d\u53ef\u5c11\uff0c\u5426\u5219\u4f1a\u62a5\u9519\r\n      echart_storm_stat.showLoading();\r\n      fetchData(function (data) {\r\n          echart_storm_stat.hideLoading();\r\n          echart_storm_stat.setOption({\r\n              xAxis: {\r\n                  \/\/ data: data.categories,\r\n                  data: [\"\u886c\u886b\",\"\u7f8a\u6bdb\u886b\",\"\u96ea\u7eba\u886b\",\"\u88e4\u5b50\",\"\u9ad8\u8ddf\u978b\",\"\u889c\u5b50\"],\r\n              },\r\n              series: [{\r\n                  \/\/ \u6839\u636e\u540d\u5b57\u5bf9\u5e94\u5230\u76f8\u5e94\u7684\u7cfb\u5217\r\n                  name: '\u9500\u91cf',\r\n                  \/\/ data: data.data,\r\n                  data: [5, 20, 36, 10, 10, 20],\r\n                type: 'bar',\r\n              }]\r\n          });\r\n      });\r\n\r\n    }\r\n  },\r\n}\r\n<\/script>\r\n \r\n<style>\r\n<\/style><\/pre>\n
\u56db\u3001\u4e00\u4e9b\u6ce8\u610f\u4e8b\u9879<\/strong><\/h6>\n
\u9700\u8981\u6ce8\u610f\u7684\u662f\uff1aEcharts\u5bf9\u5e94\u7684DOM\u5bb9\u5668\u5fc5\u987b\u8981\u6307\u5b9a\u5bbd\u9ad8\uff0c\u5426\u5219Echarts\u65e0\u6cd5\u6e32\u67d3dom \uff01\uff01\uff01<\/strong><\/span><\/p>\n
 <\/p>\n
\u9519\u8bef\uff1a
\nUncaught TypeError: Cannot read property ‘getAttribute’ of null
\n\u53c2\u8003\uff1a
\n\u8fd9\u4e2a\u9519\u8bef\u7684\u53d1\u751f\u662f\u56e0\u4e3a\u5f53\u65b9\u6cd5\u88ab\u8c03\u7528\u7684\u65f6\u5019\u8fd9\u4e2aHTML\u5143\u7d20\u7684\u5bf9\u8c61\u8fd8\u6ca1\u6709\u52a0\u8f7d\u8fdb\u53bb\uff0c\u6240\u4ee5\u4f60\u9700\u8981\u628a\u8fd9\u4e2a\u62a5\u9519\u7684\u65b9\u6cd5\u7528\u5728DOM\u5bf9\u8c61\u52a0\u8f7d\u4e4b\u540e\u3002<\/strong><\/span><\/p>\n
\u6216\u5219\u4f60\u628ajs\u6587\u4ef6\u7684\u8c03\u7528\u653e\u5728body\u7684\u6700\u540e\uff0c\u5c31\u662f\u4fd7\u79f0\u7684\u7f51\u9875\u5e95\u90e8\uff0c\u5728\u786e\u5b9a\u5bf9\u5e94\u7684HTML\u5143\u7d20\u88ab\u52a0\u8f7d\u4e4b\u540e\u518d\u8fd0\u884c\u3002<\/p>\n
\u5728 Vue2.0 \u91cc\u9762\u4e00\u822c\u5c31\u662f\u653e\u5728 mounted \u91cc\u9762\uff0c\u7136\u540e\u6574\u4e2a\u7f51\u9875\u5c31\u6062\u590d\u6b63\u5e38\u4e86\u3002<\/p>\n