zaibei_charts/test/line/ChartLine18/index.js

import ChartBar from '../../../src/chart/line/ChartLine18/ChartLine18.js';

let bar = new ChartBar(document.getElementsByClassName('c1')[0], {});
window.addEventListener('resize', () => {
    bar.resize();
});

let option = {
    color: ['#00f9ff', '#77ff32', '#23ff95', '#ffc000', '#00f0ff', '#0060ff', '#4e00ff'],
    bg: {
        backgroundColor: '#000000'
    },
    title: {},
    grid: {
		left:'18%',
		top:'20%',
		right:'18%',
		bottom:'18%',	
	},
    xAxis: {
        type: 'category',
        // splitNumber: 8,
        position: false,
        axisTick:{
            length: 5,
            lineStyle: {
                color: '#ffffff',
                width: 1,
                // type: 'solid'
            }
        },
        axisLabel: {
            textStyle: {
                color: '#ffffff',
                fontWeight: 'normal',
                fontSize: 14,
                fontFamily:'Microsoft YaHei',
            }

        },
        splitLine: { 
            lineStyle: {
                color: '#333333',
                width: 1,
                // type: 'solid'
            }
        },

    },
    yAxis: {
        type: "value",
        axisTick:{
            length: 5,
            lineStyle: {
                color: '#ccc',
                width: 1,
                // type: 'solid'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#595959',
                width: 6,
                // type: 'solid'
            }
        },

        splitLine: { 
            lineStyle: {
                color: '#333333',
                width: 1,
                // type: 'solid'
            }
        },
        axisLabel: {
            unit: '人',
            textStyle: {
                color: '#ffffff',
                fontWeight: 'normal',
                fontSize: 14,
                fontFamily:'Microsoft YaHei',

            }

        },
    },
    shape: {
        animateSpeed: 2,

        iconSize: 5,

        lineStyle: {
            width: 2,
            smooth: false,

        },

        button: {
            x: '10%',
            y: '10%',
            width: 90,
            height: 35,
            color: '#636363',
            textStyle: {
                fontSize: 15,
                fontWeight:'normal',
                fontFamily:'Microsoft YaHei',
                color: '#ffffff'
            },scale:10
        },
        label: {
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                fontFamily:'Microsoft YaHei',
            },
        },
    },
    series: [
        {
            name: '',
            type: 'bar',

            // data: [
            //     {name: "美国", value: 1000, time: 2001},
            //     {name: "中国", value: 220, time: 2001},
            //     {name: "英国", value: 340, time: 2001},
            //     {name: "德国", value: 510, time: 2001},
            //     {name: "日本", value: 560, time: 2001},

            //     {name: "美国", value: 1300, time: 2002},
            //     {name: "中国", value: 323, time: 2002},
            //     {name: "英国", value: 350, time: 2002},
            //     {name: "德国", value: 570, time: 2002},
            //     {name: "日本", value: 630, time: 2002},

            //     {name: "美国", value: 1400, time: 2003},
            //     {name: "中国", value: 563, time: 2003},
            //     {name: "英国", value: 360, time: 2003},
            //     {name: "德国", value: 630, time: 2003},
            //     {name: "日本", value: 645, time: 2003},

            //     {name: "美国", value: 1470, time: 2004},
            //     {name: "中国", value: 688, time: 2004},
            //     {name: "英国", value: 410, time: 2004},
            //     {name: "德国", value: 650, time: 2004},
            //     {name: "日本", value: 680, time: 2004},

            //     {name: "美国", value: 1510, time: 2005},
            //     {name: "中国", value: 956, time: 2005},
            //     {name: "印度", value: 510, time: 2005},
            //     {name: "德国", value: 688, time: 2005},
            //     {name: "日本", value: 700, time: 2005},

            //     {name: "美国", value: 1560, time: 2006},
            //     {name: "中国", value: 1595, time: 2006},
            //     {name: "印度", value: 785, time: 2006},
            //     {name: "德国", value: 748, time: 2006},
            //     {name: "日本", value: 830, time: 2006},

            // ]
            data: [
                // {name: "美国", value: 1000, time: '2001/02/01'},
                // {name: "中国", value: 220, time: '2001-02-01'},
                // {name: "英国", value: 340, time: '2001-02-01'},
                // {name: "德国", value: 510, time: '2001-02-01'},
                // {name: "日本", value: 560, time: '2001-02-01'},
                // {name: "苏联", value: 560, time: '2001-02-01'},

                // {name: "美国", value: 1300, time: '2002-02-01'},
                // {name: "中国", value: 323, time: '2002-02-01'},
                // {name: "英国", value: 350, time: '2002-02-01'},
                // {name: "德国", value: 570, time: '2002-02-01'},
                // {name: "日本", value: 630, time: '2002-02-01'},
                // {name: "苏联", value: 610, time: '2002-02-01'},

                {name: "美国", value: 140, time: '2003-02-01'},
                {name: "中国", value: 56, time: '2003-02-01'},
                {name: "英国", value: 36, time: '2003-02-01'},
                // {name: "德国", value: 630, time: '2003-02-01'},
                // {name: "日本", value: 645, time: '2003-02-01'},
                // {name: "苏联", value: 625, time: '2003-02-01'},

                {name: "美国", value: 147, time: '2004-02-01'},
                {name: "中国", value: 68, time: '2004-02-01'},
                {name: "英国", value: 41, time: '2004-02-01'},
                // {name: "德国", value: 650, time: '2004-02-01'},
                // {name: "日本", value: 680, time: '2004-02-01'},
                // {name: "苏联", value: 670, time: '2004-02-01'},

                {name: "美国", value: 151, time: '2005-02-01'},
                {name: "中国", value: 95, time: '2005-02-01'},
                {name: "英国", value: 51, time: '2005-02-01'},
                // {name: "德国", value: 688, time: '2005-02-01'},
                // {name: "日本", value: 610, time: '2005-02-01'},
                // {name: "苏联", value: 710, time: '2005-02-01'},

                {name: "美国", value: 156, time: '2006-02-01'},
                {name: "中国", value: 159, time: '2006-02-01'},
                {name: "英国", value: 78, time: '2006-02-01'},
                // {name: "德国", value: 748, time: '2006-02-01'},
                // {name: "日本", value: 830, time: '2006-02-01'},
                // {name: "苏联", value: 810, time: '2006-02-01'},

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