zaibei_charts/test/weather/ChartWeather2/index.js

import ChartBar from '../../../src/chart/weather/ChartWeather2/ChartWeather2';
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(op1);
},3000)
setTimeout(()=>{
    // 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]
        }
    ]
}