前言
通过 echarts 实现柱状图和折线图混合图表，一般图表都是固定宽高的，在数据过多的时候，就会相互挤压，样式会变得十分丑陋。
echarts 文档当中，就提供了两种解决这个情况的办法，通过滚动条来滚动展示，或者是通过鼠标的滚轮来滚动展示。
通过配置 dataZoom 实现滚动
inside
内置型数据区域缩放组件
开启后提供两种滚动方式，
- 平移：在坐标系当中通过拖拽进行平移
- 缩放：在pc端上通过鼠标滚动进行缩放
根据需求可以开启 zoomLock 属性，让滚动只会平移数据，而不会缩放数据，
通过 start 和 end 或者 startValue 和 endValue 调整可视化的窗口大小
start 和 end 的取值范围是 0 ~ 100，表示 0% ~ 100% 利用百分比的形式来决定可视化窗口的大小是数据总量的大小的百分之多少。比方说设定
start: 0,
end: 40, // 初始展示40%
这样就会展示前百分之40的数据
startValue 和 endValue 的取值范围就是数据的条数，表示开始的数据位置和结束的数据位置。比方说设定
startValue: 0,
endValue: 2,
这样就会展示前三条数据
slider
滑动条型数据区域缩放组件
开启之后，就会出现滚动条，我们可以通过设定 height 设定滚动条的大小，top 或 bottom 来设定滚动条的位置。
可以通过 backgroundColor , fillerColor , borderColor 等等字段来设定滚动条的样式，具体可以参考官方文档
通过 start 和 end 或者 startValue 和 endValue 可以调整可视化的窗口大小，具体的配置跟 inside 是一样的。
自动滚动
通过上面的介绍，我们知道了通过 dataZoom 的 startValue 和 endValue 能够初始化柱状图的位置，那么我们就可以通过不断地去修改这两个值，来实现整个柱状图的自动滚动
let timechartes = setInterval(function () {
// 每次向后滚动一个，最后一个从头开始。
if (option.dataZoom[0].endValue == 8) {
option.dataZoom[0].endValue = 4;
option.dataZoom[0].startValue = 0;
} else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
}
myChart.setOption(option)
}, 2000);
具体在什么时候回归第一项，就需要看展示的数据量是多少，这个是需要动态设置的了。这里只是作为展示，简单的写一下。
设定 多y轴
在某一张图表当中，我们是能够设定对个y轴的，并且有的时候，我们是希望多个柱状互相对应不同的y轴数据。
我们可以通过 yAxis 来设定多条y轴，通过 series 中的 yAxisIndex 来决定对应的y轴数据
option 配置
下面放下我的 option 配置，折柱混合，数据自动滚动，以及折线图和柱状图对应不同y轴。
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var zoomData = [ // 有滚动条 平移
{
type: 'slider',
realtime: true,
startValue: 0,
endValue: 2,
height: 4,
handleSize: 342, // 两边的按钮大小
fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
borderColor: "rgba(17, 100, 210, 0.12)",
handleSize: 0, // 两边手柄尺寸
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
top: '96%',
zoomLock: true, // 是否只平移不缩放
moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
},
{
type: "inside", // 支持内部鼠标滚动平移
startValue: 0,
endValue: 4,
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
}
]
var option = {
dataZoom: zoomData,
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
triggerEvent: true,
axisPointer: {
type: 'shadow',
},
},
],
yAxis: [
{
type: 'value',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value}',
},
},
{
type: 'value',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %',
},
},
],
series: [
{
name: 'Evaporation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml'
},
},
data: [80, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6],
},
{
name: 'Precipitation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml'
},
},
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6],
},
{
name: 'Temperature',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C'
},
},
data: [55, 2.2, 3.3, 4.5, 6.3, 10.2, 60.3, 2.2, 3.3, 4.5, 6.3, 10.2, 60.3],
},
],
}
let timechartes = setInterval(function () {
// 每次向后滚动一个，最后一个从头开始。
if (option.dataZoom[0].endValue == 8) {
option.dataZoom[0].endValue = 4;
option.dataZoom[0].startValue = 0;
} else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
}
myChart.setOption(option)
}, 2000);
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
