zaibei_charts/test/bar/ChartBar43/index.js

import ChartBar from '../../../src/chart/bar/ChartBar43/ChartBar43.js';
import Title from "../../../src/chart/commonOptions/title";
import Grid from "../../../src/chart/commonOptions/grid";
import Animation from "../../../src/chart/commonOptions/animation";
import Carousel from "../../../src/chart/commonOptions/carousel";
// 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(option);
},3000)
// setTimeout(()=>{
//     console.log(6000);
//     // bar.setOption(op2);
// },6000)


let option = {
    color: ['#ff0000'],
    bg:{
        backgroundColor:'#000713'
    },
    title: {text:''},
    animation: Animation.option,
    warn:{
        config:{
            open: false
        }
    },
    grid: {
        left:'18%',
        top:'20%',
        right:'18%',
        bottom:'18%',
        containLabel: false
    },
    tooltip: {
        show:true,
        padding:10,
        itemGap:5,
        offsetX:15,
        offsetY:0,
		bgStyle: {
		    backgroundColor: '#a75a1d',
			bgbor:"#ff7e00"
		},
		angleR: 0,
		dangerline: {
		    show: false,
		    dangerData: 2560000,
		    color: '#f5196a'
		},
		tooltipText:{
			titleStyle:{
				fontSize:12
			},
			contentStyle:{
				fontSize:14
			},
		},
		titleColor:'#ffffff',
		contentColor:'#ffffff',
		titShowtxt:"分布数量"
	},
    carousel: Carousel.option,
    legend: {show:true,top:'5%'},
    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,
            overHidden: false,
            maxShow:'',
            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',
            },
            rect:{
                hoverColor: '#ffd802',
                lineWidth: 8,
                triangleWidth: 25
            },
            label: {
                show: false,
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'normal',
                    color: ''

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