问答

vue 使用echarts的图表进行联动 echarts.connect()方法无效,

作者:admin 2021-05-08 我要评论

export default { name: 'hello', data() { return { msg: 'Welcome to Your Vue.js App' } }, mounted() { this.drawLine(); }, methods: { drawLine() { // 绘...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

export default {

    name: 'hello',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },

    mounted() {
        this.drawLine();
    },
    methods: {
        drawLine() {
            // 绘制图表
            var myChart1 = this.$echarts.init(document.getElementById('main1'))
            var myChart2 = this.$echarts.init(document.getElementById('main2'))
            var myChart3 = this.$echarts.init(document.getElementById('main3'))
            var myChart4 = this.$echarts.init(document.getElementById('main4'))
            var option1 = {
                dataZoom:{
                    show:false
                },
                title: {
                    text: '温度状况',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['设定温度', '进水温度', '出水温度', '环境温度']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['line']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                xAxis: [{
                    type: 'category', //x轴为类目类型
                    axisLabel: {
                        show: true,
                        interval: 0,
                        rotate: 45
                    },
                    data: ['00:00:00', '00:05:00', '00:10:00', '00:15:00', '00:20:00', '00:25:00', '00:30:00', '00:35:00',
                        '00:40:00', '00:45:00'
                    ]

                }],
                yAxis: [{
                    type: 'value' //y轴为值类型
                }],
                series: [{
                    name: '设定温度',
                    type: 'line',
                    smooth: true,
                    data: [55, 55, 55, 55, 55, 55, 55, 55, 55, 55]
                }]
            }

            var option2 = {
                dataZoom:{
                    show:false
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    y: -30,
                    data: ['设定温度', '进水温度', '出水温度', '环境温度']
                },
                toolbox: {
                    y: -30,
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['line']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                xAxis: [{
                    type: 'category', //x轴为类目类型
                    axisLabel: {
                        show: true,
                        interval: 0,
                        rotate: 45
                    },
                    data: ['00:00:00', '00:05:00', '00:10:00', '00:15:00', '00:20:00', '00:25:00', '00:30:00', '00:35:00',
                        '00:40:00', '00:45:00'
                    ]

                }],
                yAxis: [{
                    type: 'value' //y轴为值类型
                }],
                series: [{
                    name: '进水温度',
                    type: 'line',
                    smooth: true,
                    data: [15, 15, 16, 18, 18, 19, 19, 19, 19, 19]
                }]
            }

            var option3 = {
                dataZoom:{
                    show:false
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    y: -30,
                    data: ['设定温度', '进水温度', '出水温度', '环境温度']
                },
                toolbox: {
                    y: -30,
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['line']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                xAxis: [{
                    type: 'category', //x轴为类目类型
                    axisLabel: {
                        show: true,
                        interval: 0,
                        rotate: 45
                    },
                    data: ['00:00:00', '00:05:00', '00:10:00', '00:15:00', '00:20:00', '00:25:00', '00:30:00', '00:35:00',
                        '00:40:00', '00:45:00'
                    ]

                }],
                yAxis: [{
                    type: 'value' //y轴为值类型
                }],
                series: [{
                    name: '出水温度',
                    type: 'line',
                    smooth: true,
                    data: [20, 25, 30, 35, 38, 44, 46, 48, 53, 56]
                }]
            }

            var option4 = {
                dataZoom:{
                    show:false
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    y: -30,
                    data: ['设定温度', '进水温度', '出水温度', '环境温度']
                },
                toolbox: {
                    y: -30,
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['line']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                xAxis: [{
                    type: 'category', //x轴为类目类型
                    axisLabel: {
                        show: true,
                        interval: 0,
                        rotate: 45
                    },
                    data: ['00:00:00', '00:05:00', '00:10:00', '00:15:00', '00:20:00', '00:25:00', '00:30:00', '00:35:00',
                        '00:40:00', '00:45:00'
                    ]

                }],
                yAxis: [{
                    type: 'value' //y轴为值类型
                }],
                series: [{
                    name: '环境温度',
                    type: 'line',
                    smooth: true,
                    data: [15, 15, 15, 15, 15, 15, 15, 15, 15, 15]
                }]
            }

            // 为echarts对象加载数据 
            myChart1.setOption(option1);
            myChart2.setOption(option2);
            myChart3.setOption(option3);
            myChart4.setOption(option4);
            //联动配置
            myChart1.connect([myChart2, myChart3, myChart4]);
            myChart2.connect([myChart1, myChart3, myChart4]);
            myChart3.connect([myChart2, myChart1, myChart4]);
            myChart4.connect([myChart2, myChart3, myChart1]);

        }
    }
} ### 题目描述

image.png

求解决

###

就很神奇,你没看文档介绍怎么用吗

image.png

echarts.connect([myChart1, myChart2, myChart3, myChart4]);

//你这里应该是
this.$echarts.connect([myChart1, myChart2, myChart3, myChart4]);

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue 使用echarts的图表进行联动 echart

    vue 使用echarts的图表进行联动 echart

  • 计算实际时间天数(时间范围去重)

    计算实际时间天数(时间范围去重)

  • 求助,正则表达式既能输入手机号又能输

    求助,正则表达式既能输入手机号又能输

  • div溢出但是不隐藏让他停靠。

    div溢出但是不隐藏让他停靠。

腾讯云代理商
海外云服务器