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 '

' + params[0].name + '
' + params[0].marker + params[0].seriesName + ':' + '' + oridata[0][params[0].dataIndex] + '平方千米' + '
' + params[1].marker + params[1].seriesName + ':' + '' + oridata[1][params[1].dataIndex] + '平方千米' + '
' + params[2].marker + params[2].seriesName + ':' + '' + oridata[2][params[2].dataIndex] + '平方千米' + '
' + params[3].marker + params[3].seriesName + ':' + '' + oridata[3][params[3].dataIndex] + '平方千米' + '
' + params[4].marker + params[4].seriesName + ':' + '' + oridata[4][params[4].dataIndex] + '平方千米' + '

'; }, }, 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)', } }, } ] };

Echarts在线免费图表