zaibei_charts/test/zaibei/ChartBar5/index.js

import ChartBar from '../../../src/chart/zaibei/ChartBar5/ChartBar5.js';
import Title from "../../../src/chart/commonOptions/title";
import Grid from "../../../src/chart/commonOptions/grid";
import Legend from "../../../src/chart/commonOptions/legend";
import ToolTip from "../../../src/chart/commonOptions/tooltip";
// 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(() => {
    console.log(3000);
    // bar.setOption(op1);
}, 3000)
setTimeout(() => {
    console.log(6000);
    // bar.setOption(op2);
}, 6000)


let op1 = {
    color: ['#0090ff'],
    bg: {
        backgroundColor: '#000713'
    },
    title: Title.option('新经济普查工作'),
    grid: Grid.option,
    tooltip: ToolTip.option,
    legend: Legend.option,
    xAxis: {
        type: "category",
        data: ['地区一', '地区二asdasdasdasdasdasddasdas', '地区三', '地区四', '地区五', '地区六', '地区七', '地区八'],
        // dataPlus:[
        //     ['地一', '地二', '地三', '地三', '地五', '地六', '地七', '地七'],
        //     ['正', '正', '正', '反', '反', '反', '正', '正'],
        // ],
        axisLine: {
            show: true,
            lineStyle: {
                color: '#224c69',
                width: 2,
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: true,
            interval: 'auto',
            length: 3,
            lineStyle: {
                color: '#ffff00'
            }
        },

        axisLabel: {
            show: true,
            maxShow: '',
            overHidden: true,
            textStyle: {
                color: '#54b3ea'
            }
            //      	margin: 0,
        },
        // splitLine: {
        //     show: false,
        //     lineStyle: {
        //         color: '#26426a',
        //         width: 1,
        //
        //     }
        // }

    },
    yAxis: {
        type: 'value',
        title: '(%)',
        nameTextStyle: {
            color: '#54b3ea'
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#224c69',
                width: 2,
                type: 'solid'
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#26426a',
                width: 1,
                type: 'solid'
            }
        },
        axisTick: {
            show: true,
            interval: 'auto',
            length: 3,
            lineStyle: {
                color: '#ffff00',
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#54b3ea'
            }
            //      	margin: 0,
        },

    },
    shape: {
        barCategoryGap: '40%',
        bgRect: {
            lineColor: '#02434b',
            color: '#021427'
        },
        label: {
            show: false,
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                color: ''

                //'' 表示使用series默认颜色数组
            }
        },
    },
    series: [{
        name: '行业总产值',
        type: 'bar',

        data: [91, 5, 82, 78, 74, 79, 67, 89]
    }]
};
let op2 = {
    color: ['#0090ff'],
    bg: {
        backgroundColor: '#000713'
    },
    title: Title.option('新经济普查工作'),
    grid: Grid.option,
    tooltip: {},
    legend: Legend.option,
    xAxis: {
        type: "category",
        data: ['地区一', '地区二', '地区三', '地区四', '地区五', '地区六', '地区七', '地区八'],
        dataPlus: [
            ['正', '正', '正', '反', '反', '反', '正', '正']
        ],
        axisLine: {
            show: true,
            lineStyle: {
                color: '#224c69',
                width: 2,
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: true,
            interval: 'auto',
            length: 3,
            lineStyle: {
                color: '#ffff00'
            }
        },

        axisLabel: {
            show: true,
            textStyle: {
                color: '#54b3ea'
            }
            //      	margin: 0,
        },
        // splitLine: {
        //     show: false,
        //     lineStyle: {
        //         color: '#26426a',
        //         width: 1,
        //
        //     }
        // }

    },
    yAxis: {
        type: 'value',
        title: '(%)',
        nameTextStyle: {
            color: '#54b3ea'
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#224c69',
                width: 2,
                type: 'solid'
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#26426a',
                width: 1,
                type: 'solid'
            }
        },
        axisTick: {
            show: true,
            interval: 'auto',
            length: 3,
            lineStyle: {
                color: '#ffff00',
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#54b3ea'
            }
            //      	margin: 0,
        },

    },
    shape: {
        barCategoryGap: '40%',
        bgRect: {
            lineColor: '#02434b',
            color: '#021427'
        },
        label: {
            show: false,
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                color: ''

                //'' 表示使用series默认颜色数组
            }
        },
    },
    series: [{
        name: '行业总产值',
        type: 'bar',

        data: [91, 5, 82, 78, 74, 79, 67, 89]
    }]
}