Echarts 横向混合柱状图

echarts yekong 111℃

Echarts 横向混合柱状图

function getecharts7() {
        var chartDom = document.getElementById('echarts7');
        var myChart = echarts.init(chartDom);
        let tdata = [
            {code: '在职', stock: '74', fundPost: '10'},
            {code: '离职', stock: '68', fundPost: '70'},
            {code: '授权', stock: '39', fundPost: '30'},
            {code: '未授权', stock: '26', fundPost: '60'},
            {code: '高效', stock: '50', fundPost: '40'},
            {code: '低效', stock: '80', fundPost: '50'},
        ];

        function contains(arr, dst) {
            var i = arr.length;
            while ((i -= 1)) {
                if (arr[i] == dst) {
                    return i;
                }
            }
            return false;
        }

        var attackSourcesColor = [
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                {offset: 0, color: 'rgba(205, 56, 69, 1)'},
                {offset: 1, color: 'rgba(253, 101, 107, 1)'},
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                {offset: 0, color: 'rgba(243, 114, 63, 1)'},
                {offset: 1, color: 'rgba(255, 162, 86, 1)'},
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                {offset: 0, color: 'rgba(247, 185, 52, 1)'},
                {offset: 1, color: 'rgba(254, 237, 147, 1)'},
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                {offset: 0, color: 'rgba(1, 95, 212, 1)'},
                {offset: 1, color: 'rgba(26, 142, 250, 1)'},
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                {offset: 0, color: 'rgba(0, 172, 146, 1)'},
                {offset: 1, color: 'rgba(45, 195, 165, 1)'},
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                {offset: 0, color: 'rgba(100, 194, 112, 1)'},
                {offset: 1, color: 'rgba(160, 206, 58, 1)'},
            ]),
        ];
        var attackSourcesColor1 = [
            '#EB3B5A',
            '#FA8231',
            '#F7B731',
            '#3860FC',
            '#1089E7',
            '#F57474',
            '#56D0E3',
            '#1089E7',
            '#F57474',
            '#1089E7',
            '#F57474',
            '#F57474',
        ];
        var attaData = [];
        var attaName = [];
        var topName = [];
        tdata.forEach((it, index) => {
            attaData[index] = parseFloat(it.fundPost).toFixed(2);
            attaName[index] = it.stock;
            topName[index] = `${it.code} ${it.stock}`;
        });
        var salvProMax = [100, 100, 100, 100, 100, 100]; //背景按最大值
        function attackSourcesDataFmt(sData) {
            var sss = [];
            sData.forEach(function (item, i) {
                let itemStyle = {
                    color: attackSourcesColor[i]
                };
                sss.push({
                    value: item,
                    itemStyle: itemStyle,
                });
            });
            return sss;
        }

        var option = {
            tooltip: {
                show: false,
                textStyle: {
                    fontSize: 16,
                },
            },
            color: ['#F7B731'],
            legend: {
                show: false,
                pageIconSize: [12, 12],
                itemWidth: 20,
                itemHeight: 10,
                textStyle: {
                    //图例文字的样式
                    fontSize: 10,
                    color: '#fff',
                },
                selectedMode: false,
                // data: ['个人所得(亿元)'],
            },
            grid: {
                left: '4%',
                right: '4%',
                bottom: '10%',
                top: '10%',
                containLabel: true,
            },
            xAxis: {
                type: 'value',
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
            },
            yAxis: [
                {
                    type: 'category',
                    inverse: true,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisPointer: {
                        label: {
                            show: true,
                            //margin: 30
                        },
                    },
                    pdaaing: [0, 0, 0, 0],
                    postion: 'right',
                    data: attaName,
                    axisLabel: {
                        show: true,
                        margin: 15,
                        fontSize: 12,
                        align: 'right',
                        padding: [2, 0, 0, 0],
                        color: '#fff',
                        rich: {
                            nt1: {
                                color: '#fff',
                                backgroundColor: attackSourcesColor1[0],
                                width: 13,
                                height: 13,
                                fontSize: 10,
                                align: 'center',
                                borderRadius: 100,
                                lineHeight: '5',
                                padding: [0, 1, 2, 1],
                                // padding:[0,0,2,0],
                            },
                            nt2: {
                                color: '#fff',
                                backgroundColor: attackSourcesColor1[1],
                                width: 13,
                                height: 13,
                                fontSize: 10,
                                align: 'center',
                                borderRadius: 100,
                                padding: [0, 1, 2, 1],
                            },
                            nt3: {
                                color: '#fff',
                                backgroundColor: attackSourcesColor1[2],
                                width: 13,
                                height: 13,
                                fontSize: 10,
                                align: 'center',
                                borderRadius: 100,
                                padding: [0, 1, 2, 1],
                            },
                            nt: {
                                color: '#fff',
                                backgroundColor: attackSourcesColor1[3],
                                width: 13,
                                height: 13,
                                fontSize: 10,
                                align: 'center',
                                lineHeight: 3,
                                borderRadius: 100,
                                padding: [0, 1, 2, 1],
                                lineHeight: 5,
                            },
                        },
                        formatter: function (value, index) {
                            return tdata[index].code
                        },
                    },
                },
                {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    axisLabel: {
                        margin: 20,
                        textStyle: {
                            margin: 0,
                            color: '#fff',
                            fontSize: '14',
                        },
                    },
                    data: attackSourcesDataFmt(attaName),
                },
                {
                    //名称
                    type: 'category',
                    offset: -10,
                    position: 'left',
                    axisLine: {
                        show: false,
                    },
                    inverse: false,
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                        interval: 0,
                        color: ['#fff'],
                        align: 'left',
                        verticalAlign: 'bottom',
                        lineHeight: 32,
                        fontSize: 10,
                    },
                    data: topName,
                },
            ],
            series: [
                {
                    zlevel: 1,
                    name: '',
                    type: 'bar',
                    barWidth: '12px',
                    animationDuration: 1500,
                    data: attackSourcesDataFmt(attaData),
                    align: 'center',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 13,
                        },
                    },
                    label: {
                        show: false,
                        fontSize: 10,
                        color: '#fff',
                        textBorderWidth: 2,
                        padding: [2, 0, 0, 0],
                    },
                },
                {
                    name: '',
                    type: 'bar',
                    barWidth: 12,
                    barGap: '-100%',
                    margin: '100',
                    data: salvProMax,
                    textStyle: {
                        //图例文字的样式
                        fontSize: 10,
                        color: '#fff',
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(0, 0, 0, 0.2)',
                            //width:"100%",
                            fontSize: 10,
                            //barBorderRadius: 30,
                        },
                    },
                },
            ],
        };
        myChart.clear()
        myChart.resize()
        option && myChart.setOption(option);
    }
喜欢 (0)