欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

小程序 echarts 封装 异步请求数据 多调用

发表日期:2019-11 文章编辑:小灯 浏览次数:4703

直接上代码
`function setOption(paramChart, title, chartType, xdata, ydata,yscale, dataFlag) {

let intervalVal = 0
if (dataFlag == 'staffAct') {
    intervalVal = 'auto'
} else {
    intervalVal = 0
}
const option = {
    color: ['#fff'],
    title: {
        text: '',
        x: 'left',
        y: 'top',
        padding: 5,
        textStyle: {
            fontSize: 12,
            color: '#fff'
        },
    },
    grid: {
        left: '3%',
        right: '5%',
        bottom: 15,
        top: 15,
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: xdata,
        axisLine: {
            lineStyle: {
                color: "#fff",
            }
        },
        axisLabel: {
            interval: intervalVal,
            formatter: function (value) {
                var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
                if (reg.test(value)){
                    return (value.length > 4 ? (value.slice(0, 4) + "...") : value)
                }else{
                    return (value.length > 10 ? (value.slice(0, 10) + "...") : value)
                }
                
            },
            rotate: -90,
            fontSize:8,
        }
    },
    yAxis: {
        x: 'center',
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
        axisLine: {
            lineStyle: {
                color: "#fff",
            }
        },
        axisLabel: {
            fontSize: '12',
            formatter: '{value}' + yscale
        }
    },
    series: [{
        type: chartType,
        connectNulls: true, 
        // type: 'bar',
        smooth: true,
        barMaxWidth:15,
        // label: {
        //     normal: {
        //         show: true,
        //         position: 'top'
        //     }
        // },
        label: {
            normal: {                    
                textStyle: {
                    fontSize: 12,
                    rich: {}
                }
            }
        },
        data: ydata,
        
    }, ]
};
paramChart.setOption(option)

}`
data:
`
ecStaffAct: {

        lazyLoad: true
    },
    ecHeat: {
        lazyLoad: true
    },

`
调用:
`getStaffActData() {

    let self = this
    let param = {}
   
    
    app.wxreq(app.globalData.DOMAIN_PATH + app.globalData.--, param, 'POST').then(res => {
        if (res.code == 0) {
            let datas = []
            let chartKey = []
            let chartVal = []
            datas = res.data.visitTimeList
            if (datas && datas.length > 0) {
                datas.forEach(item => {
                    chartKey.push(item.time.substring(item.time.length - 5))
                    chartVal.push(item.count)
                });
            } else {
                chartVal.push(0)
            }
            self.init_ecStaffAct(chartKey, chartVal)
        }
    }).then(res => {

    })
},`

本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:http://dengtar.com/25255.html
相关小程序
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.