zaibei_charts/test/zaibei/ChartBar27/index.js

import ChartBar from '../../../src/chart/zaibei/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);