ECharts图表联动

最新推荐文章于 2024-05-22 10:05:28 发布
最新推荐文章于 2024-05-22 10:05:28 发布
阅读量770 收藏 4
点赞数 3
分类专栏： ECharts图表库 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itxyh/article/details/133926704
版权

1.小节概述

    当多个图表一起展现时，有时图表之间的数据是有关系的，这时候需要图表之间能否联动起来。例如有个地图展示了河南省各个区域（豫东、豫西、豫南、豫北、豫中）的销售额，另外有个柱状图展示了各个市区的销售额，那么在点击地图上某个区域时，柱状图也同时联动展示该区域辖下的各个市区的销售额数据。在本小节中，主要介绍在当前Vue项目中使用EventBus配合echarts实例中事件绑定API实现上述的图表联动场景。

2.操作步骤

2.1.准备工作

1.在主页HomeView.vue中，存放文字链接（图表联动），点击跳转对应的路由页面（chartLinkage），在router的index.js中配置路由信息。在chartLinkage演示页面中，进行左右栅格布局，准备存放地图（展示区域销售额）和柱状图（展示市区销售额）。

2.在RAP接口管理平台中新建接口，提供区域销售额数据以及各区域辖下的市区销售额数据。

3.在src/components/linkage下创建CascadeMap.vue，引入Echarts地图展示区域销售额数据，并放到chartLinkage演示页面中的左侧区域，参考代码：

注意事项：前面小节中，我们是通过document.getElementById进行获取元素的，这个方法其实有个明显的弊端（最终多个组件都要放到一起，假如一不小心设置的元素id有重复就会出现问题），所以此处及后续将使用ref进行获取DOM元素。

<template>
    <div class="mainDiv">
        <div class="titleDiv">区域销售金额</div>
        <div class="chartDiv" ref="chart"></div>
    </div>
</template>

<script>
import HenanAreaMap from '@/assets/maps/HenanArea.json'
import elementResizeDetectorMaker from 'element-resize-detector'

const erd = elementResizeDetectorMaker()

export default {
    data() {
        return {
            chartData: {},
        }
    },
    name: 'CascadeMap',
    mounted() {
        this.getChartData().then(() => {
            // 数据请求到后渲染图表
            this.renderChart()
        })
    },
    beforeDestroy() {
        erd.uninstall(this.$refs.chart)
    },
    methods: {
        // 请求数据回来
        async getChartData() {
            this.chartData = await this.$axios({ url: 'sales/cas' })
        },
        // 渲染图表
        renderChart() {
            // 使用registerMap注册地图json数据
            this.$echarts.registerMap('HenanArea', HenanAreaMap)
            let myChart = this.$echarts.init(this.$refs.chart)
            let chartData = this.chartData
            var option = {
                tooltip: {},
                visualMap: {
                    min: 3000,
                    max: 30000,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'],
                    inRange: {
                        color: ['#e0ffff', '#5470C6'],
                    },
                    show: true,
                },
                series: [
                    {
                        name: '销售额',
                        type: 'map',
                        map: 'HenanArea',
                        zoom: 1.2,
                        label: {
                            show: true,
                            fontSize: 14,
                            color: '#640000',
                            formatter: '{b}\n{c}',
                        },
                        data: chartData.data.areaData,
                        select: {
                            itemStyle: {
                                // 设置地图点击后的颜色
                                color: null,
                            },
                        },
                    },
                ],
            }
            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option)
            // 监听图表所在容器，大小有变化时自适应
            erd.listenTo(this.$refs.chart, function () {
                myChart.resize()
            })
        },
    },
}
</script>

<style scoped>
.titleDiv {
    cursor: pointer;
}
</style>

4.在src/components/linkage下创建CascadeBar.vue，引入Echarts柱状图展示市区销售额数据（默认展示全部市区数据），并放到chartLinkage演示页面中的右侧区域，参考代码：

<template>
    <div class="mainDiv">
        <div class="titleDiv">{{ title }}</div>
        <div class="chartDiv" ref="chart"></div>
    </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'

const erd = elementResizeDetectorMaker()

export default {
    data() {
        return {
            chartData: {},
            title: '河南省各市销售额',
        }
    },
    name: 'CascadeBar',
    mounted() {
        this.getChartData().then(() => {
            // 数据请求到后渲染图表
            this.renderChart()
        })
    },
    beforeDestroy() {
        erd.uninstall(this.$refs.chart)
    },
    methods: {
        // 请求数据回来
        async getChartData() {
            this.chartData = await this.$axios({ url: 'sales/cas' })
        },
        // 渲染图表
        renderChart() {
            let myChart = this.$echarts.init(this.$refs.chart)
            let chartData = this.chartData
            var option = {
                tooltip: {
                    show: true,
                    textStyle: {
                        color: '#000000',
                        fontStyle: 'normal',
                        fontSize: 14,
                        align: 'center',
                    },
                },
                legend: {
                    show: true,
                    data: ['销额'],
                    icon: 'roundRect',
                    x: 'center',
                    y: 'bottom',
                    padding: [0, 0, 10, 0],
                    textStyle: {
                        fontStyle: 'normal',
                        fontSize: 12,
                    },
                },
                grid: {
                    top: '10%',
                    bottom: '10%',
                    left: '3%',
                    right: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: chartData.data.allCityData.city,
                    axisTick: {
                        show: true,
                        alignWithLabel: true,
                    },
                    axisLabel: {
                        show: true,
                        interval: 0,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        // 分隔线设置
                        show: true,
                        lineStyle: {
                            color: ['#E5EAF3'],
                            width: 1,
                            type: 'dashed',
                        },
                    },
                },
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: chartData.data.allCityData.amount,
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 11,
                        },
                        itemStyle: {
                            // 顺时针设置圆角：左上、右上、右下、左下
                            borderRadius: [6, 6, 0, 0],
                            // 根据值的情况设置不同颜色
                            color: function (params) {
                                let colorList = ['#5470C6', '#91CC75', '#FAC858', '#EE6666']
                                let amount = params.data
                                if (amount >= 7000) {
                                    return colorList[0]
                                } else if (amount < 7000 && amount >= 5000) {
                                    return colorList[1]
                                } else if (amount < 5000 && amount >= 3000) {
                                    return colorList[2]
                                } else {
                                    return colorList[3]
                                }
                            },
                        },
                    },
                ],
            }
            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option)
            // 监听图表所在容器，大小有变化时自适应
            erd.listenTo(this.$refs.chart, function () {
                myChart.resize()
            })
        },
    },
}
</script>

<style scoped>
.titleDiv {
    cursor: pointer;
}
</style>

2.2.组件间通信

1.两个图表组件（地图和柱状图）已经呈现，数据也已经渲染。那么要想联动，就需要图表间可以进行通信，例如点击左侧区域能够触发右侧图表组件方法进行数据更新。此处采用的是EventBus进行组件间通信，首先在main.js中全局初始化EventBus，如下图：

2.接下来将使用EventBus配合echarts实例中事件绑定来实现点击区域同时柱状图数据更新。

2.3.实现图表联动

1.在地图组件中向EventBus发送事件，并传递参数（所点击的区域快信息）。当然，由于点击图表区域块触发CascadeBar显示对应区域的数据，那么同理设置点击其他地方（此处设置的是点击标题的div容器）触发CascadeBar回归到所有区域下的数据展示。所以，在地图组件中有两处地方需要向EventBus发送事件，参考代码：

注意事项：1.在echarts点击事件绑定时，因为echarts当中的this并不是vue的实例vueComponent，需要先定义一个变量名 _this=this 进行接收。2.在鼠标划过地图时，默认有高亮颜色显示，可以通过绑定mouseover事件设置鼠标移入区域时颜色不变。

<template>
    <div class="mainDiv">
        <div class="titleDiv" @click="cascadeHenan">区域销售金额</div>
        <div class="chartDiv" ref="chart"></div>
    </div>
</template>

<script>
import HenanAreaMap from '@/assets/maps/HenanArea.json'
import elementResizeDetectorMaker from 'element-resize-detector'

const erd = elementResizeDetectorMaker()

export default {
    data() {
        return {
            chartData: {},
        }
    },
    name: 'CascadeMap',
    mounted() {
        this.getChartData().then(() => {
            // 数据请求到后渲染图表
            this.renderChart()
        })
    },
    beforeDestroy() {
        // 移除元素监听
        erd.uninstall(this.$refs.chart)
    },
    methods: {
        // 请求数据回来
        async getChartData() {
            this.chartData = await this.$axios({ url: 'sales/cas' })
        },
        cascadeHenan() {
            this.$EventBus.$emit('casAreaChart', '河南省')
        },
        // 渲染图表
        renderChart() {
            // 使用registerMap注册地图json数据
            this.$echarts.registerMap('HenanArea', HenanAreaMap)
            let myChart = this.$echarts.init(this.$refs.chart)
            let chartData = this.chartData
            var option = {
                tooltip: {},
                visualMap: {
                    min: 3000,
                    max: 30000,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'],
                    inRange: {
                        color: ['#e0ffff', '#5470C6'],
                    },
                    show: true,
                },
                series: [
                    {
                        name: '销额',
                        type: 'map',
                        map: 'HenanArea',
                        zoom: 1.2,
                        label: {
                            show: true,
                            fontSize: 14,
                            color: '#640000',
                            formatter: '{b}\n{c}',
                        },
                        data: chartData.data.areaData,
                        select: {
                            itemStyle: {
                                // 设置地图点击后的颜色
                                color: null,
                            },
                        },
                    },
                ],
            }
            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option)
            // 设置点击事件，和市区销售额数据进行图表联动
            // 因为echarts当中的this并不是vue的实例vueComponent，需要定义一个变量名接收
            let _this = this
            myChart.on('click', function (params) {
                _this.$EventBus.$emit('casAreaChart', params.name)
            })
            // 设置鼠标移入区域颜色不变
            myChart.on('mouseover', function (params) {
                if (params.data.value != undefined) {
                    myChart.dispatchAction({
                        type: 'downplay',
                    })
                }
            })
            // 监听图表所在容器，大小有变化时自适应
            erd.listenTo(this.$refs.chart, function () {
                myChart.resize()
            })
        },
    },
}
</script>

<style scoped>
.titleDiv {
    cursor: pointer;
}
</style>

2.在柱状图组件中进行EventBus监听接收事件，接收地图组件传递过来的区域参数，然后更新echarts配置数据。当然，在柱状图组件被销毁前，需要把EventBus监听事件给移除，以免下次再重复创建监听。参考代码：

<template>
    <div class="mainDiv">
        <div class="titleDiv">{{ title }}</div>
        <div class="chartDiv" ref="chart"></div>
    </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'

const erd = elementResizeDetectorMaker()

export default {
    data() {
        return {
            chartData: {},
            title: '河南省各市销售额',
        }
    },
    name: 'CascadeBar',
    mounted() {
        this.getChartData().then(() => {
            // 数据请求到后渲染图表
            this.renderChart()
        })
        // EventBus监听接收事件
        this.$EventBus.$on('casAreaChart', (data) => {
            this.title = data + '各市销售额'
            let myChart = this.$echarts.getInstanceByDom(this.$refs.chart)
            if (data == '河南省') {
                myChart.setOption({
                    xAxis: {
                        data: this.chartData.data.allCityData.city,
                    },
                    series: [
                        {
                            data: this.chartData.data.allCityData.amount,
                        },
                    ],
                })
            } else {
                myChart.setOption({
                    xAxis: {
                        data: this.chartData.data.areaCityData[data].city,
                    },
                    series: [
                        {
                            data: this.chartData.data.areaCityData[data].amount,
                        },
                    ],
                })
            }
        })
    },
    beforeDestroy() {
        // 移除EventBus监听
        this.$EventBus.$off('casAreaChart')
        // 移除元素监听
        erd.uninstall(this.$refs.chart)
    },
    methods: {
        // 请求数据回来
        async getChartData() {
            this.chartData = await this.$axios({ url: 'sales/cas' })
        },
        // 渲染图表
        renderChart() {
            let myChart = this.$echarts.init(this.$refs.chart)
            let chartData = this.chartData
            var option = {
                tooltip: {
                    show: true,
                    textStyle: {
                        color: '#000000',
                        fontStyle: 'normal',
                        fontSize: 14,
                        align: 'center',
                    },
                },
                legend: {
                    show: true,
                    data: ['销额'],
                    icon: 'roundRect',
                    x: 'center',
                    y: 'bottom',
                    padding: [0, 0, 10, 0],
                    textStyle: {
                        fontStyle: 'normal',
                        fontSize: 12,
                    },
                },
                grid: {
                    top: '10%',
                    bottom: '10%',
                    left: '3%',
                    right: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: chartData.data.allCityData.city,
                    axisTick: {
                        show: true,
                        alignWithLabel: true,
                    },
                    axisLabel: {
                        show: true,
                        interval: 0,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        // 分隔线设置
                        show: true,
                        lineStyle: {
                            color: ['#E5EAF3'],
                            width: 1,
                            type: 'dashed',
                        },
                    },
                },
                series: [
                    {
                        name: '销额',
                        type: 'bar',
                        data: chartData.data.allCityData.amount,
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 11,
                        },
                        itemStyle: {
                            // 顺时针设置圆角：左上、右上、右下、左下
                            borderRadius: [6, 6, 0, 0],
                            // 根据值的情况设置不同颜色
                            color: function (params) {
                                let colorList = ['#5470C6', '#91CC75', '#FAC858', '#EE6666']
                                let amount = params.data
                                if (amount >= 7000) {
                                    return colorList[0]
                                } else if (amount < 7000 && amount >= 5000) {
                                    return colorList[1]
                                } else if (amount < 5000 && amount >= 3000) {
                                    return colorList[2]
                                } else {
                                    return colorList[3]
                                }
                            },
                        },
                    },
                ],
            }
            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option)
            // 监听图表所在容器，大小有变化时自适应
            erd.listenTo(this.$refs.chart, function () {
                myChart.resize()
            })
        },
    },
}
</script>

<style scoped>
.titleDiv {
    cursor: pointer;
}
</style>

3.至此，图表联动处理完成，启动Vue项目，查看联动效果。

3.小节总结

    当多个ECharts图表呈现的数据存在关系时，有时需要能够进行图表联动。在本小节中，通过使用EventBus解决组件间通信，并配合echarts实例中点击事件绑定实现了图表间的联动。

itxyh
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts 实现两个图表联动
leyu_miss的博客
06-19 631
【代码】Echarts 实现两个图表联动。
Echarts的多表联动
2301_81170993的博客
04-15 467
在这个例子中，我们有两个 ECharts 实例chart1和 chart2。图表1是一个柱状图，图表2是一个线形图。我们监听图表1的点击事件，然后更新图表2中对应索引的数据点。这样，当用户点击图表1中的某个柱子时，图表2的相应数据点会随之变化，实现了两个图表的联动。ECharts 的多表联动是指多个图表实例能够共享同一套数据，并且在一个图表实例上的操作会影响其他图表实例。这通常通过监听 ECharts 提供的事件系统来实现。
echarts多图表联动
Heby的博客
10-09 3381
echarts的多图表联动有两个方法 方法一:官网实例在配置项内关联Examples - Apache EChartshttps://echarts.apache.org/examples/zh/editor.html?c=dataset-link 方法二:使用connect进行联动 (1条消息) ECharts 联动效果_出埃及记-CSDN博客https://blog.csdn.net/u014452812/article/details/78202789第二种联动方法在性能还是代码的可维护性都不是
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表)
wqqstudy的博客
05-22 1570
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表) 利用某学院2019年和2020年的专业招生情况绘制柱状图联动图表； 利用某大学各专业2016-2020年的招生情况绘制饼图与柱状图的联动图表；
QT Echarts 联动共享数据表图 使用详解
断点
01-10 904
Echarts是百度的一款可视化界面开发的平台，里面的地图以及数据可视化内容十分丰富，适合用于一些大屏数据显示项目或者一些ui界面开发。每一个ECharts图表使用一个无边框的QWebView来展示，这样多个不同类型的ECharts图表就是多个封装不同类型ECharts图表的QWebView（html加载入QWebView窗口来实现），每一个模块封装的数据用qt预留接口调用js代码实现修改html的功能，最终达到代码操作qt即可操作图表的功能。本文作者原创，转载请附上文章出处与本文链接。
echarts多表联动，及更正
wxt185的博客
08-17 4431
echarts多表联动 关键代码： // 为echarts对象加载数据 myChart1.setOption(option1); myChart2.setOption(option2); myChart3.setOption(option3); myChart4.setOption(option4); //联动配置 正确：echarts.connect([myChart1,myChart2,myChart3,myChart4]);
Vue中EChatrs中两个图表联动(一个图表控制另一个图表的数据)
qyp_1的博客
07-29 2735
前言 这篇文章给小伙伴们带来的是EChatrs的操作，是通过点击一个图表来控制另一个图表的数据的操作，看着还是蛮有用的，因为大家在做管理系统的项目的时候，应该都是可以用的上的，也非常的简单，就是有的小伙伴可能刚接触EChatrs的时候可能不太熟悉其中的属性，因为它的属性功能太多、太强大了。 展示 一、原理 它的原理其实十分的简单，非常的简单，就是给一个图表绑定一个点击事件，当然这个操作在原生的js代码中还是很好实现的，就获取下DOM，然后操作操作就可以了。 但是这篇文章来主要给大家说的是在Vue中应该怎样
Echarts地图与图表联动
10-20
使用Echarts实现地图与图表的联动。这里的效果为点击美国的某个州，下面就会对应的刷新该州与其他州人口的对比饼图。全网首发，独此一家。
Echarts联动.zip
03-06
echarts图表联动；多图组合联动
ECharts图表组件使用
01-17
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的...
echarts数据地图实现省市联动点击
09-21
一个echarts数据地图的案例，展示全国省市的数据，以及点击省份下钻到市级的数据展示效果。
下拉框选择事件动态加载echart数据
01-22
通过下拉框异步刷新echart数据，原文地址http://blog.csdn.net/kebi007/article/details/52887570
echarts折线图+饼图双图联动示例
07-15
echarts折线图+饼图双图联动示例
Echarts数据可视化图表案例
01-11
Echarts数据可视化图表案例：包括柱图，饼图，折线图，地图等数据展示图表；案例下载后直接使用webstrom或idea打开，在编辑器内打开html
Echarts使用之——根据筛选条件动态生成图表，及联动easyui(问题及解决)
热门推荐
xu2034029667的博客
10-11 1万+
 两三个月前第一次开发的时候，不想今天便出现了一些小问题，回想起来由于时间比较赶，确实不够健壮，不够美观，体验稍差，整体如下： 重点1：根据筛选条件动态生成图表 重点2：根据提示框，联动下面的easyui表格进行实时更新显示 其他遇到其他相关小问题和解决 注意事项： 1：combobox当要选择输入内容时，聚焦便清空内容， 2：求出checked里面值，选择使用prop 特性，在最新版本...
echarts 飞线、轨迹图与地方地图联动
Maryshaw的博客
05-22 2183
echarts进阶：飞线、轨迹图与地图联动
python echarts 多图联动_pyecharts多图显示grid与legend
weixin_39754603的博客
12-18 5341
一、grid与legend的作用与问题如果希望在一个页面绘制多个图形，这就需要使用grid，echarts官方对grid给出的解释是 “直角坐标系内绘图网格” 。所以如果想在一个页面显示多个图，就需要通过grid的上下左右，长宽高低相关指标指定生成的图所住的位置，这样就可以将两个图在一个页面上展示。即然grid可以实现这个功能，为什么还要提到legend这个参数呢？legend这个参数就是在有多个...
Echarts多表联动
2301_81071890的博客
04-20 191
【代码】Echarts多表联动。
Echarts 实现点击更新图表（图标联动）
忧天的杞人
06-28 2003
Echarts 实现点击更新图表（图标联动） 因为需要，领导要求做一个统计页面，要能点击图表实现数据更新 先上Demo 3.首先要在echarts 官网上下载最新的echarts,图中的圆角pie图和rose图就是最新版本的特性。 官网地址：Apache ECharts 4.html页面要加入三个div用来承载echarts的渲染，注意div一定要有高度，否则是渲染不出来的 <div style="width:100%" id="initBar"></div> 我这里没写高
echarts图表tooltip
最新发布
06-14
ECharts是一个强大的JavaScript数据可视化库，它提供了丰富的图表类型和交互功能，其中 tooltip（提示框）是图表中一个关键元素，用于在鼠标悬停在图表上特定数据点时显示...3. 如何在ECharts中实现图表间的联动提示？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值