v-charts实现多图tooltip联动
效果图:
代码:
//条形统计图
<ve-histogram :data="chartDataHistogram" :after-set-option="afterSetOption"></ve-histogram>
//折现统计图
<ve-line :data="chartDataLine" :after-set-option="afterSetOption"></ve-line>
data() {
return {
chartDataLine:{
columns: ['日期', '下载量', '下载用户', '下载率'],
rows: [
{ '日期': '1/1', '下载量': 1393, '下载用户': 1093, '下载率': 0.32 },
{ '日期': '1/2', '下载量': 3530, '下载用户': 3230, '下载率': 0.26 },
{ '日期': '1/3', '下载量': 2923, '下载用户': 2623, '下载率': 0.76 },
{ '日期': '1/4', '下载量': 1723, '下载用户': 1423, '下载率': 0.49 },
{ '日期': '1/5', '下载量': 3792, '下载用户': 3492, '下载率': 0.323 },
{ '日期': '1/6', '下载量': 4593, '下载用户': 4293, '下载率': 0.78 }
]
},
chartDataHistogram:{
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
},
};
}
afterSetOption(chartObj){
chartObj.group = 'group1';
//require('echarts')为获取echarts对象 获取方法有多种根据自己项目怎么拿echarts对象来拿
require('echarts').connect('group1');
},
完整代码:
<template>
<div>
<ve-histogram :data="chartDataHistogram" :after-set-option="afterSetOption"></ve-histogram>
<ve-line :data="chartDataLine" :after-set-option="afterSetOption"></ve-line>
</div>
</template>
<script>
export default {
data() {
return {
chartDataLine:{
columns: ['日期', '下载量', '下载用户', '下载率'],
rows: [
{ '日期': '1/1', '下载量': 1393, '下载用户': 1093, '下载率': 0.32 },
{ '日期': '1/2', '下载量': 3530, '下载用户': 3230, '下载率': 0.26 },
{ '日期': '1/3', '下载量': 2923, '下载用户': 2623, '下载率': 0.76 },
{ '日期': '1/4', '下载量': 1723, '下载用户': 1423, '下载率': 0.49 },
{ '日期': '1/5', '下载量': 3792, '下载用户': 3492, '下载率': 0.323 },
{ '日期': '1/6', '下载量': 4593, '下载用户': 4293, '下载率': 0.78 }
]
},
chartDataHistogram:{
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
},
};
},
methods: {
afterSetOption(chartObj){
chartObj.group = 'group1';
//require('echarts')为获取echarts对象 获取方法有多种根据自己项目怎么拿echarts对象来拿
require('echarts').connect('group1');
},
},
}
</script>
<style scoped>
</style>
官方文档:
- https://v-charts.js.org/#/props [ v-charts官方文档 ]
- https://echarts.apache.org/zh/api.html#echarts.init [ echarts官方文档 ]