var data1 = [20, 30, 20, 30, 20, 30, 20, 30, 20, 30, 20, 30, 12, 45, 74, 44]; var datacity = ['省局', '南京', '无锡', '扬州', '苏州', '盐城', '徐州', '镇江', '淮安', '南通', '常州', '连云港', '泰州', '宿迁', '苏州工业园区', '张家港保税区']; var option = { backgroundColor: '#043065', // color: ['#388BFF', '#05C3FA', '#F6931C', '#FFD52E'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, formatter: function(param) { var resultTooltip = ""; resultTooltip = "

" + "

" + param[0].name + "

" + "

" + "" + " " + param[0].seriesName + ": " + "" + param[0].value + "" + "

" + "

" + "" + " " + param[1].seriesName + ": " + "" + param[1].value + "" + "

" + "

" + "" + " 下面所有" + "

" + "" + " " + param[2].seriesName + ": " + "" + param[2].value + "" + "

" + "

" + "" + " " + param[3].seriesName + ": " + "" + param[3].value + "" + "

" + "

" + "" + " " + param[4].seriesName + ": " + "" + param[4].value + "" + "

" + "

" + "" + " " + param[5].seriesName + ": " + "" + param[5].value + "" + "

" + "

" + "" + " " + param[6].seriesName + ": " + "" + param[6].value + "" + "

" + "

" + "" + " " + param[7].seriesName + ": " + "" + param[7].value + "" + "

" + "

"; return resultTooltip } }, grid: { //图表的位置 top: '5%', left: '5%', right: '5%', bottom: '10%', // containLabel: true }, xAxis: { show: true, type: 'category', // boundaryGap: false, axisLine: { lineStyle: { color: '#57617B' } }, axisTick: { show: false }, axisLabel: { margin: 10, textStyle: { color: "rgba(255,255,255,.8)", fontSize: '12', } }, // data: ['ODS', 'DW', '备份库'] data: datacity }, yAxis: [{ show: true, type: 'value', axisTick: { show: false }, axisLine: { lineStyle: { color: '#57617B' } }, axisLabel: { margin: 10, textStyle: { color: "rgba(255,255,255,.8)", fontSize: '12', } }, splitLine: { show: false, lineStyle: { color: "rgba(255,255,255,0.1)", } } }], dataZoom: [{ show: true, height: 12, xAxisIndex: [0], bottom: '2%', start: 80, end: 100, handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z', handleSize: '110%', handleStyle: { color: "#d3dee5", }, textStyle: { color: "#fff" }, borderColor: "#90979c" }, { type: "inside", show: true, height: 15, start: 1, end: 35 }], animationEasing: 'elasticOut', series: [{ name: 'name1', type: 'bar', stack: 'sum1', barWidth: '20px', data: data1, color: '#c165e3' }, { name: 'name2', type: 'bar', stack: 'sum2', barWidth: '20px', data: data1, color: '#6633cc' }, { name: 'name3', type: 'bar', stack: 'sum3', barWidth: '20px', data: data1, color: '#00ffff' }, { name: 'name4', type: 'bar', stack: 'sum3', barWidth: '20px', data: data1, color: '#435cc8' }, { name: 'name5', type: 'bar', stack: 'sum3', barWidth: '20px', data: data1, color: '#1e6ed7' }, { name: 'name6', type: 'bar', stack: 'sum3', barWidth: '20px', data: data1, color: '#3a91e7' }, { name: 'name7', type: 'bar', stack: 'sum3', barWidth: '20px', data: data1, color: '#68d4ec' }, { name: 'name8', type: 'bar', stack: 'sum3', barWidth: '20px', data: data1, color: '#7beef7' }, ] };

Echarts在线免费图表