import * as echarts from '../../../../ec-canvas/echarts';

function initChart(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素比
    });
    canvas.setChart(chart);
    var dataname = ['老有所养', '社会治安', '生态环境', '体育设施', '社会救助', '文化设施', '基础教育', '病有所医']
    var datamax = [20, 20, 20, 20, 20, 20, 20, 20]
    var datavaule = [10, 16, 18, 15, 12, 18, 18, 18]
    var datavaule2 = [12, 17, 20, 16, 13, 19, 19, 19]
    var indicator = []
    for (var i = 0; i < dataname.length; i++) {
        indicator.push({
            name: dataname[i],
            max: datamax[i],
        })
    }
    var option =  {
        tooltip: {
            show: false,
            trigger: "item",
        },
        legend: {
            show: true,
            textStyle: {
                color: '#999999',
                rich: {
                    name: {
                        fontSize: 14,
                        lineHeight: 19,
                        padding: [20, 0, 0, 0]
                    },
                }
            },
            itemWidth: 6,
            itemHeight: 6,
            y: 'bottom',
            x: 'center',
            formatter: name => {
                return `{name|${name}}`
            },
            data: ['省满意度调查\n各项不满意人数', '社区满意度自查\n各项不满意人数'],
        },
        radar: {
            center: ["50%", "40%"],
            radius: "50%",
            startAngle: 90,
            splitNumber: 5,
            splitArea: {
                areaStyle: {
                    color: 'transparent'
                }
            },
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(226,226,226,0.28)"
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgba(226,226,226,0.61)"
                }
            },
            name: {
                textStyle: {
                    color: '#333333',
                    fontSize: 14,
                    borderRadius: 3,
                }
            },
            indicator: indicator
        },

        series: [{
            name: "省满意度调查\n各项不满意人数",
            type: "radar",
            symbol: "circle",
            symbolSize: 0,
            areaStyle: {
                normal: {
                    color: 'rgba(58,128,231,0.36)',
                }
            },
            itemStyle: {
                color: '#3A80E7',
                borderColor: '#3AB7FF',
                borderWidth: 1,
            },
            lineStyle: {
                normal: {
                    color: "#3AB7FF",
                    width: 2
                }
            },
            data: [datavaule]
        }, {
            name: "社区满意度自查\n各项不满意人数",
            type: "radar",
            symbol: "circle",
            symbolSize: 0,
            areaStyle: {
                normal: {
                    color: 'rgba(170, 216, 255, 0)',
                }
            },
            itemStyle: {
                color: '#EB8E16',
                borderColor: '#EF9700',
                borderWidth: 1,
            },
            lineStyle: {
                normal: {
                    color: "#EF9700",
                    width: 2
                }
            },
            data: [datavaule2]
        }]
    };
    chart.setOption(option);
    return chart;
}

Component({
    properties: {},
    data: {
        ec: {
            onInit: initChart
        }
    },
    methods: {
    }
});