Echarts在线免费图表

 
            var oridata = [
    [20, 55, 38, 37, 55, 23, 61, 372, 300, 459, 1210, 586, 605, 676, 687, 1185],
    [2, 5, 8, 7, 5, 3, 10, 72, 100, 59, 210, 86, 105, 76, 87, 185],
    [2, 5, 8, 7, 5, 3, 10, 72, 100, 59, 210, 86, 105, 76, 87, 185],
    [2, 5, 8, 7, 5, 3, 10, 72, 100, 59, 210, 86, 105, 76, 87, 185],
    [2, 5, 8, 7, 5, 3, 10, 72, 100, 59, 210, 86, 105, 76, 87, 185],
];
var data0 = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
var total;
for (var i = 0, l = oridata[0].length; i < l; i++) {
    total = oridata[0][i] + oridata[1][i] + oridata[2][i] + oridata[3][i] + oridata[4][i];
    data0.push(Math.round(oridata[0][i] / total * 100));
    data1.push(Math.round(oridata[1][i] / total * 100));
    data2.push(Math.round(oridata[2][i] / total * 100));
    data3.push(Math.round(oridata[3][i] / total * 100));
    data4.push(100 - data0[data0.length - 1] - data1[data1.length - 1] - data2[data2.length - 1] - data3[data3.length - 1]);
}

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {
            return '<div>' + params[0].name + '<br>' + params[0].marker + params[0].seriesName + ':' + '<span>' + oridata[0][params[0].dataIndex] + '</span>平方千米' + '<br>' + params[1].marker + params[1].seriesName + ':' + '<span>' + oridata[1][params[1].dataIndex] + '</span>平方千米' + '<br>' + params[2].marker + params[2].seriesName + ':' + '<span>' + oridata[2][params[2].dataIndex] + '</span>平方千米' + '<br>' + params[3].marker + params[3].seriesName + ':' + '<span>' + oridata[3][params[3].dataIndex] + '</span>平方千米' + '<br>' + params[4].marker + params[4].seriesName + ':' + '<span>' + oridata[4][params[4].dataIndex] + '</span>平方千米' + '</div>';
        },
    },
    legend: {
        data: ['低风险', '中低风险', '中风险', '中高风险', '高风险']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        x: 'right',
        y: 'center',
        feature: {
            mark: true,
            dataView: { readOnly: false },
            magicType: ['line', 'bar'],
            restore: true,
            saveAsImage: true
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            data: ['黄浦', '徐汇', '长宁', '静安', '普陀', '虹口', '杨浦', '闵行', '宝山', '嘉定', '浦东', '金山', '松江', '青浦', '奉贤', '崇明']
        }
    ],
    yAxis: [
        {
            type: 'value',
            splitArea: { show: true }
        }
    ],
    series: [
        {
            name: '低风险',
            type: 'bar',
            stack: '广告',
            data: data0,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        1, 1, 0, 0, [{
                            offset: 1,
                            color: 'rgba(5, 157, 188, 1)'
                        }, {
                            offset: 0,
                            color: 'rgba(5, 157, 188,  0.3)'
                        }

                    ]
                    ),
                    borderColor: 'rgba(5, 157, 188, 1)',
                }
            },
        },
        {
            name: '中低风险',
            type: 'bar',
            stack: '广告',
            data: data1,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        1, 1, 0, 0, [{
                            offset: 1,
                            color: 'rgba(26, 205, 56, 1)'
                        }, {
                            offset: 0,
                            color: 'rgba(26, 205, 56, 0.3)'
                        }

                    ]
                    ),
                    borderColor: 'rgba(26, 205, 56, 1)',
                }
            },
        },
        {
            name: '中风险',
            type: 'bar',
            stack: '广告',
            data: data2,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        1, 1, 0, 0, [{
                            offset: 1,
                            color: 'rgba(164, 223, 15, 1)'
                        }, {
                            offset: 0,
                            color: 'rgba(164, 223, 15,  0.3)'
                        }

                    ]
                    ),
                    borderColor: 'rgba(164, 223, 15, 1)',
                }
            },
        }
        ,
        {
            name: '中高风险',
            type: 'bar',
            stack: '广告',
            data: data3,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        1, 1, 0, 0, [{
                            offset: 1,
                            color: 'rgba(219, 149, 15, 1)'
                        }, {
                            offset: 0,
                            color: 'rgba(219, 149, 15, 0.3)'
                        }

                    ]
                    ),
                    borderColor: 'rgba(219, 149, 15, 1)',
                }
            },
        },
        {
            name: '高风险',
            type: 'bar',
            stack: '广告',
            data: data4,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        1, 1, 0, 0, [{
                            offset: 1,
                            color: 'rgba(189, 33, 40, 1)'
                        }, {
                            offset: 0,
                            color: 'rgba(189, 33, 40, 0.3)'
                        }

                    ]
                    ),
                    borderColor: 'rgba(189, 33, 40, 1)',
                }
            },
        }
    ]
};