实现echarts多图联动效果
文章目录
业务场景
提示：主要是记录一下多个echarts联动效果实现方案
这本来就是echarts本身自带的api，并没有多高级，奈何寻找的过程非常坎坷，在此记录一下，使用场景上主要是用于多个图表可以联动展示，而数据又因为业务原因不在一个图表上展示，这就需要：
- 悬停查看单个图表数据的时候，可同时显示同时段其他图表上的Y轴数据
- 数据不在一个图表展示（比如一类数据数值比较小，一类数据数值比较大，展示在同一坐标轴的时候，数值小的贴近x轴线很不容易看出变化）
- 业务上 比如x轴位时间轴，查看当前时间的各个指标信息
示例效果：
实现关键api
设置：
javascript
chart1.group = 'echart'
chart2.group = 'echart'联动：
javascript
echarts.connect('echart')官方地址：echarts官方文档配置项
里面还有单个移除等功能，有需要可以研究下
代码示例（vue）
dom层：
html
<div class="linsBox-state"
ref="stateChartsLineRef"></div>
<div class="linsBox-nums"
ref="numsChartsLineRef"></div>
<div class="chartsBox-bottomCharts"
ref="bottomChartsRef"></div>js层
javascript
import * as echarts from 'echarts'
javascript
mounted() {
this.bottomChartsDraw()
this.initCharts()
},
javascript
methods: {
initCharts() {
const chart1 = echarts.init(this.$refs.stateChartsLineRef)
const chart2 = echarts.init(this.$refs.numsChartsLineRef)
chart1.group = 'echart'
chart2.group = 'echart'
const option1 = {
title: {
text: '折线图 1',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
xAxis: {
type: 'category',
data: [
'12',
'123.',
'1.2',
'周四1.2',
'.121',
'周1.六',
'周日1.',
'1.',
'周1.2二',
'12.',
'周1.四',
'周1.六',
'周11.1.日',
'周1.一',
'1.',
'1.',
'1.四',
'周1.五',
'数据',
'周1.日',
],
},
yAxis: {
type: 'value',
},
dataZoom: [
{
show: false,
realtime: true,
xAxisIndex: 'all',
},
{
type: 'inside',
realtime: true,
show: false,
xAxisIndex: 'all',
},
],
series: [
{
name: '系列1',
type: 'line',
data: [
150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147,
260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135,
147, 260,
],
},
],
}
const option2 = {
title: {
text: '折线图 2',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
xAxis: {
type: 'category',
data: [
'12',
'123.',
'1.2',
'周四1.2',
'.121',
'周1.六',
'周日1.',
'1.',
'周1.2二',
'12.',
'周1.四',
'周1.六',
'周11.1.日',
'周1.一',
'1.',
'1.',
'1.四',
'周1.五',
'数据',
'周1.日',
],
},
yAxis: {
type: 'value',
},
dataZoom: [
{
show: false,
realtime: true,
xAxisIndex: 'all',
},
{
type: 'inside',
realtime: true,
show: false,
xAxisIndex: 'all',
},
],
series: [
{
name: '系列2',
type: 'line',
data: [
120, 282, 111, 234, 220, 190, 210, 120, 282, 111, 234, 220, 190,
210, 120, 282, 111, 234, 220, 190, 210, 120, 282, 111, 234, 220,
190, 210,
],
},
],
}
chart1.setOption(option1)
chart2.setOption(option2)
echarts.connect('echart')
},
bottomChartsDraw() {
let bottomChartsLine = echarts.init(this.$refs.bottomChartsRef)
bottomChartsLine.group = 'echart'
let option3 = {
title: {
text: '折线图 2',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
xAxis: {
type: 'category',
data: [
'12',
'123.',
'1.2',
'周四1.2',
'.121',
'周1.六',
'周日1.',
'1.',
'周1.2二',
'12.',
'周1.四',
'周1.六',
'周11.1.日',
'周1.一',
'1.',
'1.',
'1.四',
'周1.五',
'数据',
'周1.日',
],
},
yAxis: {
type: 'value',
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 20,
},
{
start: 0,
end: 20,
},
],
series: [
{
name: '系列2',
type: 'line',
data: [
120, 282, 111, 234, 220, 190, 210, 120, 282, 111, 234, 220, 190,
210, 120, 282, 111, 234, 220, 190, 210, 120, 282, 111, 234, 220,
190, 210,
],
},
],
}
bottomChartsLine.setOption(option3)
echarts.connect('echart')
window.onresize = function () {
bottomChartsLine.resize()
}
},
},