zaibei_charts/test/line/ChartLine22/index.js

import ChartLine from '../../../src/chart/line/ChartLine22/ChartLine22.js';
import Title from '../../../src/chart/commonOptions/title';
import Grid from '../../../src/chart/commonOptions/grid';


let chart = new ChartLine(document.getElementsByClassName('c1')[0], {});
window.addEventListener('resize', () => {
    chart.resize();
});
let option = {
    color: ['#3FFFB8', '#ffff67', '#4169e1', '#ffc000', '#0000ff', '#ff7200', '#00ffff', '#ffe79e'],
    title: Title.option(''),
    bg: {
        backgroundColor: '#041326'
    },
    grid: Grid.containLabelOption,
    tooltip: {
        titleColor: '#ffffff',
        bgStyle: {
            backgroundColor: '#041326',
            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:  ["班次1", "班次2", "班次3", "班次4", "班次5", "班次6", "班次7", '班次8', '班次9', '班次10', '班次11', '班次12', '班次13', '班次14'],
        boundaryGap: true,
        //		scale: true,
        axisLine: {
            show: false,
            lineStyle: {
                color: 'rgba(255,255,255,0.2)',
                width: 2,
                type: 'solid'
            }
        },
        axisTick: {
            show: false,
            alignWithLabel: true,
            length: -2,
            lineStyle:{
                width:2,
                color:'rgba(255,255,255,0.1)',
                // opacity: 0.1,
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: 'rgba(255,255,255,1.)',
                width: 1,
                type: 'solid'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#bdbdbd',
                backgroundColor: 'rgba(255,255,255,0.2)',
                highlightColor: 'rgba(255,255,255,0.4)',
                textRotation:0,
            }
        }
    },
    yAxis: {
        type: 'value',
		title: 'L',
        nameTextStyle: {
            fontSize: 12,
            color: '#606060',
        },
        namePosition: 'end',
        scale: true,
        axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.2)',
                width: 1,
                type: 'solid',
                distance: 2, //偏移距离
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: false,
            length:-5,
            lineStyle:{
                width:2,
                color:'rgba(255,255,255,0.1)',
                // opacity: 0.1,
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: 'rgba(255,255,255,0.2)',
                // opacity: 0.2,
                width: 1,
                type: 'solid'
            }
        },

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

    },
    shape: {
        label: {
            show: false,
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                color: ''
            }
        },

        lineStyle: {
            width: 2,
            smooth: 0.2,

        },
        lineShadow: {
            shadowColor: '#000000',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 0
        },
        icon: {
            size: 30,
            type: '电流',
            path: 'https://img.icons8.com/dusk/200/000000/airplane-take-off.png'
        },
        circleSize: 5,
    },
    series: [
        {
            name: '数据',
            data: [380, 310, 330, 360, 310, 290, 320, 350, 320, 400, 410, 420, 380, 420],
        }
    ]
};

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