VUE中使用echarts和jsonp和axios和vue-lazyload

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Miracle_Gaaral/article/details/86601502

cnpm install echarts --save

http://www.php.cn/js-tutorial-384897.html

cnpm install jsonp --save

https://github.com/webmodules/jsonp

自定义封装一个jsonp.js

/** * 
 * @authors longjun
 * @date    2019-01-22 21:35:06
 */

 import originJSONP from 'jsonp'

 export default function jsonp(url, data, option){
 	url += (url.indexOf('?')<0 ? '?': '&') + param(data)    //拼接url常用技巧

 	return new Promise((resolve, reject)=>{
 		originJSONP(url, option, (err, data)=>{
 			if(!err){
 				resolve(data)
 			}else{
 				reject(err)
 			}
 		})
 	})
 }

 //解析data数据,方便拼接到url后
 function param(data){
 	let url = ''
 	//通常url带的参数是一级的,所以只用遍历了一层
 	for (var k in data) {
 		let value = data[k] != undefined ? data[k] : ''
 		url += `&${k}=${encodeURIComponent(value)}`
 	}
 	return url ? url.substring(1) : ''
 }

Object.assign({},...sources)      拼接对象      es6中的语法

js中如果不是export default function(){}                则需要通过类似

这种方式引入------import {commonParams, options} from './config'

mounted(){

    setTimeout(() => {

    }, 20)            //保证DOM成功渲染,浏览器刷新通常是17ms一次,设置20ms是经验值

}

this.$refs.xxx.clientWidth   获取xxx的宽度

cnpm install axios --save

"axios": "^0.18.0",

注意:如果需要跨域请求,则要在config目录下的index.js文件中添加一段代码

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        //add by longjun 2019-01-23 begin
        '/api': {   //       /api 代表的是http://192.168.8.108:8088，
            target: 'http://192.168.8.108:8088/MLFinanceManage',  
            // target: 'http://192.168.8.122' ,
            changeOrigin: true,  // 允许跨域  这才是重点；
            pathRewrite: {
            '^/api': ''    
            }
        },
        //add by longjun end
    },

      	//通过axios获取"按收入级次统计分析"的数据
      	_getAjaxAsrjctjfx(date){
      		this.axios({
      			methods: "post",
      			url: "api/statistics/jctjfx",
      			params: {
      				date: date
      			}
      		}).then((res)=>{
      			// console.log(res.data)
      			if (res.data!="") {
      				this.tableData = this._normalizeData(res.data)    				
      			}      			
      			// console.log(this.tableData)
      		}).catch((err)=>{
      			console.log(err)
      		})
      	},