<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
</title>
<style>
body{
background-color: #133148;
}
</style>
</head>
<body>
<div id="main" style="width: 1000px;height:600px;">
</div>
</body>
<script src="echarts.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var categoryArry = ['A','B','C','D','E'];
var arry = [9481,5000,475,399,1475];
var max = 1.6*Math.max.apply(null,arry);
var fzArry = [max,max,max,max,max];
option = {
grid: {
left: '3%',
right: '4%',
bottom: '1%',
top: '1%',
containLabel: true
},
xAxis: {
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
}
},
yAxis: [{
type: 'category',
inverse: false,
data: categoryArry,
axisLabel: {
color: "#7eb2d5",
fontSize:16
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}],
series: [
{
name: '客户端用户总量',
type: 'pictorialBar',
symbol: 'rect',
symbolSize: ['20%',20],
symbolPosition: 'start',
symbolOffset: [5,0],
symbolRepeat: true,
label: {
normal: {
show: true,
position: 'left',
distance: -750,
color: '#1df1f9',
fontSize: 16,
fontFamily: 'Quartz Regular',
formatter: function(params){
return toThousandsForChart(params);
}
}
},
itemStyle: {
normal: {
color: '#45A0CF',
}
},
data: arry
},
{
name: '辅助系列',
type: 'bar',
barWidth: 30,
barCategoryGap: '10%',
data: fzArry,
itemStyle: {
normal: {
color: 'rgba(255,255,255,0.1)',
borderColor: '#09687e',
borderWidth: 3,
barBorderRadius: [0, 20, 20, 0]
}
},
z: 9
},
]
};
myChart.setOption(option);
function toThousandsForChart(params){
var num = (params.value || params || 0).toString(), result = '';
while (num.length > 3) {
result = ',' + num.slice(-3) + result;
num = num.slice(0, num.length - 3);
}
if (num) { result = num + result; }
return result;
}
</script>
</html>
转载请注明原文地址: https://www.6miu.com/read-2624646.html
