zaibei_charts/test/bar/ChartBar4/index.js

import ChartBar from '../../../src/chart/bar/ChartBar4/ChartBar4.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(() => {
    // bar.setOption(opt)
}, 2000);
setTimeout(() => {
    // bar.setOption(opt2)
}, 4000);
let opt = {
    color: ['#ff0000'],
    bg:{
        backgroundColor:'#000713'
    },
    title: Title.option('新经济普查工作'),
    grid:{
        left:'18%',
        top:'20%',
        right:'18%',
        bottom:'18%',
        containLabel: false
    },
    tooltip: Tooltip.option,
    legend: Legend.option,
    carousel: {
        show: false,
        showColumn: 3,
        r:20,
        color:'#ffff00',
        open: false
    },
    xAxis: {
        type: "category",
        data: ['地区一', '地区二', '地区三', '地区四', '地区五', '地区六', '地区七', '地区八'],
        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: '30%',
        label: {
            show: false,
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                color: ''

                //'' 表示使用series默认颜色数组
            }
        }
    },
    series: [
        {
            name: '行业总产值',
            type: 'bar',
            data: [91,86,82,78,74,79,67,89]
        }
    ]
};
let opt2 = {
    color: ['#ffff00'],
    bg:{
        backgroundColor:'#000713'
    },
    title: Title.option('新经济普查工作'),
    grid:{
        left:'18%',
        top:'20%',
        right:'18%',
        bottom:'18%',
        containLabel: false
    },
    tooltip: Tooltip.option,
    legend: Legend.option,
    carousel: {
        show: true,
        showColumn: 2,
        r:20,
        color:'#ffff00',
        open: false
    },
    xAxis: {
        type: "category",
        data: ['地区一', '地区二', '地区三', '地区四', '地区五', '地区六', '地区七', '地区八'],
        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: '30%',
        label: {
            show: false,
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                color: ''

                //'' 表示使用series默认颜色数组
            }
        }
    },
    series: [
        {
            name: '行业总产值',
            type: 'bar',
            data: [91,86,82,78,74,79,67,89]
        }
    ]
};
// bar.setOption( {
//     color: ['#02e4ff'],
//     bg:{
//         backgroundColor:'#000713'
//     },
//     title: Title.option('新经济普查工作'),
//     grid: Grid.option,
//     tooltip: {},
//     legend: Legend.option,
//     xAxis: {
//         type: "category",
//         data: ['地区一', '地区二', '地区三', '地区四', '地区五', '地区六', '地区七'],
//         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: '30%',
//             label: {
//                 show: false,
//                 textStyle: {
//                     fontSize: 12,
//                     fontWeight: 'normal',
//                     color: ''

//                     //'' 表示使用series默认颜色数组
//                 }
//             },
//     },
//     series: [
//         {
//             name: '行业总产值',
//             type: 'bar',
            
//             data: [91,86,82,78,74,79,67]
//         }
//     ]
// })