zaibei_charts/test/bar/ChartBar1/index.js

import ChartBar from '../../../src/chart/bar/ChartBar1/ChartBar1.js';
import Title from "../../../src/chart/commonOptions/title";
import Grid from "../../../src/chart/commonOptions/grid";

let bar = new ChartBar(document.getElementsByClassName('c1')[0], {});
window.addEventListener('resize', () => {
    bar.resize();
});
setTimeout(() => {
    bar.setOption({
        color: ['#ff0000', '#faeb00', '#23ff95','#ffc000','#00f0ff','#0060ff','#4e00ff'],
        bg: {
            backgroundColor: '#161729'
        },
        title: Title.option(''),
        tooltip: {},
        grid: Grid.option,
        xAxis: {
            type: 'value',
            title:'(%)',
            nameTextStyle:{
                color:'#02b4e1'
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#0093ff',
                    width: 1,
                    type: 'solid'
                }
            },
            axisTick: {
                show: true,
                alignWithLabel: false,
                interval: 'auto',
                length:2,
                lineStyle: {
                    color: '#ffdd22',
                    width:2,

                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#293f5f',
                    width: 1,
                    type: 'solid'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#02b4e1'
                }

            },
            warningLine: {
                show: true,
                warnValue: 100
            }
        },
        yAxis: {
            type: "category",
            reverse: true,
            data: ["数据1", "数据2", "总体"],
            axisTick: {
                show: false,
                alignWithLabel: false,
                interval: 'auto',
                lineStyle: {
                    color: '#0093ff'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#00dff7',
                    width: 2,
                    type: 'solid'
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#293f5f',
                    width: 1,
                    type: 'solid'
                }
            },
            axisLabel: {
                margin: 0,
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        shape:{
            barCategoryGap: '30%',
                iconType:'icon5',
                label: {
                    show: true,
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'normal',
                        color: '#fff'
                    },
                    unit:'%'
                },
        },
        series: [
            {
                name: '利润',
                type: 'bar',
                

                data: [85, 130, 230]
            }
        ]
    })
}, 3000);