vue组建之——简单饼状图

父组件：

参数：

vue.cardData_1= {undefined

class: 'number_of_calls',

name: '拨打数量',

data: [

{key: '拨打数量', value: 30},

{key: '正在进行', value: 5}

]

};

子组件：

import Echartfrom 'echarts'

import {mapState} from 'vuex'

export default {undefined

title: '用户分析-- 饼状图',

name: "pieChart",

computed: {undefined

  ...mapState({undefined

    // chartData: state => state.vux.chartData

  })

},

components: {},

props: {undefined

  pieChartData: {undefined

    type: Object,

    default: () => ({undefined

      // 唯一ID

      id: 'defaultChart',

      // Chart的title

      name: '···加载中···',

      // legend的Name

      legendData: ['加载中···'],

      // 外圈title

      seriesOuterRingName: '加载中···',

      // 外圈值

      seriesOuterRingData:[{value: '0', name: '加载中···'}],

    })

}

},

data() {undefined

  return {}

},

created() {undefined

  let vue = this;

},

mounted() {undefined

  let vue = this;

  vue.initChart();

  // vue.$watch('chartData', () =>{undefined

// vue.initChart();

// })

},

methods: {undefined

  // 初始化Chart

  initChart() {undefined

    let vue = this;

    vue.chart= Echart.init(vue.$refs.pieEchart);

    vue.chart.setOption({undefined

      color: ['#0962F4','#FF4935','#2EDCFF','#409EFF'],

      tooltip: {undefined

        trigger: 'item',

        formatter: "{a}

{b}: {c}%"

      },

      legend: {undefined

        orient: 'horizontal',

        x: 'left',

        // top: '60%',

// width: '80px',

        data: vue.pieChartData.legendData

},

      series: {undefined

        name: vue.pieChartData.seriesOuterRingName,

        type:'pie',

        radius: ['40%', '60%'],

        label: {undefined

          normal: {undefined

            // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}',

// formatter: '{c} {per|{d}%}',

            formatter: '{per|{c}%}',

            backgroundColor: '#eee',

            borderColor: '#CCC',

            borderWidth: 1,

            borderRadius: 4,

            padding: [5, 7],

            rich: {undefined

              per: {undefined

                color: '#eee',

                backgroundColor: '#334455',

                padding: [2, 1],

                borderRadius: 2

              }

}

}

        },

        data: vue.pieChartData.seriesOuterRingData

}

})

}

}

}

.pieChart{undefined

width:100%;

height:180px;

padding-bottom:20px;

.chart{height:100%;}

.chartName{font-size:15px;font-weight:bold;padding:10px 5px;};

}