echarts-条形统计图2
2018-02-09 本文已影响47人
转身丶即天涯
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/echarts.js" type="text/javascript"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 960px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var dataAxis = ['No.1', 'No.2', 'No.3', 'No.4', 'No.5', 'No.6']; // 柱子上的标签
var data = [120, 182, 200, 234, 290, 330]; // 数据
var yMax = 500; // y轴最大值
var dataShadow = [];
var colorPool = ['rgb(121,196,142)',
'rgb(76,197,169)',
'rgb(27,270,201)',
'rgb(103,69,177)',
'rgb(165,68,197)',
'rgb(234,40,168)',
];
for(var i = 0; i < data.length; i++) {
dataShadow.push(yMax); // 每个阴影柱子的高度
}
var option = {
backgroundColor: 'rgba(21, 33, 50, 1)',
barWidth: 80,
barGap: '20%',
itemStyle: {
color: colorPool[2]
},
title: {
text: '热门项目TOP6',
textStyle: {
color: 'rgba(30, 179, 203, 1)' // 标题文字的颜色
},
left: 'center',
top: 20,
link: 'http://www.linkedcare.cn/', // 点击标题的链接
target: 'blank', // 链接是否打开新网页('self', 'blank')
},
xAxis: {
data: dataAxis, // 传递数据
axisLabel: {
inside: true,
textStyle: {
color: '#fff'
}
},
axisTick: {
show: true
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#FFF' // y轴对应的白线
},
color: '#fff' // y轴刻度的文字的颜色
},
nameTextStyle: {
color: '#fff'
}
},
dataZoom: [{
type: 'inside'
}],
series: [
{ // 柱子1的设置
type: 'bar',
itemStyle: {
normal: {
color: colorPool[3],
borderWidth: 1,
borderColor: '#fff',
shadowColor: 'rgba(255,255,255,1)',
shadowBlur: 10
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#2378f7'
}, // 前70%深蓝色(从上向下)
{
offset: 0.7,
color: '#2378f7'
}, {
offset: 1,
color: '#83bff6'
} // 后30%浅蓝色
]
)
}
},
data: data // 柱子的高度
},
]
};
// Enable data zoom when user click bar.
var zoomSize = 6;
myChart.on('click', function(params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
