⭐使用dataZoomapi实现echart的同步缩放
echarts的datazoomapi对外暴露
原理：echarts的实例存在datazoom缩放的方法，所以只需要在datazoom事件触发其他表的datazoom即可实现同步缩放
dispatchAction({
type: "dataZoom",
// 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0
dataZoomIndex: number,
// 开始位置的百分比，0 - 100
start: number,
// 结束位置的百分比，0 - 100
end: number,
// 开始位置的数值
startValue: number,
// 结束位置的数值
endValue: number
})
注意：x轴的范围要一致，不然可能会出现偏移
????vue2实现echarts多表同步缩放
用变量记录echarts的实例，渲染完毕再触发datazoom
代码在insidecode，如下运行即可
效果：
????vue3实现echarts多表同步缩放
用state存储echarts实例，渲染完之后触发dataZoom
<template>
<p>
<!-- 折线图-->
<p id="first" :style="{ width, height }"></p>
<!-- 柱状图-->
<p id="second" :style="{ width, height }"></p>
<p id="third" :style="{ width, height }"></p>
<p id="fourth" :style="{ width, height }"></p>
</p>
</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>
⭐结束
文章为作者独立观点，不代表天创网配资观点
相关文章
股民评论
后起之秀2023-09-04
这和银行不一样。在银行，花更多的钱享受更好的服务，这无可厚非。问题是，股票里的散户交着更高的手续费和融券利息，却享受更差的服务，凭什么？！