评论分析echarts 柱状配置项内容和展示

      
var placeHolderStyle = {
    normal: {
        label: {
            show: false
        },
        labelLine: {
            show: false
        },
        color: "rgba(0,0,0,0)",
        borderWidth: 0
    },
    emphasis: {
        color: "rgba(0,0,0,0)",
        borderWidth: 0
    }
};


var dataStyle = {
    normal: {
        formatter: '{c}%',
        position: 'center',
        show: true,
        textStyle: {
            fontSize: '20',
            fontWeight: 'normal',
            color: '#34374E'
        }
    }
};


var option = {
    backgroundColor: "#FFFFFF",
    color: ['#429CF5', '#ff733f', '#ec4863'],

    title: [{
        text: '留评率',
        left: '80%',
        top: '45%',
        textAlign: 'center',
        textStyle: {
            //fontWeight: 'normal',
            fontSize: '14',
            color: '#666666',
            textAlign: 'center',
        },
    }, {
        text: '差评率',
        left: '80%',
        top: '85%',
        textAlign: 'center',
        textStyle: {
            color: '#666666',
            //fontWeight: 'normal',
            fontSize: '14',
            textAlign: 'center',
        },
    }],
    tooltip: {
    },
    legend: {"show": false
    },
    grid: {
        left: '5%',
        right: '35%',
        top: '16%',
        bottom: '6%',
        containLabel: true
    },

    xAxis: {
        type: 'category',
        "axisLine": {
            lineStyle: {
		        color: 'rgba(151,151,151,0.5)',
				type: 'dashed'
            }
        },
        "axisTick": {
            "show": false
        },
        axisLabel: {
            margin: 35,
            color: '#666',
            textStyle: {
                fontSize: 14,
                //fontWeight: 'bold', // 加粗
            },
        },
        data: ['5星', '4星', '3星', '2星', '1星']
    },
    yAxis: {
        "axisLine": {
            lineStyle: {
                //color: '#c0576d'
		        color: 'rgba(151,151,151,0.5)',
				type: 'dashed'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                //color: '#c0576d'
		        color: 'rgba(151,151,151,0.5)',
				type: 'dashed'
            }
        },
        "axisTick": {
            "show": false
        },
        axisLabel: {
            margin: 15,
            color: '#666',
            textStyle: {
                fontSize: 14,
            },
        },
        type: 'value'
    },
    series: [
        {
            name: '星级分布',
            //smooth: true,
            type: 'bar',
            barWidth: '35%',
			itemStyle: {
                //barBorderRadius: 10,
                visualMap: false,
                color: function(params) {
                    var index_color = params.value;
                    console.log(index_color, "1111color");
                    if (index_color < 100) {
                        return {
                            type: "linear",
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 0,
                            colorStops: [{
                                    offset: 0,
                                    color: "rgba(251,89,96,0.5)" // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#FB6260" // 100% 处的颜色
                                }
                            ]
                        };
                    }
                    else if (index_color >= 100 & index_color <= 150) {
                        return {
                            type: "linear",
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 0,
                            colorStops: [{
                                    offset: 0,
                                    color: "rgba(242,169,69,0.1)" // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#F2A93B" // 100% 处的颜色
                                }
                            ]
                        };
                    }
                    else {
                        return {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                    offset: 1,
                                    color: "rgba(0,189,137,0.1)" // 0% 处的颜色
                                },
                                {
                                    offset: 0,
                                    color: "#12ba8a" // 100% 处的颜色
                                }
                            ]
                        };
                    }
                }
            },
        label: {
            show: true,
            position: 'top', // 位置
            color: '#555555',
            fontSize: 14,
            fontWeight: 'bold', // 加粗
            distance: 10 // 距离
        }, // 柱子上方的数值
            data: [500, 350, 100, 30, 20]
        },
        {
            type: 'pie',
            hoverAnimation: false, //鼠标经过的特效
            radius: ['25%', '30%'],
            center: ['80%', '35%'],
            startAngle: 225,
            labelLine: {
                normal: {
                    show: false
                }
            },
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                    value: 100,
                    itemStyle: {
                        normal: {
                            color: '#E1E8EE'
                        }
                    },
                }, {
                    value: 35,
                    itemStyle: placeHolderStyle,
                },

            ]
        },
        //上层环形配置
        {
            type: 'pie',
            hoverAnimation: false, //鼠标经过的特效
            radius: ['25%', '30%'],
            center: ['80%', '35%'],
            startAngle: 225,
            labelLine: {
                normal: {
                    show: false
                }
            },
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                    value: 85,
                    itemStyle: {
                        normal: {
                            color: '#6F78CC'
                        }
                    },
                    label: dataStyle,
                }, {
                    value: 55,
                    itemStyle: placeHolderStyle,
                },

            ]
        },


        //第二个图表
        {
            type: 'pie',
            hoverAnimation: false,
            radius: ['25%', '30%'],
            center: ['80%', '75%'],
            startAngle: 225,
            labelLine: {
                normal: {
                    show: false
                }
            },
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                    value: 100,
                    itemStyle: {
                        normal: {
                            color: '#E1E8EE'


                        }
                    },

                }, {
                    value: 35,
                    itemStyle: placeHolderStyle,
                },

            ]
        },

        //上层环形配置
        {
            type: 'pie',
            hoverAnimation: false,
            radius: ['25%', '30%'],
            center: ['80%', '75%'],
            startAngle: 225,
            labelLine: {
                normal: {
                    show: false
                }
            },
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                    value: 15,
                    itemStyle: {
                        normal: {
                            color: '#FB6260'
                        }
                    },
                    label: dataStyle,
                }, {
                    value: 70,
                    itemStyle: placeHolderStyle,
                },

            ]
        }
    ]
    }