可左右滑动的柱状图（数据区域可平移，缩放，基于echarts）
柱状图是数据可视化需求中的一种常见图表形式，当数据量大的时候，我们还会期望柱状图可以左右滑动。这里可以通过配置echarts的柱状图和数据区域缩放组件dataZoom来完成我们的需求。下面是完成后的效果动态图(鼠标移入柱条即出现提示框)：
为了有更好的适用性，这里把绘制柱状图的操作都封装到了一个函数里面。以Vue项目为例，要完成这个柱状图的配置所需步骤如下：
1：npm下载echarts模块。
2：在main.js文件中引入柱状图相关的模块，并把echart主模块绑定到vue原型对象上，以便后续调用，代码如下：
// 引入 ECharts 主模块
let echarts = require('echarts/lib/echarts')
// 引入相关组件
require('echarts/lib/chart/bar');
require('echarts/lib/component/tooltip')
require('echarts/lib/component/dataZoom')
Vue.prototype.$chart = echarts3： 编写柱状图的配置函数，具体代码如下：
// 入参说明：
// 1. data 柱状图初始数据，形如 [{name: '浙江大学', total: 150}]的对象数组
// 2. dom 柱状图所挂载的dom id名
// 3. encode 指定x,y轴需要展示的数据所在字段，形如{x: 'name', y: 'total'}
// 4. pernum 指定一屏需展示的数据量，利用它自动计算出数据窗口范围的结束百分比，最终一屏展示的数据量可能略有误差
initColumnChart (data = [], dom, encode = {}, pernum = 5) {
// 计算数据窗口范围的结束百分比
let dataZoomEnd = (pernum / data.length) * 100
let id = document.getElementById(dom)
let myChart = this.$chart.init(id)
let option = {
// 提示框组件配置
tooltip: {
// 自定义框内内容
formatter (params) {
let value = params.value[params.dimensionNames[params.encode.y[0]]]
let wrapper = 'display: flex;justify-content: space-between;align-items: center;'
let point = 'display: inline-block;width: 10px;height: 10px;background: orange;border-radius: 50%;margin-right: 5px;'
let tipContent = `销售额
￥${value}`
return tipContent
},
borderColor: '#dadada',
borderWidth: '1',
backgroundColor: 'white',
textStyle: {color: 'black'},
padding: [5, 10],
position: 'top'
},
// x轴配置
xAxis: {
// 坐标轴类型
type: 'category',
// 坐标轴轴线相关设置
axisLine: { show: false },
// 坐标轴刻度相关设置
axisTick: false
},
yAxis: {
type: 'value',
axisLine: {show: false},
axisTick: false,
// 坐标轴在 grid 区域中的分隔线
splitLine: {lineStyle: {type: 'dashed'}}
},
// 数据集配置，数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射
dataset: {
source: data
},
// 系列配置
series: [{
type: 'bar',
showBackground: false,
color: 'orange',
// 柱条的宽度,百分数基于自动计算出的每一类目的宽度
barWidth: "40%",
// 柱条的最大宽度
barMaxWidth: 60,
encode
}],
// 数据区域缩放组件配置
dataZoom: [{
type: 'inside',
// 数据窗口范围的起始百分比
start: 0,
// 数据窗口范围的结束百分比
end: dataZoomEnd,
// 是否锁定选择区域（或叫做数据窗口）的大小，如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放
zoomLock: true
},
// 手柄的icon相关配置
{
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}]
}
myChart.setOption(option)
}4: 在模板中加一个标签用于提供柱状图所需的dom，如下所示：
5: 用CSS制作提示框的下三角形，如下所示：
/* 提示框的下三角 */
#colmap div:nth-child(2)[style] {
margin-top: -10px;
}
#colmap div:nth-child(2)[style]::before {
border: 10px solid transparent;
border-top: 10px solid #dadada;
width: 0;
height: 0;
position: absolute;
bottom: -21px;
left: calc(50% - 10px);
content: ''
}
#colmap div:nth-child(2)[style]::after {
border: 10px solid transparent;
border-top: 10px solid white;
width: 0;
height: 0;
position: absolute;
bottom: -20px;
left: calc(50% - 10px);
content: ''
}6： 准备测试数据，并调用initColumnChart 方法，如下所示：
let list = [
{name: '浙江大学', total: 150},
{name: '青海大学', total: 170},
{name: '博客里学院', total: 70},
{name: '中科研究所', total: 90},
{name: '建筑技校', total: 80},
{name: '青海大学', total: 60},
{name: '高兴园区', total: 200},
{name: '潮汐大道', total: 40}
]
this.initColumnChart(list, 'colmap', {x: 'name',y: 'total'})完成上述步骤后，就可以得到博客开头动态图的效果了。这里封装绘制柱状图的方法可以设定一屏展示多少数据，这个在数据量多，一屏展示不下的时候非常有意义，直接设死缩放区域百分比的话，数据量多的时候，一屏就会比较拥挤。所以此处干脆根据传入的一屏数据量去自动计算数据窗口范围的结束百分比。柱状图和dataZoom的更多配置请移步echarts官网。关于可左右滑动的柱状图就介绍到这里了，有任何疑问可于博客下方留言交流。