vue组建之——简单饼状图

父组件：

<chartPie :pieChartData="charData"></chartPie>

参数：

vue.cardData_1= {

  class: 'number_of_calls',

  name: '拨打数量',

  data: [

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

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

]

};

---

子组件：

---

<template>

  <div class="pieChart">

    <p class="chartName">{{pieChartData.name}}</p>

    <div :id="pieChartData.id" ref="pieEchart" class="chart"></div>

  </div>

</template>

<script>

  import Echartfrom 'echarts'

  import {mapState} from 'vuex'

  export default {

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

    name: "pieChart",

    computed: {

      ...mapState({

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

      })

    },

    components: {},

    props: {

      pieChartData: {

        type: Object,

        default: () => ({

          // 唯一ID

          id: 'defaultChart',

          // Chart的title

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

          // legend的Name

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

          // 外圈title

          seriesOuterRingName: '加载中···',

          // 外圈值

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

        })

}

    },

    data() {

      return {}

    },

    created() {

      let vue = this;

    },

    mounted() {

      let vue = this;

      vue.initChart();

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

//  vue.initChart();

// })

    },

    methods: {

      // 初始化Chart

      initChart() {

        let vue = this;

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

        vue.chart.setOption({

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

          tooltip: {

            trigger: 'item',

            formatter: "{a}
{b}: {c}%"

          },

          legend: {

            orient: 'horizontal',

            x: 'left',

            // top: '60%',

// width: '80px',

            data: vue.pieChartData.legendData

},

          series: {

            name: vue.pieChartData.seriesOuterRingName,

            type:'pie',

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

            label: {

              normal: {

                // 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: {

                  per: {

                    color: '#eee',

                    backgroundColor: '#334455',

                    padding: [2, 1],

                    borderRadius: 2

                  }

}

}

            },

            data: vue.pieChartData.seriesOuterRingData

}

})

}

}

}

</script>

<style scoped lang="less">

  .pieChart{

    width:100%;

    height:180px;

    padding-bottom:20px;

    .chart{height:100%;}

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

  }

</style>

---