Echarts在线免费图表

 
            option = {
   backgroundColor: '#fff',
    title: {
        // text: `{a|分部收入同比增速图}`,
        textStyle: {
            rich: {
                a: {
                    fontSize: 16,
                    fontWeight: 600,
                },
            },
        },
        top: '2%',
        left: '2%',
    },
    legend: {
        data: ['增值服务', '金融科技及企业服务', '网络广告'],
        textStyle: {
            align: 'right',
        },
        top: '2%',
        right: '2%',
    },

    tooltip: {
        trigger: 'axis',
    },

    grid: {
        top: '18%',
        left: '8%',
        right: '3%',
        bottom: '10%',
    },
    xAxis: [
        {
            type: 'category',
            axisLine: {
                show: true,
            },
            splitArea: {
                // show: true,
                color: '#f00',
                lineStyle: {
                    color: '#f00',
                },
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                margin: 10,
            },
            boundaryGap: false,
            data: [2017, 2018, 2019, 2020, 2021],
        },
    ],

    yAxis: [
        {
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#e3e3e3',
                },
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                margin: 20,
                formatter: '{value} %',
            },
            axisTick: {
                show: false,
            },
        },
    ],
    series: [
        {
            name: '增值服务',
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 12,
            lineStyle: {
                normal: {
                    color: '#7AA1FF',
                },
            },
            itemStyle: {
                color: '#7AA1FF',
                borderWidth: 3,
                borderColor: '#f3f3f3',
            },
            data: [42.8, 14.7, 13.2, 32.1, 10.4],
        },
        {
            name: '金融科技及企业服务',
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 12,
            lineStyle: {
                normal: {
                    color: '#00ca95',
                },
            },
            itemStyle: {
                color: '#00ca95',
                borderColor: '#fff',
                borderWidth: 3,
            },
            data: [0, 0, 38.6, 26.4, 34.4],
        },
        {
            name: '网络广告',
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 12,
            lineStyle: {
                normal: {
                    color: '#C258F6',
                },
            },
            itemStyle: {
                color: '#C258F6',
                borderColor: '#fff',
                borderWidth: 3,
            },
            data: [49.9, 43.6, 17.7, 20.3, 7.8],
        },
    ],
};