攻克weex - eros餅圖數據加載（part4）

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

xx.vue頁面： 

<template>
  <div class="iPhoneActivationhome"> 
    <slider class="slider size" auto-play="false">
      <div>
            <text class="bmtitle">XXX</text>
            <scroller class="item-container">
                <bmchart scr='bmlocal://assets/chart/bm-chart.html' :options="$format(lineChartInfo)" @finish='finish' class="bmchartline"></bmchart>
                <bmchart scr='bmlocal://assets/chart/bm-chart.html' ref="chart" :options="$format(cycleChartInfo)" @finish='finish' class="bmchartcyc"></bmchart>
            </scroller>
            <div class="comtablemodel"></div>
      </div>
      <indicator class="indicator"></indicator>
    </slider>
  </div>
</template>

<script>
import { WxcCell, WxcButton } from 'weex-ui'
import { 
        cycleChartInfo, 
        lineChartInfo,
  } from './config'
  export default {
    components: { WxcCell, WxcButton }, 
    data () {
      return {
        cycleChartInfo,
        lineChartInfo,
      }
    },
     created() {
        this.$fetch({
            method: "GET",
            url: "http://XXX",
            data: {}
        })
        .then(res=>{
            this.lineChartInfo={
                xAxis:{
                    data:res.timeMarkList
                },
                series:[
                    {
                        data: res.runPercentageList   
                    }
                ]                
            },
            this.cycleChartInfo={            
                color:res.colorList, 
                legend:{
                    data:res.nameList
                },           
                series : [{
                    data:(function(){
                        var circle=[];
                        for(let index in res.nameList){
                            circle.push({
                                name:res.nameList[index],
                                value:res.yList[index]
                            })
                        }
                        return circle;
                    })()                 
                }]
            }            
                     
        }             
        ,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 lang="sass" scoped>
@import 'src/assets/css/activaationhome';
</style>

config.js：  

export const cycleChartInfo = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : ({d}%)"
    },
    legend: {
        // orient: 'vertical',
        x: 'center',
        y:'bottom',
        data: []
    },
    color:[],
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '43%',
            center: ['52%', '50%'],
            data:[],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            itemStyle:{
                normal:{
                    label:{
                        show:true,
                        formatter:'{b}:{c}%'
                    },
                }
            }
        }
    ]
}
export const lineChartInfo = {
    title: {
        text: 'XXXXX',
        left: 'center',
        textStyle:{
            fontSize:15
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}'
    },
    legend: {
        x: 'center',
        bottom:'0',
        data: []
    },
    xAxis: {
        type: 'category',
        name: 'x',
        splitLine: {show: false},
        data: [],
        axisLabel: {
            interval:0,
            rotate:15
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '11%',
        containLabel: true
    },
    yAxis: {
        type: 'value',
        name: '百分比',
        axisLabel: {
            formatter: '{value}%'
        }, 
    },
    color:['#0000ff'],
    series: [
        {
            name: 'XXXXX',
            type: 'line',
            data: [],
            lineStyle:{
                normal:{
                    width:3                                                     
                }
            },
            itemStyle:{
                normal:{
                    borderWidth:4,
                    label:{
                        show:true,
                        formatter:'{c}%'
                    },
                }
            }
        }
    ]
};

如下所示：