攻克weex - eros的echarts數據加載（part3）

PS：最近公司在寫ios app，使用了這個框架搭建，好多好多的坑的說，弄得身心疲憊，到處找資源，找度娘，真的挺心累的，因為公司項目是個測試項目。有頁面編寫和數據加載這方面的內容，就我現在的了解程度，來做個簡單的總結，方便自己以後查閱。

config.js：

export const barChartInfo = {
     title : {
        text: '异步数据加载示例',
        x:'center',
        y:'10'
    },
    query:{
        minWidth:500,
        maxWidth:750,
        maxAspectRatio:1
    },
        tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: false, readOnly: false},
            magicType: {show: false, type: ['line', 'bar']},
            restore: {show: false},
            saveAsImage: {show: false}
        }
    },
    legend: {
        x: 'center',
        y:'bottom',
        data:['销量1','销量2','销量3','销量4','销量5']
    },
    xAxis: [
        {
            type: 'category',
            data:[],
            axisPointer: {
                type: 'shadow'
            },
            axisLabel: {
                interval:0,
                rotate:15
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            // name: 'K',
            min: 0,
            // max: 20000,
            // interval: 5,
            axisLabel: {
                formatter: '{value}k'
            }, 
            axisLabel:{
                inside:true
            },
            scale:true,
            axisLabel:{
                margin:2,
                formatter:function(value,index){
                    if(value>=10000&&value<10000000){
                        value = value/10000+'萬';
                    }else if(value>=10000000){
                        value = value/10000000+'千萬';
                    }
                    return value;
                }
            }
        },
        {
            type: 'value',
            // name: '%',
            min: 0,
            // max: 150,
            // interval: 50,
            axisLabel: {
                formatter: '{value}%'
            }
        }
    ],
    grid: {
        left: '3%',
        right: '4%',
        bottom: '11%',
        containLabel: true
    },
    color:[],
    series: []
};
           

vue

<template>
    <scroller class="item-container">
        <bmchart scr='bmlocal://assets/chart/bm-chart.html' :options="$format(barChartInfo)" @finish='finish' class="bmchart"></bmchart>
        <text>{{reData}}</text>
    </scroller>
</template>
<script>
import { WxcCell, WxcButton } from 'weex-ui'
import { barChartInfo} from './config'
export default {
    components: { WxcCell, WxcButton }, 
    data () {
        return {
          barChartInfo,
          reData:''
        }
    },
    created() {
        this.$fetch({
            method: "GET",
            url: "http://XXXXXX",
            data: {}
        })
        .then(res=>{
            this.barChartInfo={
                xAxis:{
                    data:res.TimeMarks
                },
                series:[
                    {
                        data:res.FirstDPSNumbers      
                    },
                    {
                        data:res.DPSNumbers
                    },
                    {
                        data:res.ActNumbers       
                    },
                    {
                        data:res.ReachedPercentages      
                    },
                    {        
                        data:res.FirstReachedPercentages    
                                
                    }
                ]
            }
        }
        ,error=>{
            this.reData=error
        })
    },
    methods: {     
        setChartBackground() {
            let backgroundColor = this.cycleChartInfo.backgroundColor === '#1da1f2' ? '#2c343c': '#1da1f2'
            this.cycleChartInfo.backgroundColor = backgroundColor
        },      
        finish () {
            this.$notice.toast({
              message: '图表渲染完毕'
            });
        }
    }
}
</script>
<style scoped>
.item-container {
    width: 750px;
    align-items: center;
    justify-content: center;
    background-color: #f2f3f4; 
}
.bmchart { 
    height:1400px;
    width:750px;
}
</style>
           

JSON:

{"TimeMarks":["Nov","Dec","Jan","Feb","Mar","W9(3/1~3/4)","W10(3/5~3/11)","W11(3/12~3/18)"],"DPSNumbers":[13.7,83.2,95.6,21.4,16.0,169.0,595.7,431.8],"FirstDPSNumbers":[146.7,88.9,52.8,264.6,128.0,26.9,50.7,40.7],"ActNumbers":[1351.7,805.4,966.9,250.9,63.0,22.6,16.1,44.5],"FirstReachedPercentages":[91.2,103.9,98.6,95.6,90.3,89.3,104.3,73.2],"ReachedPercentages":[101.7,100.5,100.6,101.6,97.2,119.9,103.4,79.8]}
           

附上差不多樣式的一張圖，但是數據不對的哈，大家注意一下：