Echarts在线免费图表

 
            let xLabel = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
let goToSchool = ['200', '210', '140', '350', '175', '340', '105', '165', '450', '345', '245', '195'];
let goOutSchool = ['150', '210', '410', '365', '245', '405', '105', '145', '380', '210', '235', '195'];

option = {
    backgroundColor: '#0e1c47',
    color: ['#5CFFDC', '#FFD24A', '#FF4A4A', '#4AA2FF'],
    tooltip: {
        trigger: 'axis',
        borderWidth: 2,
        padding: [5, 10],
        formatter: (params) => {
            // console.log('params',params)
            let str = `${params[0].name}月<br/>`;
            //seriesName color value
            for (let i = 0; i < params.length; i++) {
                str =
                    str +
                    `<span style='display:inline-block;margin-right:5px;
                border-radius:10px;width:9px;height:9px;background-color:${params[i].color}'></span>
                ${params[i].seriesName}：<i style='float:right;color:#4AEFED ' >${params[i].value}件</i><br/>`;
            }
            return str;
        },
    },
    legend: {
        align: 'left',
        right: '10%',
        top: '10%',
        type: 'plain',
        textStyle: {
            color: '#7ec7ff',
            fontSize: 16,
        },
        // icon:'rect',
        itemGap: 25,
        itemWidth: 18,
    },
    grid: {
        top: '15%',
        left: '10%',
        right: '10%',
        bottom: '15%',
        // containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            name: '月份',
            nameGap: 10,
            boundaryGap: false,
            nameTextStyle: {
                // ---坐标轴名称样式
                color: '#E2E8EDE8',
                fontSize: 14,
            },
            axisLabel: {
                show: true,
                interval: 0, //横轴信息全部显示
                // rotate:-30,//-30度角倾斜显示
                textStyle: {
                    color: '#FFFFFF', // 更改坐标轴文字颜色
                    fontSize: this.screenScale * 13, // 更改坐标轴文字大小
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: [5, 10],
                    dashOffset: 10,
                    color: '#1282C8'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#379E98AB',
                },
            },
            axisTick: {
                show: false,
            },
            data: xLabel,
        },
    ],
    yAxis: [
        {
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#FFFFFF', // 更改坐标轴文字颜色
                    fontSize: this.screenScale * 13, // 更改坐标轴文字大小
                },
            },
        },
    ],
    series: [
        {
            name: '事件',
            type: 'line',
            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 3,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 1,
                    type: 'dashed' //将折线改为虚线
                },
                borderColor: 'rgba(0,0,0,.4)',
            },
            itemStyle: {
                borderColor: '#5CFFDC',
                borderWidth: 2,
            },
            tooltip: {
                show: true,
            },
            data: goToSchool,
        },
        {
            name: '部件',
            type: 'line',
            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 3,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 1,
                    type: 'dashed' //将折线改为虚线
                },
                borderColor: 'rgba(0,0,0,.4)',
            },
            itemStyle: {
                borderColor: '#FFD24A',
                borderWidth: 2,
            },
            tooltip: {
                show: true,
            },
            data: goOutSchool,
        },
    ],
};