<!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 = {
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
// },
grid: {
left: '3%',
right: '4%',
bottom: '1%',
top: '1%',
containLabel: true
},
xAxis: {
// max: 300,
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',
// barWidth: 100,
symbol: 'rect',
symbolSize: ['20%',20],
symbolPosition: 'start',
symbolOffset: [5,0],//偏移量
// symbolMargin: '20!',
symbolRepeat: true,
// barCategoryGap: 22,
// symbolBoundingData: 700000,
label: {
normal: {
show: true,
position: 'left',//标签的位置
distance: -750,
color: '#1df1f9',
fontSize: 16,
fontFamily: 'Quartz Regular',
// formatter: '{c}'
formatter: function(params){
return toThousandsForChart(params);
}
}
},
itemStyle: {
normal: {
color: '#45A0CF',
// borderColor: '#45A0CF'
}
},
// z: 20,
data: arry
},
{
name: '辅助系列',
type: 'bar',
barWidth: 30,
barCategoryGap: '10%', //22,
data: fzArry,
itemStyle: {
normal: {
color: 'rgba(255,255,255,0.1)',
borderColor: '#09687e',//['#09687e','#f19802','#09687e','#09687e','#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>
象形柱图与柱状图组合
最新推荐文章于 2024-05-28 21:17:54 发布