description:
条形统计图，支持滑动鼠标滚轮来放大和缩小视图。
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 = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放']; // 柱子上的标签
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]; // 数据
var yMax = 500; // y轴最大值
var dataShadow = [];
for(var i = 0; i < data.length; i++) {
dataShadow.push(yMax); // 每个阴影柱子的高度
}
var option = {
backgroundColor: 'rgba(16, 19, 21, 1)',
title: {
text: '这里是标题文字',
textStyle: {
color: 'rgba(40, 203, 41, 1)' // 标题文字的颜色
},
subtext: '这里是子标题',
subtextStyle: {
color: 'rgba(107, 217, 237, 1)' // 副标题文字的颜色
},
link: 'http://www.qq.com', // 点击标题的链接
target: 'blank', // 链接是否打开新网页('self', 'blank')
itemGap: 10 // 主副标题之间的间隔
},
xAxis: {
data: dataAxis, // 传递数据
axisLabel: {
inside: true,
textStyle: {
color: '#fff'
}
},
axisTick: {
show: false
},
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: [
{ // 柱子阴影设置
type: 'bar',
itemStyle: {
// normal: { color: 'rgba(252,25,191,0.5)' },
normal: { color: 'rgba(16, 19, 21,0.8)'}
},
barGap: '-100%',
barCategoryGap: '40%', // 柱子中间空白间隙的宽度
data: dataShadow,
animation: false
},
{ // 柱子的设置
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'}, // 前一半是深蓝色
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'} // 后一半是浅蓝色
]
),
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 // 柱子的高度
// data: {
// icon: 'rect'
// }
}
]
};
// 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>
