// components/bar-chart/index.js
import * as echarts from '../../../ec-canvas/echarts'

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        chartId:{ 
            type: String
        },
        chartData:{
            type: Object
        }
    },
    observers: {
        chartData: function (val) {
            console.log(val)
            this.initChart() 
        },
    },
    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true
        },
        chart:undefined,
    },
    lifetimes: {
        created: function(){
        //在组件实例刚刚被创建时执行，注意此时不能调用 setData
        },
        attached: function () {
            //在组件实例进入页面节点树时执行
           
        },
        ready: function () {
            // 在组件在视图层布局完成后执行
          
            this.initChart();
        },
        detached: function () {
            // 在组件实例被从页面节点树移除时执行
        },
        
    },
    /**
     * 组件的方法列表
     */
    methods: {
        initChart(){
            var id ='#' +  this.data.chartId;
            this.component = this.selectComponent(id);
            this.component.init((canvas, width, height, dpr) => {
                let chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr
                })
                chart.setOption(this.getData());
                return chart;
            })
        },
        getData() {
            var data = this.data.chartData
            var option = {
                series: [
                    {
                        type: "pie",
                        radius: ["65%", "80%"],
                        label: {
                            normal: {
                                position: "center",
                            },
                        },
                        data: [
                            {
                                value: data.value,
                                label: {
                                    normal: {
                                        formatter: "{d} %",
                                        textStyle: {
                                            fontSize: 20,
                                            color: "#00ecfe",
                                            fontWeight:'bold',
                                        },
                                    },
                                },
                                itemStyle: {
                                    normal: {
                                        color: {
                                            // 完成的圆环的颜色
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: "#00cefc", // 0% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: "#367bec", // 100% 处的颜色
                                                },
                                            ],
                                        },
                                        labelLine: {
                                            show: false,
                                        },
                                    },
                                },
                            },
                            {
                                value: (100-data.value),
                                label: {
                                    normal: {
                                        formatter: "\n\n\n\n"+data.text,
                                        textStyle: {
                                            color: "#ffffff",
                                            fontSize: 12,
                                        },
                                    },
                                },
                                tooltip: {
                                    show: false,
                                },
                                itemStyle: {
                                    normal: {
                                        color: "#273259",
                                    }
                                },
                                hoverAnimation: false,
                            },
                        ],
                    },
                ],
            };
            return option;
        }
    }
})