一、需求描述
最近在工作中，遇到了一个需求，让我实现一个柱状图，本来想的是一个柱状图能有多难，echarts.js 随便搞搞不就出来了?结果在做的时候发现，需求确实不难，但是我实在是太菜了，第一次使用echarts，看文档差点给我看出老花眼，这配置项也太多了吧，哪儿是哪儿啊！！！再难也得实现不是，只能一点点尝试，最后终于做出来了，其中踩过最大的坑就是文档版本跟我的echarts.js文件版本不匹配，我的echarts.js版本是4.x的，对应文档为：echarts配置项文档。
该柱状图样式如下：
柱状图需求点：
- 横坐标为作业名称，作业名称一行6个字符，最多两行，超出显示省略号。
- 纵坐标为百分比数字，分为5个刻度，且每个刻度在坐标系中都有延伸虚线。
- 柱状图默认为半透明的蓝色，鼠标hover之后变色，并以浮窗的形式展示该条数据的相关信息。
- 当数据量超过10条时，x轴下面有横向滚动条，默认每屏展示10条数据，数据之间的间距相等，可以通过滚动条来滚动查看前后的数据。
二、具体代码
html文件
<!-- 准备渲染echarts的画布 -->
<div class="score-chart" id="score-chart"></div>
<!-- 引入echarts -->
<script src="../lib/echarts/echarts.min.js"></script>
<!-- 引入echarts配置项文件 -->
<script src="../scripts/score-chart.js"></script>
score-chart.js文件
// 具体的配置项信息
option = {
// hover时的提示浮窗
tooltip: {
trigger: 'axis', // 触发类型 坐标轴触发
backgroundColor: '#fff',// 通过设置rgba调节背景颜色与透明度
borderColor: '#5098F8',
extraCssText: 'box-shadow: 0px 3px 5px 0px rgba(80,152,248,0.2);', // 给浮窗设置的css样式
borderWidth: 1,
padding: [15,10,15,10],
textStyle: {
color: '#333',
lineHeight: 24,
},
axisPointer: {
// 坐标轴指示器，坐标轴触发有效 // 默认为直线，可选为：'line' | 'shadow' | 'none'
type: 'none'
},
formatter: function(params) {
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式 此处为回调函数
var str = params[0].data.name +'<br> · 已识别：' + params[0].data.num1+'人<br> · 未识别：' + params[0].data.num2+'人<br> · 得分率：' + params[0].data.value + '%'
return str
}
},
// 模拟x轴的横向滑动条
dataZoom: {
type: 'slider', // 滑动条类型
show: true,
height: 5, // 设置高度
xAxisIndex: 0, // 设置关联的x轴 如果只有一个，可以不写
filterMode: 'none', // 设置数据过滤模式
backgroundColor: '#fff',
borderColor: '#fff',
fillerColor: '#eee', // 滚动条颜色
showDetail: false, // 是否展示滚动条起始位置数据信息和结束位置数据信息
bottom: 5, // 距离底部的位置
dataBackground: {
// 调整数据阴影的位置
lineStyle: {
color: '#fff'
},
areaStyle: {
color: '#fff'
}
},
startValue: 0, // 滚动条起始位置
endValue: 9, // 滚动条结束为止
zoomLock: true, // 锁定数据窗口（滚动条）大小 使其不可调节
handleSize: 0 // 控制手柄大小
},
// x轴相关
xAxis: {
type: 'category', // 轴类型
// 设置不展示轴线
axisLine: {
show: false
},
// 不显示坐标轴刻度
axisTick: {
show: false,
interval: 0
},
// 坐标轴刻度元素相关
axisLabel: {
show: true,
interval: 0, // 刻度之间的距离
margin: 10, // 刻度与轴线之前的间隔
// rotate: -45
formatter: function (value) {
// 刻度标签（x轴坐标）的内容格式器，支持字符串模板和回调函数两种形式
var str = "";
var num = 6; //每行显示字数
var valLength = value.length; //该项x轴字数
var rowNum = Math.ceil(valLength / num); // 行数
if (valLength > 12) {
str = value.substring(0, num) + '\n' + value.substring(num, 2*num-2) + ' ... '
return str;
}
else {
for (var i = 0; i < rowNum; i++) {
var temp = "";
var start = i * num;
var end = start + num;
temp = value.substring(start, end) + "\n";
str += temp;
}
return str;
}
}
},
// 这里设置x轴的坐标
data: ['作业1作业1作业1作业1作业1作业1作业1作业1', '作业2作业2作业2作业2', '作业3', '作业4', '作业5','作业6', '作业7', '作业8', '作业9', '作业10','作业11', '作业12', '作业13'],
},
// y轴相关
yAxis: [{
type: "value", // 轴类型
// 不显示轴线
axisLine: {
show: false
},
// 不显示坐标轴刻度
axisTick: {
show: false
},
// 不展示坐标轴在 grid 区域中的分隔线
splitLine: {
show: false
},
axisLabel: {
formatter: function(val) {
// 刻度标签（y轴坐标）的内容格式器，支持字符串模板和回调函数两种形式
return val + '%'
}
},
max: 100, // 坐标轴刻度最大值
min: 0 // 坐标轴刻度最小值
}],
series: [
{
type: 'bar', // 设置图表类型
name: 'score',
coordinateSystem: 'cartesian2d', // 该图表使用的坐标系 此处为二维直角坐标系
// 柱子宽度
barWidth: 22,
// 柱子间距
barCategoryGap: '100%',
// y轴的延伸横线
markLine: {
// 是否响应鼠标事件
silent: true,
label: {
show: false
},
symbol: 'none',
// 那些刻度展示延伸横线
data: [{
yAxis: 0,
},{
yAxis: 20
},{
yAxis: 40
},{
yAxis: 60
},{
yAxis: 80
},{
yAxis: 100
}],
},
// 柱状图相关
itemStyle: {
barBorderRadius: [4,4,4,4],
color: 'rgba(106,174,242,0.5)',
},
//鼠标悬停时：
emphasis: {
disabled: false,
itemStyle: {
color: 'rgba(106,174,242,1)'
}
},
// 这里设置整体的柱状图数据 name属性需要与上面x轴的data相对应
data:[
{
name: '作业1作业1作业1作业1作业1作业1作业1作业1', // 作业名
value: 10, // 得分率
num1: '10', // 已识别人数 ，此处如果改动字段名 上面浮窗展示需要同步修改字段名
num2: '12' // 未识别人数
},
{
name: '作业2',
value: 80,
num1: '20',
num2: '22'
},
{
name: '作业3',
value: 30,
num1: '30',
num2: '32'
},
{
name: '作业4',
value: 40,
num1: '40',
num2: '42'
},
{
name: '作业5',
value: 30,
num1: '40',
num2: '42'
},
{
name: '作业6',
value: 45,
num1: '40',
num2: '42'
},
{
name: '作业7',
value: 50,
num1: '40',
num2: '42'
},
{
name: '作业8',
value: 90,
num1: '40',
num2: '42'
},
{
name: '作业9',
value: 65,
num1: '40',
num2: '42'
},
{
name: '作业10',
value: 73,
num1: '40',
num2: '42'
},
{
name: '作业11',
value: 54,
num1: '110',
num2: '42'
},
{
name: '作业12',
value: 60,
num1: '40',
num2: '42'
},
{
name: '作业13',
value: 90,
num1: '40',
num2: '42'
}
]
}
]
};
// 获取到页面上作为echarts画布的元素
var dom = document.getElementById("score-chart");
// 使用echarts进行初始化
var myChart = echarts.init(dom);
// 将配置项应用在初始化过的myChart中
myChart.setOption(option);