zaibei_charts/test/line/ChartLine13/index.js

import ChartLine from '../../../src/chart/line/ChartLine13/ChartLine13.js';
import Grid from '../../../src/chart/commonOptions/grid'

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

let option = {
    color: ['#9df04d','#ffffff','#00f6ff','#0096ff','#d0e3ff','#4169e1','#00bfff','#008b8b','#00fa9a','#0000ff'],
    title: {},
    bg: {
        backgroundColor: '#000000'
    },
    grid: Grid.option,
    tooltip: {
        titleColor:'#fff',
        bgStyle:{
            backgroundColor:'rgba(255,255,255,0.05)',
            // borderColor:'#888e0e',
            // borderWidth:1
        },
        nameColor:'#ffda2a',
        valueColor:'#ffda2a'

    },
    legend: {
        itemHeight: 10,
        itemWidth: 10,
        itemAngelR: 20,
        left:'22%',
        top:'8%'
    },
    xAxis: {
        type: "category",
//		title: '日期',
        nameTextStyle: {
            fontSize: 12,
            color: '#ccc',
        },
        namePosition: 'end',
        // data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", '八月', '九月', '十月', '十一月', '十二月'],
        data: ['2011','2012','2013','2014','2015','2016','2017','2018','2019'],
        boundaryGap: true,
        //		scale: true,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#ffff00',
                opacity: 0.3,
                width: 2,
                type: 'solid'
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: true,
            length:30,
            topTickDis: 30,
            lineStyle:{
                width:2,
                color:'#ffff00',
                opacity: 0.1,
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#ffffff',
                opacity: 0.05,
                width: 1,
                type: 'solid'
            }
        },
        axisLabel: {
            show: false,
            textStyle: {
                color: '#797979',
                backgroundColor: 'rgba(255,255,255,0.1)',
                highlightColor: '#ffffff',
                textRotation:0
            }
        }
    },
    yAxis: {
        type: 'value',
		title: '单位',
        nameTextStyle: {
            fontSize: 12,
            color: '#606060',
        },
        namePosition: 'end',
        scale: true,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#ffffff',
                opacity: 0.3,
                width: 2,
                type: 'solid',
                distance: 10, //偏移距离
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: false,
            length:5,
            lineStyle:{
                width:2,
                color:'#fffe00'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#ffffff',
                opacity: 0.05,
                width: 1,
                type: 'solid'
            }
        },

        axisLabel: {
            show: true,
            textStyle: {
                color: '#606060'
            }
        }

    },
    shape:{
        label: {
            show: true,
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                color: ''
            }
        },
        lineStyle: {
            width: 4,
            smooth: 'spline',
        },
        lineShadow: {
            shadowColor: '#000000',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 0
        },
        circleSize: 5,
    },
    series: [
        // {
        //     name: '类别一',
        //     type: 'bar',
        //     data: [164, 166, 168, 17.3, 18, 18.3, 18.5, 18.8, 19.2],
        // }, {
        //     name: '类别二',
        //     type: 'bar',
            
        //     data: [17.3, 17.5, 17.6, 17.6, 17.7, 17.8, 18, 18.1, 18.5],
        // }
        {
            name: '类别一',
            type: 'bar',
            data: [810000, 1200000, 1600000, 2100000, 2560000, 3000000, 3400000, 3900000, 4330000],
        }, {
            name: '类别二',
            type: 'bar',
            data: [610000, 1000000, 1800000, 2200000, 2400000, 2600000, 3050000, 3590000, 4220000],
        },
    ]
};

let option1 = {
    color: ['#9df04d','#ffffff','#00f6ff','#0096ff','#d0e3ff','#4169e1','#00bfff','#008b8b','#00fa9a','#0000ff'],
    title: {},
    bg: {
        backgroundColor: '#000000'
    },
    grid: Grid.option,
    tooltip: {
        titleColor:'#fff',
        bgStyle:{
            backgroundColor:'rgba(255,255,255,0.05)',
            // borderColor:'#888e0e',
            // borderWidth:1
        },
        nameColor:'#ffda2a',
        valueColor:'#ffda2a'

    },
    legend: {
        itemHeight: 10,
        itemWidth: 10,
        itemAngelR: 20,
        left:'22%',
        top:'8%'
    },
    xAxis: {
        type: "category",
//		title: '日期',
        nameTextStyle: {
            fontSize: 12,
            color: '#ccc',
        },
        namePosition: 'end',
        // data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", '八月', '九月', '十月', '十一月', '十二月'],
        data: ['2011','2012','2013','2014','2015','2016','2017','2018','2019'],
        boundaryGap: true,
        //		scale: true,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#ffff00',
                opacity: 0.3,
                width: 2,
                type: 'solid'
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: true,
            length:30,
            topTickDis: 30,
            lineStyle:{
                width:2,
                color:'#ffff00',
                opacity: 0.1,
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#ffffff',
                opacity: 0.05,
                width: 1,
                type: 'solid'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#797979',
                backgroundColor: 'rgba(255,255,255,0.1)',
                highlightColor: '#ffffff',
                textRotation:0
            }
        }
    },
    yAxis: {
        type: 'value',
		title: '单位',
        nameTextStyle: {
            fontSize: 12,
            color: '#606060',
        },
        namePosition: 'end',
        scale: true,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#ffffff',
                opacity: 0.3,
                width: 2,
                type: 'solid',
                distance: 10, //偏移距离
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: false,
            length:10,
            lineStyle:{
                width:2,
                color:'#fffe00'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#ffffff',
                opacity: 0.05,
                width: 1,
                type: 'solid'
            }
        },

        axisLabel: {
            show: true,
            textStyle: {
                color: '#606060'
            }
        }

    },
    shape:{
        label: {
            show: true,
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                color: ''
            }
        },
        lineStyle: {
            width: 4,
            smooth: 'spline',
        },
        lineShadow: {
            shadowColor: '#000000',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 0
        },
        circleSize: 5,
    },
    series: [
        // {
        //     name: '类别一',
        //     type: 'bar',
        //     data: [164, 166, 168, 17.3, 18, 18.3, 18.5, 18.8, 19.2],
        // }, {
        //     name: '类别二',
        //     type: 'bar',
            
        //     data: [17.3, 17.5, 17.6, 17.6, 17.7, 17.8, 18, 18.1, 18.5],
        // }
        {
            name: '类别一',
            type: 'bar',
            data: [810000, 1200000, 1600000, 2100000, 2560000, 3000000, 3400000, 3900000, 4330000],
        }, {
            name: '类别二',
            type: 'bar',
            data: [610000, 1000000, 1800000, 2200000, 2400000, 2600000, 3050000, 3590000, 4220000],
        },
    ]
};

// setTimeout(()=>{
//     chart.setOption(option)
// },2000)

// setTimeout(()=>{
//     chart.setOption(option1)
// },4000)