Vue使用echarts做两个数据对比

最新推荐文章于 2025-06-19 10:49:46 发布

原创最新推荐文章于 2025-06-19 10:49:46 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #前端

Vue React 专栏收录该内容

17 篇文章

订阅专栏

该博客展示了如何利用Echarts库创建柱状图，并实现在鼠标悬停时两个图表同步显示提示信息和高亮效果。代码示例中，通过监听`mouseover`事件并调用`dispatchAction`方法实现了图表间的联动。这种技术常用于数据对比和宏观展示，如气温变化或销售额对比等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求:

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

具体代码:

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>