zaibei_charts/test/bar/ChartBar2/index.js

import ChartBar from '../../../src/chart/bar/ChartBar2/ChartBar2.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();
});

let option = {
    type: "p1",
    color:['#00f5fe'],
    bg:{
        backgroundColor:'#000713'
    },
    title: Title.option('服装销售利润'),
    tooltip: {
        show:false
    },
    grid: {
        left:'18%',
        top:'20%',
        right:'18%',
        bottom:'18%',
        containLabel: false
    },
    // legend: Legend.option,
    // carousel: Carousel.option,
    animation: Animation.option,
    xAxis: {
        type: 'value',
        min:80,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#0066b0',
                width: 2,
                type: 'solid'
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: false,
            interval: 'auto',
            length:3,
            lineStyle: {
                color: '#fffd00',
                width:2
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#293f5f',
                width: 1,
                type: 'solid'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#439eff'
            }
        }
    },
    yAxis: {
        type: "category",
        reverse:true,
        name: '地区',
        data: ["地区一", "地区二", "地区三", "地区四", "地区五",'地区六','地区七','地区八'],
        axisLine: {
            show: true,
            lineStyle: {
                color: '#0066b0',
                width: 2,
                type: 'solid'
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: true,
            interval: 'auto',
            length:3,
            lineStyle: {
                color: '#fffd00',
                width:2
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#293f5f',
                width: 1,
                type: 'solid'
            }
        },
        axisLabel:{
            show:true,
            textStyle:{
                color:'#439eff'
            }
        }
    },
    shape:{
        barCategoryGap: '70%',
        label: {
            show: true,
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                color: '#00f4fe'
            },
            positionX:5
        },
    },
    series: [
        {
            name: '利润',
            type: 'bar',
            data: [98, 95.1, 94,90,89.5,87,86, 84]
        }
    ]
};
setTimeout(() => {
    bar.setOption(option)
}, 5000);