vue2、vue3分别配置echarts多图表的同步缩放（一）https://developer.aliyun.com/article/1492608
💖 vue3实现echarts多图表同步缩放
用state存储echarts实例，渲染完之后触发dataZoom
<template> <div> <!-- 折线图--> <div id="first" :style="{ width, height }"></div> <!-- 柱状图--> <div id="second" :style="{ width, height }"></div> <div id="third" :style="{ width, height }"></div> <div id="fourth" :style="{ width, height }"></div> </div> </template> <script lang="ts" setup> import { reactive, onMounted } from 'vue'; import * as echarts from 'echarts'; const state: any = reactive({ maxNum: 100, // 折线图 lineChart1: null, // 柱状图1 barChart1: null, // 柱状图2 barChart2: null, // 柱状图3 barChart3: null, }); function asyncZoom() { console.log(' state.lineChart1', state.lineChart1); state?.lineChart1?.on('datazoom', function (params) { [state.barChart1, state.barChart2, state.barChart2, state.barChart3].forEach((item) => { console.log('item', item); item && item.dispatchAction({ // 触发 dataZoom 事件 type: 'dataZoom', zoomLock: true, // 锁定整个图表的缩放功能 xAxisIndex: params.xAxisIndex, // xAxisIndex 为当前操作的 xAxisIndex,用于确定对应的 xAxis 对象 yAxisIndex: params.yAxisIndex, // yAxisIndex 为当前操作的 yAxisIndex,用于确定对应的 yAxis 对象 start: params.start, // start 为当前操作的时间范围起始值 end: params.end, // end 为当前操作的时间范围结束值 }); }); }); } function renderLineChart4(val: any): any { // const { setOptions } = useECharts(chartLineRef1 as Ref<HTMLDivElement>); const myChart = echarts.init(document.getElementById('fourth')); if (!myChart) { return; } // 指定图表的配置项和数据 let base = +new Date(1968, 9, 3); let oneDay = 24 * 3600 * 500; const date = []; const yData1 = [Math.random() * 300]; for (let i = 1; i < state.maxNum; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); yData1.push(Math.round((Math.random() - 0.5) * 20 + yData1[i - 1])); } const option = { toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none', }, dataView: { readOnly: false, }, magicType: { type: ['line', 'bar'], }, restore: {}, saveAsImage: {}, }, }, legend: {}, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true, }, xAxis: [ { type: 'category', boundaryGap: false, data: date, }, ], yAxis: [ { type: 'value', }, ], series: [ { name: 'Direct', type: 'bar', data: yData1, }, ], }; console.log('option', option); myChart.setOption(option, true); // dom.setOption(option, true); state.barChart3 = myChart; } function renderLineChart3(val: any): any { // const { setOptions } = useECharts(chartLineRef1 as Ref<HTMLDivElement>); const myChart = echarts.init(document.getElementById('third')); if (!myChart) { return; } // 指定图表的配置项和数据 let base = +new Date(1968, 9, 3); let oneDay = 24 * 3600 * 500; const date = []; const yData1 = [Math.random() * 300]; for (let i = 1; i < state.maxNum; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); yData1.push(Math.round((Math.random() - 0.5) * 20 + yData1[i - 1])); } const option = { toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none', }, dataView: { readOnly: false, }, magicType: { type: ['line', 'bar'], }, restore: {}, saveAsImage: {}, }, }, legend: {}, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true, }, xAxis: [ { type: 'category', boundaryGap: false, data: date, }, ], yAxis: [ { type: 'value', }, ], series: [ { name: 'Direct', type: 'bar', data: yData1, }, ], }; console.log('option', option); myChart.setOption(option, true); // dom.setOption(option, true); state.barChart2 = myChart; } function renderLineChart2(val: any): any { // const { setOptions } = useECharts(chartLineRef1 as Ref<HTMLDivElement>); const myChart = echarts.init(document.getElementById('second')); if (!myChart) { return; } let base = +new Date(1968, 9, 3); let oneDay = 24 * 3600 * 500; const date = []; const yData1 = [Math.random() * 300]; const yData2 = [Math.random() * 100]; for (let i = 1; i < state.maxNum; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); yData1.push(Math.round((Math.random() - 0.5) * 20 + yData1[i - 1])); yData2.push(Math.round((Math.random() - 0.5) * 20 + yData2[i - 1])); } const option = { title: { text: 'line', }, tooltip: { trigger: 'axis', }, legend: {}, toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none', }, dataView: { readOnly: false, }, magicType: { type: ['line', 'bar'], }, restore: {}, saveAsImage: {}, }, }, xAxis: { type: 'category', boundaryGap: false, data: date, }, yAxis: { type: 'value', axisLabel: { formatter: '{value} °C', }, }, series: [ { name: 'Highest', type: 'line', data: yData1, markPoint: { data: [ { type: 'max', name: 'Max', }, { type: 'min', name: 'Min', }, ], }, markLine: { data: [ { type: 'average', name: 'Avg', }, ], }, }, { name: 'Lowest', type: 'line', data: yData2, markPoint: { data: [ { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5, }, ], }, markLine: { data: [ { type: 'average', name: 'Avg', }, [ { symbol: 'none', x: '90%', yAxis: 'max', }, { symbol: 'circle', label: { position: 'start', formatter: 'Max', }, type: 'max', name: '最高点', }, ], ], }, }, ], }; console.log('option', option); myChart.setOption(option, true); // dom.setOption(option, true); state.barChart1 = myChart; } function renderLineChart1(val: any): any { // const { setOptions } = useECharts(chartLineRef1 as Ref<HTMLDivElement>); const myChart = echarts.init(document.getElementById('first')); if (!myChart) { return; } // 指定图表的配置项和数据 let base = +new Date(1968, 9, 3); let oneDay = 24 * 3600 * 500; let date = []; let data = [Math.random() * 300]; for (let i = 1; i < state.maxNum; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])); } const option = { tooltip: { trigger: 'axis', position: function (pt) { return [pt[0], '10%']; }, }, title: { left: 'center', text: 'Large Area Chart', }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none', }, restore: {}, saveAsImage: {}, }, }, xAxis: { type: 'category', boundaryGap: false, data: date, }, yAxis: { type: 'value', boundaryGap: [0, '100%'], }, dataZoom: [ { type: 'inside', start: 0, end: 10, }, { start: 0, end: 10, }, ], series: [ { name: 'Fake Data', type: 'bar', symbol: 'none', sampling: 'lttb', itemStyle: { color: 'rgb(255, 70, 131)', }, data: data, }, ], }; console.log('option', option); myChart.setOption(option, true); state.lineChart1 = myChart; asyncZoom(); } onMounted(() => { renderLineChart4(); renderLineChart3(); renderLineChart2(); renderLineChart1(); }); </script>
效果
⭐结束
本文分享结束， 💖 感谢你的阅读💖
如有不足或者错误欢迎指出！
