echarts 双Y轴，双X轴，折线图折点，折点与直方对应

最新推荐文章于 2024-09-12 04:05:15 发布

Kill_paradise

最新推荐文章于 2024-09-12 04:05:15 发布

阅读量1.6k

点赞数

分类专栏： js 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/Kill_paradise/article/details/122410498

版权

js 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

动态增加了一个隐藏的x轴（show：false），用来引导折线图的点的位置，核心代码

var option = {
...省略
"name": "当前应力浅孔/Mpa",
xAxisIndex: 1,//主要在此处指定下面的xAxis
"smooth": true,
...省略
}

option.xAxis[1] = {
type: 'value',
//max: option.xAxis[0].data.length * 100,
show: false
}

option.series[1].data = option.series[1].data.map((x, i) => [30 + i * 100, x]);//30为偏移量
option.series[4].data = option.series[4].data.map((x, i) => [70 + i * 100, x]);//70为偏移量

 {
        "name": "当前应力浅孔/Mpa",
        xAxisIndex: 1,
        "smooth": true,
        "type": "line",
        "areaStyle": {
            "color": {
                "x": 0,
                "y": 0,
                "x2": 0,
                "y2": 1,
                "type": "linear",
                "global": false,
                "colorStops": [{
                    "offset": 0,
                    "color": "#017CB7"
                }, {
                    "offset": 0.5,
                    "color": "#028FD6"
                }, {
                    "offset": 1,
                    "color": "#6EC5F2"
                }]
            },
            "opacity": 0.2,
            "origin": "start"
        },
        "yAxisIndex": 1,
        "itemStyle": {
            "color": "#0ce30c"
        },
        "data": [5.1, 0, 8, 8.4, 7.3],
        "markLine": {
            "symbol": "none",
            "data": []
        }
    },