app-big-data/component/chart/pie-chart.js

(function () {
    Vue.component('pie-chart', {
        template: '<div class="chart_box" >\
                        <div :id="chartid" class="chart_box"></div>\
                        <div class="tipdiv" :style="{color:color}" ><span  class="tiptitle">{{title}}</span><span class="tipnumber">{{config}}</span></div>\
                    </div>',
        props: ['config', 'color', 'title'],
        data: function () {
            return {
                chartid: _.uniqueId("chart_"),
                chart: null,
                percent:'',
                data:[]
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                this.chart = echarts.init(document.getElementById(this.chartid));
                console.log('来过')
                console.log(this.chart)
                if (this.config) {
                    var newdata =[];
                    newdata[0] =parseInt(this.config)/100*100;
                    newdata[1] =100- newdata[0];
                    this.data = newdata;
                    this.chart.setOption(this.setOption( this.data));
                }
            })

        },

        methods: {
            setOption: function (data) {
                var vm =this;
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                        show: false
                    },
                    legend:{
                        show:false
                    },
                    series: [{
                        type: 'pie',
                        radius: ['50%', '70%'],

                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
        　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        vm.color, '#dbe9f2',
                                    ];
                                    return colorList[params.dataIndex]
                                },
        　　　　　　　　　　　　　　//以下为是否显示，显示位置和显示格式的设置了
                                label: {
                                    show: true,
                                    position: 'top',
        //                             formatter: '{c}'
                                    formatter: '{b}\n{c}'
                                }
                            }
                        },
                        data: data
                    }]
                };
                return option


            }
        },
        watch: {
            config: function (data) {
                if (data) {
                    var newdata =[];
                    newdata[0] =parseInt(this.config)/100*100;
                    newdata[1] =100- newdata[0];
                    this.data = newdata;
                    this.chart.setOption(this.setOption(this.data));

                }
            }
        }
    })
})()