zaibei_charts/test/bar/ChartBar24/index.js

import Chart from "../../../src/chart/bar/ChartBar24/ChartBar24";

import Title from "../../../src/chart/commonOptions/title";
import Grid from "../../../src/chart/commonOptions/grid";


let bar = new Chart(document.querySelector(".c1"), {});
window.addEventListener("resize", function () {
    bar.resize()
});

const option = {
    color: ["#0054ff", "#cb703d"],
    bg: {
        backgroundColor: '#0b0c0e'
    },
    title: Title.option(''),
    grid: Grid.option,
    legend: {
        left: "18%",
        top: '6%',
        itemHeight: 12,
        itemWidth: 12,
        itemAngelR: 0,
        textStyle: {
            fontSize: 16,
            color: '#ffffff'
        }
    },
    tooltip: {
        titleColor: '#ffffff',
        bgStyle: {
            borderColor: 'rgba(255,255,255,0.1)',
            borderWidth: 2,
            backgroundColor: '#000000',
        }
    },
    xAxis: {
        type: "category",
        name: '年份',
        nameTextStyle: {
            fontSize: 12,
            color: '#ffffff',
        },
        namePosition: 'end',
        axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.1)',
                width: 2,
                type: 'solid'
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: true,
            length: 2,
            lineStyle: {
                color: '#ffffff',
            }
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            show: true,
            textStyle: {
                fontSize:12,
                fontWeight:'normal',
                color: '#ffffff'
            }
        },
        highLightColor: 'rgba(255,255,255,0.5)',
        data: ['2014', '2015', '2016'],
    },
    yAxis: {
        type: 'value',
        nameTextStyle: {
            color: '#ffffff',
            fontSize: 14
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#ffffff',
                width: 1,
            }
        },
        axisTick: {
            show: true,
            lineStyle: {
                color: '#ffffff',
            },
            length: 2,
            alignWithLabel: true
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#ffffff'
            }
        },
    },
    shape: {
        barGap: '30%',
        barCategoryGap: '40%',
        width: "85%",
    },
    series: [
    {
        name: '类别一',
        data: [ 1450, 1150, 1350]
    }
    ]

};

// setTimeout(() => {
//     bar.setOption(option);
// }, 2000);