Echarts在线免费图表

 
            var dataset = {
	dimensions: ["年份", '增值服务', '金融科技及企业服务', '网络广告', '其他'],
	source: [
		{ 年份: '2016', 增值服务: 71, 金融科技及企业服务: 0, 网络广告: 18, 其他: 11 },
		{ 年份: '2017', 增值服务: 65, 金融科技及企业服务: 0, 网络广告: 17, 其他: 18 },
		{ 年份: '2018', 增值服务: 56, 金融科技及企业服务: 23, 网络广告: 19, 其他: 2 },
		{ 年份: '2019', 增值服务: 53, 金融科技及企业服务: 27, 网络广告: 18, 其他: 2 },
		{ 年份: '2020', 增值服务: 55, 金融科技及企业服务: 27, 网络广告: 17, 其他: 1 },
		{ 年份: '2021', 增值服务: 52, 金融科技及企业服务: 31, 网络广告: 16, 其他: 1 },
	]
}

function series(){
    const s = []
    for (var i = 0; i<dataset.dimensions.length-1; i++) {
        s.push({
            type: 'bar',
            stack: '总量',
            barMaxWidth: 20,
            label: {
                show: true,
                position: 'inside'
            }
        }) 
    }
    return s
}

option = {
   backgroundColor: '#fff',
   title: {
        // text: `{a|年度收入构成图}`,
        textStyle: {
            rich: {
                a: {
                    fontSize: 16,
                    fontWeight: 600,
                },
            },
        },
        top: '2%',
        left: '2%',
    },
    legend: {
        data: ['增值服务', '金融科技及企业服务', '网络广告', '其他'],
        textStyle: {
            align: 'right',
        },
        right: '2%',
        top: '2%',
        icon: 'diamond',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            show: true,
            formatter: "{value} %", //右侧Y轴文字显示
            textStyle: {
               color: "#666666",
               fontSize:14,
            }
         }
    },
    dataset: dataset,
    series: series()
};