渐变色柱状图echarts 柱状配置项内容和展示

       /**
     * ********************************************
     * ***********涨跌幅排名 ajax 交互*********
     * ********************************************
     */
    // echarts 图表初始化开始，无关后台数据交互
    // var rank1 = echarts.init(document.getElementById('rank1'));
    // var rank2 = echarts.init(document.getElementById('rank2'));
    var option = {
        tooltip: {
            trigger: 'axis',
            textStyle: {
                align: 'left',
                color: '#5cc1ff',
                // color: '#fff',
                fontSize: '16'
            },
            backgroundColor: 'rgba(15, 52, 135, 0.5)',
            borderWidth: '1',
            borderColor: '#5cc1ff',
            extraCssText: 'box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);',
            formatter: function(params) {
                return "<span>" + params[0].name + "</span>" + "<br />" + "<span>苹果批发价格涨跌幅: </span>" + "<span>" + params[0].value + "%</span>";
            }
        },
        label: {
            normal: {
                textStyle: {
                    color: "#ff3b00"
                }
            },
            emphasis: {
                textStyle: {
                    color: "#ff3b00"
                }
            }
        },
        grid: {
            left: '1%',
            right: '7%',
            bottom: '1%',
            top: '30',
            containLabel: true
        },
        yAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: '#8ac7ff'
                }
            },
            axisTick: {
                show: false,
                interval: 0,
                alignWithLabel: true
            },
            axisLabel: {
                interval: 0,
                rotate: '0',
                textStyle: {
                    fontSize: 10,
                    color: '#cee8ff'
                }
            },
            data: ['宁夏', '四川', "内蒙古", '新疆', "江苏", "山西", "陜西", "河南", "河北", "山东"],
            splitLine: {
                show: false
            }
        },
        xAxis: {
            type: 'value',
            name: '',
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['rgba(138, 199, 255, .2)']
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#01c2db'
                }
            }
        },
        series: [{
            name: '数量',
            type: 'bar',
            stack: '总量',
            barWidth: 20,
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: "{c}%"
                }
            },
            itemStyle: {
                normal: {
                    barBorderWidth: '0',
                    barBorderRadius: [10, 10, 10, 10],
                    barBorderColor: '#f97b00',
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgba(255, 82, 22, 0.4)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 152, 52)'
                    }])
                },
                emphasis: {
                    barBorderColor: '#644424',
                    barBorderWidth: '1'
                    // color: 'rgba(26,177,98,.8)'
                }
            },
            // 顺序 从下向上 传入
            data: [370, 1250, 1600, 2335, 1278, 550, 700, 1820, 450, 790]
        }]
    };
    var option = {
        tooltip: {
            trigger: 'axis',
            textStyle: {
                align: 'left',
                color: '#5cc1ff',
                // color: '#fff',
                fontSize: '16'
            },
            backgroundColor: 'rgba(15, 52, 135, 0.5)',
            borderWidth: '1',
            borderColor: '#5cc1ff',
            extraCssText: 'box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);',
            formatter: function(params) {
                return params[0].name + "<br />" + "<span>苹果批发价格涨跌幅: </span>" + "<span>" + params[0].value + "%</span>";
            }
        },
        label: {
            normal: {
                textStyle: {
                    color: "rgb(0,255,132)"
                }
            },
            emphasis: {
                textStyle: {
                    color: "rgb(0,255,132)"
                }
            }
        },
        grid: {
            left: '1%',
            right: '7%',
            bottom: '1%',
            top: '30',
            containLabel: true
        },
        yAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: '#8ac7ff'
                }
            },
            axisTick: {
                show: false,
                interval: 0,
                alignWithLabel: true
            },
            axisLabel: {
                interval: 0,
                rotate: '0',
                textStyle: {
                    fontSize: 10,
                    color: '#cee8ff'
                }
            },
            data: ['宁夏', '四川', "内蒙古", '新疆', "江苏", "山西", "陜西", "河南", "河北", "山东"],
            splitLine: {
                show: false
            }
        },
        xAxis: {
            type: 'value',
            name: '',
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['rgba(138, 199, 255, .2)']
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#01c2db'
                }
            }
        },
        series: [{
            name: '数量',
            type: 'bar',
            stack: '总量',
            barWidth: 20,
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: "{c}%"
                }
            },
            itemStyle: {
                normal: {
                    barBorderWidth: '0',
                    barBorderRadius: [10, 10, 10, 10],
                    barBorderColor: 'rgb(0,255,132)',
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgba(0,255,132, .4)'
                    }, {
                        offset: 1,
                        color: 'rgb(0,255,132)'
                    }])
                },
                emphasis: {
                    barBorderWidth: '1',
                    barBorderColor: 'rgb(0,255,132)'
                    // color: 'rgba(26,177,98,.8)'
                }
            },
            // 顺序 从下向上 传入
            data: [370, 1250, 1600, 2335, 1278, 550, 700, 1820, 450, 790]
        }]
    };
    // rank1.setOption(rankOption1);
    // rank2.setOption(rankOption2);
    // // echarts 图表初始化完成，无关后台数据交互
    // function rankInit(upData, DownData) {
    //     rank1.setOption({
    //         yAxis: {
    //             data: ['宁夏', '四川', "内蒙古", '新疆', "江苏", "山西", "陜西", "河南", "河北", "山东"],
    //         },
    //         series: [{
    //             // 顺序 从下向上 传入
    //             data: upData
    //         }]
    //     });
    //     rank2.setOption({
    //         yAxis: {
    //             data: ['西藏', '黑龙江', "河北", '陜西', "山东", "武汉", "天津", "内蒙", "河南", "云南"],
    //         },
    //         series: [{
    //             // 顺序 从下向上 传入
    //             data: DownData
    //         }]
    //     });
    // }

    // // 页面初始化
    // rankInit(fakeData(10, 100), fakeData(10, 100));