echarts 分組繪制柱狀圖
阿新 • • 發佈：2018-09-01
itemstyle 示意圖 刻度 oct otto app 初始 tar set
示意圖：
代碼如下：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = ‘坐標軸刻度與標簽對齊‘;
var _xAxis = [
‘淡白‘, ‘淡紅‘, ‘紅‘, ‘暗‘, ‘尖紅‘, ‘邊尖紅‘,
‘明顯‘,‘不明顯‘,
‘明顯‘,‘不明顯‘,
‘明顯‘,‘不明顯‘,
‘薄膩‘,‘厚膩‘,‘薄‘,
‘黃‘,‘白‘,‘薄白‘];
var _yAxis = [10, 52, 20, 34, 30, 30,
0,13,
32,14,
3,23,
39,1,32,
12,12,12];
option = {
title: {
text: ‘舌象顯示統計（次）‘,
textStyle:{
color:"#666666",
fontSize: 16,
fontWeight:"normal"
},
top:"8",
left:"17"
},
color: [‘#297E3A‘],
tooltip : {
trigger: ‘axis‘,
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : ‘shadow‘ // 默認為直線，可選為：‘line‘ | ‘shadow‘
}
},
grid: {
left: ‘3%‘,
right: ‘4%‘,
bottom: ‘3%‘,
containLabel: true
},
xAxis : [
{
type : ‘category‘,
data : _xAxis,
splitArea: {
show: true,
areaStyle: {
color: [‘rgba(204,232,207,0.8)‘,‘rgba(204,232,207,0.8)‘,‘rgba(204,232,207,0.8)‘,‘rgba(204,232,207,0.8)‘,‘rgba(204,232,207,0.8)‘,‘rgba(204,232,207,0.8)‘
,‘rgba(250,250,250,0.3)‘,‘rgba(250,250,250,0.3)‘
,‘rgba(204,232,207,0.8)‘,‘rgba(204,232,207,0.8)‘
,‘rgba(250,250,250,0.3)‘,‘rgba(250,250,250,0.3)‘
,‘rgba(204,232,207,0.8)‘,‘rgba(204,232,207,0.8)‘,‘rgba(204,232,207,0.8)‘
,‘rgba(250,250,250,0.3)‘,‘rgba(250,250,250,0.3)‘,‘rgba(250,250,250,0.3)‘
]
}
}
}
],
yAxis : [{
type : ‘value‘
}],
series : [
{
name:‘次數‘,
type:‘bar‘,
barWidth: ‘50%‘,
data: _yAxis,
itemStyle: {
normal: {
//柱形圖圓角，初始化效果
barBorderRadius:[50, 50, 0, 0],
label: {
show: true,//是否展示
textStyle: {
fontWeight:‘bolder‘,
fontSize : ‘12‘,
fontFamily : ‘微軟雅黑‘,
}
}
}
},
label: {
normal: {
show: true,
color: ‘#000000‘,
position: ‘top‘
}
}
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
echarts 分組繪制柱狀圖