echarts链接:http://gallery.echartsjs.com/editor.html?c=xByfdMz7mM
代码:
option = { backgroundColor: 'black', tooltip: { trigger: 'axis', backgroundColor: 'rgba(255,255,255,0.8)', extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);', textStyle: { color: '#6a717b', }, }, grid: { top: '0.5%', left: '3%', right: '11%', bottom: '2.5%', containLabel: true }, yAxis: [{ type: 'category', data: ['a', 'b', 'c', 'd', 'e', 'f', 'g3', 'h', 'i', 'j'], inverse: true, axisTick: { alignWithLabel: true, }, axisLabel: { margin: 10, textStyle: { fontSize: 18, color: 'white' } }, axisLine: { lineStyle: { color: '#2548ac' } }, }], xAxis: [{ type: 'value', axisLabel: { margin: 10, interval: 1, //横轴信息全部显示 rotate: -30, //-15度角倾斜显示 textStyle: { fontSize: 18, color: 'white', } }, axisLine: { lineStyle: { color: '#192469' } }, splitLine: { lineStyle: { color: '#17367c' } } }], series: [{ name: 'Top 10', type: 'bar', barWidth: 26, data: [8827896, 7472072, 7433391, 7137253, 6382192, 5268842, 4827026, 3935701, 3875562, 3839609], label: { normal: { show: true, position: 'insideRight', textStyle: { color: 'blue', //color of value fontSize: 18, } } }, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#0590eb' // 0% 处的颜色 }, { offset: 1, color: '#08e3f1' // 100% 处的颜色 }], false), barBorderRadius: [0, 15, 15, 0], shadowColor: 'rgba(0,0,0,0.1)', shadowBlur: 3, shadowOffsetY: 3 } } }] };