echarts单系列柱状图

单系列柱状图图表效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单系列柱状图案例 </title>
<script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"> </script>
</head>
<body>
<div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #FF0000;"> </div>
</body>
</html>
<script type="text/javascript">
// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
var chart1 = echarts.init( document.getElementById( "chart1"));
var dataX = [ '方便面', '面包', '牛奶', '饼干', '可乐', '牛肉干', '薯片', '冰淇淋'];
var dataY = [ 362, 568, 296, 205, 347, 159, 391, 423];
option = {
backgroundColor: 'rgba(0,0,0,1)', // 背景色，默认无背景。
title : { // 标题
text : '各商品销量统计', // 标题文本内容
left : 'center', // 标题左右居中
textStyle : { // 标题样式
color : '#ddd', // 标题字体颜色
fontSize : '30', // 标题字体大小
}
},
/*grid: {
top: '15%', // 绘图网格区域距离容器上侧的距离
bottom: '10%', // 绘图网格区域距离容器下侧的距离
}, */
tooltip: { // 提示框组件
show: true, // 是否显示提示框组件，包括提示框浮层和 axisPointer。
trigger: 'axis', // 触发类型:axis(坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。)
// item(数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。)
// none(什么都不触发。)
axisPointer: { // 坐标轴指示器配置项。
show: true, // 默认不显示。但是如果 tooltip.trigger 设置为 'axis' 或者 tooltip.axisPointer.type 设置为 'cross'，则自动显示 axisPointer。
//坐标系会自动选择显示显示哪个轴的axisPointer，也可以使用 tooltip.axisPointer.axis 改变这种选择。
type: 'line', // 'line' 直线指示器;'shadow' 阴影指示器.
lineStyle: { // axisPointer.type为'line'时有效.
color: '#fff', // 触发提示时竖线的颜色
opacity: 0 // 将竖线的透明度设为 0,也可以起到不显示竖线的效果.
}
},
formatter: '{b} : {c}' // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
},
xAxis: {
data: dataX, // x坐标轴的数据项
axisLine: { // x坐标轴轴线相关设置
lineStyle: { // x轴线样式(跟分隔线的配置差不多)
color: '#fff' // x轴轴线颜色
}
},
axisLabel: { // 坐标轴刻度标签的相关设置
color: '#fff', // 刻度标签的字体颜色
fontSize: 10, // 刻度标签的字体大小
margin: 5, // 刻度标签与轴线之间的距离。默认为 8
formatter : function(value) { // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
return value.split( "").join( "\n"); // 让x轴刻度标签竖直排列
}
}
},
yAxis: {
axisLine: { // y坐标轴轴线相关设置
lineStyle: { // y轴线样式(跟分隔线的配置差不多)
color: '#fff' // y轴轴线颜色
}
},
axisLabel: { // 坐标轴刻度标签的相关设置
color: '#fff', // 刻度标签的字体颜色
fontSize: 10, // 刻度标签的字体大小
margin: 10, // 刻度标签与轴线之间的距离。默认为 8
},
splitLine: { // 坐标轴在 grid 区域中的分隔线。
show: false, // 是否显示分隔线。默认数值轴显示，类目轴不显示。
lineStyle: { // 分隔线样式
color: '#fff' // 分隔线颜色
}
}
},
series: [{ // 系列列表。每个系列通过 type 决定自己的图表类型
type: 'bar',
barWidth: 18, // 柱条的宽度，不设时自适应。支持设置成相对于类目宽度的百分比。(注:在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。)
itemStyle: { // 图形样式
normal: {
// 柱条的颜色
color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [
{ offset: 0, //渐变色比例
color: '#F7FAFA' //柱子颜色上半
}, {
offset: 0.5, //渐变色比例
color: '#00B4FF' //柱子颜色下半
}], false),
label: { // 柱条上标签
show: true, // 是否将数据项对应的数值显示在柱条上
textStyle: { // 柱条上标签字体样式
color: '#fff', // 柱条上标签字体颜色
fontSize: 10 // 柱条上标签字体大小
},
position: 'top', // 标签位置,'top'(柱条顶部),'center'(柱条内部),'bottom'(柱条底部)
formatter: '{c}' // 标签内容
}
}
},
data: dataY // 系列1对应的 X轴数据项的值
}]
};
// 使用刚指定的配置项和数据显示图表
chart1.setOption(option)
</script>

想要使用该图表,只需要复制以上代码 ,再下载 echarts.js 在页面文件中引入即可.

echarts.js 下载链接: http://echarts.baidu.com/download.html

echarts单系列柱状图

猜你喜欢