zaibei_charts/test/bar/ChartBar27/index.js

import ChartBar from '../../../src/chart/bar/ChartBar27/ChartBar27.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 options = {
    type: "p1",
    bg:{
        backgroundColor:'#000000'
    },
    title: Title.option('服装销售利润'),
    tooltip: { 
        bgStyle:{
            backgroundColor:'rgba(0,0,0,0.7)',
            // borderColor:'#888e0e',
            // borderWidth:1
        },

    },
    legend:{
        left: "18%",
        top: '6%',
        itemWidth: 12,
        circleSize: 4,
        textStyle: {
            fontSize: 16,
            // color: '#50a7bd'
        }
    },
    grid: {
        left:'18%',
        top:'20%',
        right:'18%',
        bottom:'18%',
        containLabel: false,
    },
    // legend: Legend.option,
    xAxis: {
        type: "category",
        data: ["类别一","类别二","类别三","类别四","类别五"],
        // min:0,
        axisLine: {
            show: false,
            lineStyle: {
                color: '#333333',
                width: 2,
                type: 'solid'
            }
        },
        axisTick: {
            show: false,
            alignWithLabel: false,
            interval: 'auto',
            length:5,
            lineStyle: {
                color: '#333333',
                width:1
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#333333',
                width: 1,
                type: 'solid'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                fontSize: 16,
                color: '#797979',
                backgroundColor: 'rgba(255,255,255,0.05)',
                highlightColor: '#ffffff',
            }
        } 
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: true,
            lineStyle: {
                color: '#333333',
                width: 2,
                type: 'solid',
                distance: 2, //偏移距离
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: true,
            interval: 'auto',
            length:3,
            lineStyle: {
                color: '#333333',
                width:2
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#333333',
                width: 1,
                type: 'solid'
            }
        },
        axisLabel:{
            show:true,
            textStyle:{
                fontSize: 16,
                color:'#797979'
            }
        },
        bgColor: 'rgba(255,255,255,0.05)',
    },
    shape:{
        barCategoryGap: '60%',
        // barGap: '8%',
        label: {
            show: true,
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                color: '#00f4fe'
            },
            positionX:5
        },
        circleSize: 5,
    },
    series: [
        {
            name: '花费',
            type: 'bar',
            data: [450,50,500,250,250]
        }
    ],
    color: ["#3fffa7", "#3f90ff"],
};

// setTimeout(() => {
//     bar.setOption(options)
// }, 3000);