Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

echarts使用grid绘制多个图形，markarea只对最后一个图形生效 #7902

Closed
tcwloy opened this issue Mar 8, 2018 · 1 comment
Closed

echarts使用grid绘制多个图形，markarea只对最后一个图形生效 #7902

tcwloy opened this issue Mar 8, 2018 · 1 comment

Comments

@tcwloy
Copy link

tcwloy commented Mar 8, 2018

One-line summary [问题简述]

echarts使用grid绘制多个图形，markarea只对最后一个图形生效

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:4.0（官网最新版本，可在官网例子中测试）
  • Browser version [浏览器类型和版本]:chrome63
  • OS Version [操作系统类型和版本]:windows10 64位

Expected behaviour [期望结果]

所有图形均能正常显示图表标域

ECharts option [ECharts配置项]

 var data1 = [[1, 2, 3, 4, 5, 6, 7, 8, 9], [12, 23, 34, 45, 56, 67, 78, 89, 100]];
                var x = data1[0];
                var y = data1[1];
                // 指定图表的配置项和数据
                var option = {
                        title: {
                            text: '454',
                            textStyle: {
                                color: "#565a5c",
                                fontSize: "12px"
                            },
                            left: 'left'
                        },
                        dataZoom: [{

                            id: 'dataZoomX',
                            type: 'slider',
                            xAxisIndex: [0, 1, 2, 3],
                            filterMode: 'fliter',
                            top:0
                        },
                            {
                            id: 'dataZoomssss',
                            type: 'inside',
                            xAxisIndex: [0, 1, 2, 3],
                            filterMode: 'fliter'
                        }],
                        tooltip: {
                            formatter: '{b}<br />&nbsp; {c} Kappa'
                        },
                        legend: {
                            // data: ['销量']
                            show: false
                        },
                        grid: [
                            {
                                left: '3%',
                                right: '8%',
                                top: '5%',
                                height: '20%'
                            },
                            {
                                left: '3%',
                                right: '8%',
                                top: '30%',
                                height: '20%'
                            },
                            {
                                left: '3%',
                                right: '8%',
                                top: '55%',
                                height: '20%'
                            },
                            {
                                left: '3%',
                                right: '8%',
                                top: '80%',
                                height: '20%'
                            }
                        ],
                        xAxis: [
                            {
                            gridIndex: 0,
                            type: 'category',
                            // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                            data: x,
                            axisLabel: {
                                interval: 0
                            },
                            boundaryGap: false,
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#a6a6a6',
                                    type: 'dashed',
                                    width: 1
                                }
                            }
                        }, 
                            {
                            gridIndex: 1,
                            type: 'category',
                            // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                            data: x,
                            axisLabel: {
                                interval: 0
                            },
                            boundaryGap: false,
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#a6a6a6',
                                    type: 'dashed',
                                    width: 1
                                }
                            }
                        }, 
                            {
                            gridIndex: 2,
                            type: 'category',
                            // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                            data: x,
                            axisLabel: {
                                interval: 0
                            },
                            boundaryGap: false,
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#a6a6a6',
                                    type: 'dashed',
                                    width: 1
                                }
                            }
                        }, 
                            {
                            gridIndex: 3,
                            type: 'category',
                            // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                            data: x,
                            axisLabel: {
                                interval: 0
                            },
                            boundaryGap: false,
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#a6a6a6',
                                    type: 'dashed',
                                    width: 1
                                }
                            }
                        }
                        ],
                        yAxis: [
                            {
                            gridIndex: 0,
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#a6a6a6',
                                    type: 'dashed',
                                    width: 1
                                }
                                ,
                                interval: 1
                            }

                        }, 
                            {
                            gridIndex: 1,
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#a6a6a6',
                                    type: 'dashed',
                                    width: 1
                                }
                                ,
                                interval: 1
                            }

                        }, 
                            {
                            gridIndex: 2,
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#a6a6a6',
                                    type: 'dashed',
                                    width: 1
                                }
                                ,
                                interval: 1
                            }

                        }, 
                            {
                            gridIndex: 3,
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#a6a6a6',
                                    type: 'dashed',
                                    width: 1
                                }
                                ,
                                interval: 1
                            }

                        }],
                        series: [
                            {
                                xAxisIndex: 0,
                                yAxisIndex: 0,
                                name: '弹性数值',
                                type: 'line',
                                data: y,
                                markLine: {
                                    silent: false,
                                    data: [
                                        {name: '最大范围', yAxis: 64},
                                        {name: '最小范围', yAxis: 17}
                                    ],
                                    lineStyle: {
                                        color: '#229be4',
                                        type: 'dashed',
                                        opacity: 0,
                                        width: 1
                                    },
                                    symbol: ''
                                },
                                markArea: {
                                    silent: true,
                                    data: [
                                        [
                                            {
                                                // name: '正常范围',
                                                yAxis: 66
                                            },
                                            {
                                                yAxis: 17
                                            }
                                        ]
                                    ],
                                    itemStyle: {
                                        color: "#229be4",
                                        opacity: 0.1
                                    }
                                },
                                // 高亮样式。
                                itemStyle: {
                                    normal: {
                                        borderWidth: 10,
                                        color: "#4cc4e9" //图标颜色
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        width: 3,  //连线粗细
                                        color: "#4cc4e9"  //连线颜色
                                    }
                                },
                                emphasis: {
                                    itemStyle: {
                                        // 高亮时点的颜色。
                                        color: '#4cc4e9'
                                    }
                                    // label: {
                                    //     show: true,
                                    //     // 高亮时标签的文字。
                                    //     formatter: '{b}:{d} kapa',
                                    //     textStyle: {
                                    //         color: '#000'
                                    //     }
                                    // }
                                }
                            },
                            {
                                xAxisIndex: 1,
                                yAxisIndex: 1,
                                name: '弹性数值',
                                type: 'line',
                                data: y,
                                markLine: {
                                    silent: false,
                                    data: [
                                        {name: '最大范围', yAxis: 64},
                                        {name: '最小范围', yAxis: 17}
                                    ],
                                    lineStyle: {
                                        color: '#229be4',
                                        type: 'dashed',
                                        opacity: 0,
                                        width: 1
                                    },
                                    symbol: ''
                                },
                                markArea: {
                                    silent: true,
                                    data: [
                                        [
                                            {
                                                // name: '正常范围',
                                                yAxis: 66
                                            },
                                            {
                                                yAxis: 17
                                            }
                                        ]
                                    ],
                                    itemStyle: {
                                        color: "#229be4",
                                        opacity: 0.1
                                    }
                                },
                                // 高亮样式。
                                itemStyle: {
                                    normal: {
                                        borderWidth: 10,
                                        color: "#4cc4e9" //图标颜色
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        width: 3,  //连线粗细
                                        color: "#4cc4e9"  //连线颜色
                                    }
                                },
                                emphasis: {
                                    itemStyle: {
                                        // 高亮时点的颜色。
                                        color: '#4cc4e9'
                                    }
                                    // label: {
                                    //     show: true,
                                    //     // 高亮时标签的文字。
                                    //     formatter: '{b}:{d} kapa',
                                    //     textStyle: {
                                    //         color: '#000'
                                    //     }
                                    // }
                                }
                            },
                            {
                                xAxisIndex: 2,
                                yAxisIndex: 2,
                                name: '弹性数值',
                                type: 'line',
                                data: y,
                                markLine: {
                                    silent: false,
                                    data: [
                                        {name: '最大范围', yAxis: 64},
                                        {name: '最小范围', yAxis: 17}
                                    ],
                                    lineStyle: {
                                        color: '#229be4',
                                        type: 'dashed',
                                        opacity: 0,
                                        width: 1
                                    },
                                    symbol: ''
                                },
                                markArea: {
                                    silent: true,
                                    data: [
                                        [
                                            {
                                                // name: '正常范围',
                                                yAxis: 66
                                            },
                                            {
                                                yAxis: 17
                                            }
                                        ]
                                    ],
                                    itemStyle: {
                                        color: "#229be4",
                                        opacity: 0.9
                                    }
                                },
                                // 高亮样式。
                                itemStyle: {
                                    normal: {
                                        borderWidth: 10,
                                        color: "#4cc4e9" //图标颜色
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        width: 3,  //连线粗细
                                        color: "#4cc4e9"  //连线颜色
                                    }
                                },
                                emphasis: {
                                    itemStyle: {
                                        // 高亮时点的颜色。
                                        color: '#4cc4e9'
                                    }
                                    // label: {
                                    //     show: true,
                                    //     // 高亮时标签的文字。
                                    //     formatter: '{b}:{d} kapa',
                                    //     textStyle: {
                                    //         color: '#000'
                                    //     }
                                    // }
                                }
                            },
                            {
                                xAxisIndex: 3,
                                yAxisIndex: 3,
                                name: '弹性数值',
                                type: 'line',
                                data: y,
                                markLine: {
                                    silent: false,
                                    data: [
                                        {name: '最大范围', yAxis: 64},
                                        {name: '最小范围', yAxis: 17}
                                    ],
                                    lineStyle: {
                                        color: '#229be4',
                                        type: 'dashed',
                                        opacity: 0,
                                        width: 1
                                    },
                                    symbol: ''
                                },
                                markArea: {
                                    silent: false,
                                    data: [
                                        [
                                            {
                                                // name: '正常范围',
                                                yAxis: 66
                                            },
                                            {
                                                yAxis: 17
                                            }
                                        ]
                                    ],
                                    itemStyle: {
                                        color: "#000000",
                                        opacity: 0.5
                                    }
                                },
                                // 高亮样式。
                                itemStyle: {
                                    normal: {
                                        borderWidth: 10,
                                        color: "#4cc4e9" //图标颜色
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        width: 3,  //连线粗细
                                        color: "#4cc4e9"  //连线颜色
                                    }
                                },
                                emphasis: {
                                    itemStyle: {
                                        // 高亮时点的颜色。
                                        color: '#4cc4e9'
                                    }
                                    // label: {
                                    //     show: true,
                                    //     // 高亮时标签的文字。
                                    //     formatter: '{b}:{d} kapa',
                                    //     textStyle: {
                                    //         color: '#000'
                                    //     }
                                    // }
                                }
                            }]
                    };

image

Other comments [其他信息]
@tcwloy
Copy link
Author

tcwloy commented Mar 8, 2018

@pissang 求助

@100pah 100pah closed this as completed in 8f59968 Mar 12, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@tcwloy