Vue使用echarts做两个数据对比

需求:

有时候我们需要数据对比或者数据宏观展示的时候比如去年的气温和今年的气温可视化对比，今年的销售额和去年的销售额对比，当我们滑动到某个图表的时候另一个图表也展示相应的位置

具体代码:

dispatchAction

<template>
<div><!-- 柱状图 --><div id="main" style="height: 290px; width: 550px;"></div><div id="main1" style="height: 290px; width: 550px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';export default {mounted() {this.initCharts()},methods: {// 柱状图initCharts(){// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var myChart1 = echarts.init(document.getElementById('main1'));// 指定图表的配置项和数据var option = {title: {text: '月销量'},// 提示框tooltip: {},// 图例legend: {data: ['销量']},// 表示x轴坐标xAxis: {data: ['oppo', 'vivo', 'iphone', '小米', '三星', '魅族']},// 表示y轴坐标yAxis: {},//series: [{name: '销量',type: 'bar',data: [3500, 2200, 4500, 6500, 200, 3000]}]};myChart.setOption(option);myChart1.setOption(option);myChart.on('mouseover', function (params) {myChart1.dispatchAction({type:'showTip',seriesIndex:0,dataIndex:params.dataIndex});myChart1.dispatchAction({type:'highlight',seriesIndex:0,dataIndex:params.dataIndex});});},
}
}
</script>

解析，我们可以通过echarts 的原生监听事件获取到目前点击或者滑动到的参数通过参数去触发指定的另一个图表位置，

效果图

Vue使用echarts做两个数据对比相关推荐

Excel中两列数据对比，找出不同数据如何查找重复项并统计重复次数
Excel中两列数据对比,找出不同数据问题1 excel如何查找重复项并统计重复次数问题2
绑定dictionary 给定关键字不再字典中_VBA代码集锦-利用字典做两列数据的对比并对齐...
源数据: 代码: Sub 对比() Dim arr, brr, crr Dim i, j, n, lastrowA, lastrowB As Integer '建立字典对象 Set d = Creat ...
用Vue整合Echarts做数据展示：整合Echarts
在终端中输入:npm install echarts --save 在main.js中引入echarts // The Vue build version to load with the `impo ...
vue搭配echarts做地图散点效果以及飞机迁徙图
记录一下自己vue项目中做的echarts地图分布散点效果 1.项目安装echarts 在已经生成的vue项目根目录运行安装echarts: npm install echarts -S 2.百度地图 ...
【Excel】乱序不同行数的两列数据对比匹配
1 情境表格需求: 以上乱序不同行数的两个表格分别为总名单和签到表,需要在总名单中找到未签到人员. 表格特点: [表2:签到表] 为 [表1:总名单] 的子集: 两表顺序错乱: 不同姓名对应身份证号 ...
oracle 二表做差,oracle 两表数据对比---minus
1 引言在程序设计的过程中,往往会遇到两个记录集的比较.如华东电网PMS接口中实现传递一天中变更(新增.修改.删除)的数据.实现的方式有多种,如编程存储过程返回游标,在存储过程中对两批数据进行比较等 ...
oracle 两表两列数据对比_【SQL】根据两列信息，整合两张表数据
两张表数据如下: --2017年 id college score A001 北京大学 670 A002 中国人民大学 646 A003 清华大学 664 A003 清华大学 (定向) ...
mysql 同一张表，两列数据对比
1:场景=>在拼团列表中搜索拼团的状态(拼团中,拼团成功,拼团失败)表 kxp_group_lottery_group 已有关键字段组团id:group_lottery_group_id组团需要 ...
oracle 两表两列数据对比_Oracle、PostgreSQL与Mysql数据写入性能对比
最近因为工作需要,需要对Oracle和Mysql写入性能进行对比,以前都是听说Mysql性能比Oracle不是一个级别,现在亲测后,不比不知道,一比吓一跳... 追加PostgreSql性能测试数据 ...

Vue使用echarts做两个数据对比

Vue使用echarts做两个数据对比相关推荐

最新文章

热门文章