echarts 、vue-cli整合粘贴指南

vue-cli 使用Echarts笔记

第一步、

​ npm install echarts --save

第二步、

​ webstrom中 main.js中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LzrWyySz-1595859574119)(/home/shaomin/.config/Typora/typora-user-images/image-20200701093656041.png)]

window.echarts = require('echarts')

（因为require是node.js属于后端语言，浏览器无法识别）

第三步、

​ <script></script>中：

​ var echarts = require('echarts'); // 基于准备好的dom，初始化echarts实例

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

``

第四步、

​ 粘贴、改数据

注：使用自己引入的封装好的js，方法如下：

	1. assets 目录下创建js目录，并导入Js文件

 		2. js文件末尾加入![image-20200701113808551](/home/shaomin/.config/Typora/typora-user-images/image-20200701113808551.png)
              		3. 页面script标签内直接引用（或者在index.html中直接引用）![image-20200701114754585](/home/shaomin/.config/Typora/typora-user-images/image-20200701114754585.png)

echarts 、vue-cli整合粘贴指南

1. main.js

   // The Vue build version to load with the `import` command
   // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
   import Vue from 'vue'
   import App from './App.vue'
   import router from './router'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   import echarts from 'echarts'
   import axios from 'axios'
   import $ from 'jquery'
   
   
   Vue.config.productionTip = false
   Vue.use(ElementUI)
   Vue.use(echarts)
   Vue.prototype.$echarts = echarts
   Vue.prototype.$axios = axios;
   window.echarts = require('echarts')
   
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     router,
     components: { App },
     template: '<App/>',
   
   })
   
   

2. xxx.vue

   drawPic1: function (){
               let myChartTwo= this.$echarts.init(document.getElementById('pic1'));//获得对象
               let option = {
                 xAxis: {
                   type: 'category',
                   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                 },
                 yAxis: {
                   type: 'value'
                 },
                 series: [{
                   data: [820, 932, 901, 934, 1290, 1330, 1320],
                   type: 'line'
                 }]
               };
               myChartTwo.setOption(option);//执行option
             },
             
   

   3. 注意变量、函数加载前后顺序

   4. 跨域问题（使用node跨域，因为node属于后端，不属于前端的跨域问题）

      在/config/index.js中

      proxyTable: {
            '/api': {
              target: 'http://localhost:8081/', // 设置你调用的接口域名和端口号
              changeOrigin: true,   // 跨域
              pathRewrite: {
                '^/api': '/'
              }
            }
          },
      

      5. 具体使用：相当于/api替代了http://localhost:8081/

         this.$axios.get("/api/company/selectMany?i=0&j=10").then(result => {
               this.tableData=result.data;
             }).catch((e) => { alert("wrong") })
         
         

         6. echarts 分为5个要点：

            定义一个有尺寸的div---->通过dom获得div对象—>在methods中加载粘贴过来的变量、方法、数据—>通过dom对象执行setOption(option)，来画图

         注意事项：

         @click=“handleClick(scope.row)” 参数是把当前行当作一个对象传递

         this.$axios.get("/api/company/selectMany?i=0&j=10").then(result => {
           this.tableData=result.data;//result.data才能拿到数组，否则会报类型异常错误