Echarts 偏移，柱状图偏移，散点图偏移，折线图偏移

最新推荐文章于 2024-05-02 14:26:53 发布
最新推荐文章于 2024-05-02 14:26:53 发布
阅读量5.7k 收藏 11
点赞数 4
分类专栏： 数据可视化开发 文章标签： echarts 前端 javascript
原文链接：https://www.jianshu.com/p/777c0082d280
版权

1.柱状图偏移：
在这里插入图片描述
!!!注意：影响全局type为bar的偏移，难受的地方。

2.散点图偏移：

3.折线图偏移：

  • 这个比较难受，官方也有symbolOffset属性，不过使用之后发现：线没偏移，线上的点儿偏移了。。
    所以，这个属性不知道有什么用处。。

  • 解决：
    动态增加了一个隐藏的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为偏移量

效果：

  • 偏移前效果：

image.png

  • 偏移后效果：

image.png

完整代码：

option = {
    "color": ["#8D18F0", "#188DF0", "#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570", "#c4ccd3"],
    "legend": {
        "top": -10
    },
    "tooltip": {},
    "xAxis": [{
        "data": ["测点1", "测点2", "测点3", "测点4", "测点5"],
        "axisLabel": {
            "textStyle": {
                "color": "#000"
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": false
        },
        "z": 10
    }],
    "yAxis": [{
        "axisLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "splitLine": {
            "show": false
        },
        "type": "value",
        "name": "变化率(%)",
        "min": 0,
        "max": 50,
        "interval": 5,
        "axisLabel": {
            "formatter": "{value}"
        }
    }, {
        "axisLine": {
            "show": false
        },
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "plitLine": {
            "show": false
        },
        "axisLabel": {
            "formatter": "{value}",
            "textStyle": {
                "color": "#999"
            }
        },
        "type": "value",
        "name": "MPA",
        "min": 0,
        "max": 10
    }],
    "series": [{
        "name": "深孔/%",
        "type": "bar",
        "barGap": 0,
        "data": [9.41, 0, 14.93, 19.4, 26.42],
        "markLine": {
            "symbol": "none",
            "data": [{
                "lineStyle": {
                    "color": "blue",
                    "type": "solid"
                },
                "yAxis": 50,
                "label": {
                    "show": true,
                    "formatter": "深孔变化率弱"
                }
            }, {
                "lineStyle": {
                    "color": "orange",
                    "type": "solid"
                },
                "yAxis": 75,
                "label": {
                    "show": true,
                    "formatter": "深孔变化率中"
                }
            }, {
                "lineStyle": {
                    "color": "red",
                    "type": "solid"
                },
                "yAxis": 100,
                "label": {
                    "show": true,
                    "formatter": "深孔变化率强"
                }
            }]
        }
    }, {
        "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": "#9470DC"
                }, {
                    "offset": 0.5,
                    "color": "#B57EDC"
                }, {
                    "offset": 1,
                    "color": "#DA70D5"
                }]
            },
            "opacity": 0.2,
            "origin": "start"
        },
        "yAxisIndex": 1,
        "itemStyle": {
            "color": "#0ce30c"
        },
        "data": [8.1, 0, 7.7, 7.8, 5.4],
        "markLine": {
            "symbol": "none",
            "data": [{
                "lineStyle": {
                    "color": "blue",
                    "type": "solid"
                },
                "yAxis": 10,
                "label": {
                    "show": true,
                    "formatter": "深孔当前应力弱",
                    "padding": [0, 0, 10, -85]
                }
            }, {
                "lineStyle": {
                    "color": "orange",
                    "type": "solid"
                },
                "yAxis": 14,
                "label": {
                    "show": true,
                    "formatter": "深孔当前应力中",
                    "padding": [0, 0, 10, -85]
                }
            }, {
                "lineStyle": {
                    "color": "red",
                    "type": "solid"
                },
                "yAxis": 16,
                "label": {
                    "show": true,
                    "formatter": "深孔当前应力强",
                    "padding": [0, 0, 10, -85]
                }
            }]
        }
    }, {
        "name": "最大应力深孔/Mpa",
        "type": "scatter",
        "smooth": true,
        "symbolSize": 10,
        "symbolOffset": [-27.5, 0],
        "yAxisIndex": 1,
        "itemStyle": {
            "color": "blue"
        },
        "data": [8.3, 6.7, 7.7, 8, 6.7],
        "markLine": {
            "symbol": "none",
            "data": []
        }
    }, {
        "name": "浅孔/%",
        "type": "bar",
        "barGap": 0,
        "data": [4, 0, 8.97, 1.19, 16.44],
        "markLine": {
            "symbol": "none",
            "data": [{
                "lineStyle": {
                    "color": "green"
                },
                "yAxis": 50,
                "label": {
                    "show": true,
                    "formatter": "浅孔变化率弱",
                    "padding": [0, 0, 10, -700]
                }
            }, {
                "lineStyle": {
                    "color": "orange"
                },
                "yAxis": 75,
                "label": {
                    "show": true,
                    "formatter": "浅孔变化率中",
                    "padding": [0, 0, 10, -700]
                }
            }, {
                "lineStyle": {
                    "color": "red"
                },
                "yAxis": 100,
                "label": {
                    "show": true,
                    "formatter": "浅孔变化率强",
                    "padding": [0, 0, 10, -700]
                }
            }]
        }
    }, {
        "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": []
        }
    }, {
        "name": "最大应力浅孔/Mpa",
        "type": "scatter",
        "smooth": true,
        "symbolSize": 10,
        "symbolOffset": [27.5, 0],
        "yAxisIndex": 1,
        "itemStyle": {
            "color": "blue"
        },
        "data": [0.1, 8.5, 8.5, 8.5, 8.5],
        "markLine": {
            "symbol": "none",
            "data": [{
                "lineStyle": {
                    "color": "green"
                },
                "yAxis": 9,
                "label": {
                    "show": true,
                    "formatter": "浅孔当前应力弱",
                    "padding": [0, 0, 10, -700]
                }
            }, {
                "lineStyle": {
                    "color": "orange"
                },
                "yAxis": 11,
                "label": {
                    "show": true,
                    "formatter": "浅孔当前应力中",
                    "padding": [0, 0, 10, -700]
                }
            }, {
                "lineStyle": {
                    "color": "red"
                },
                "yAxis": 13,
                "label": {
                    "show": true,
                    "formatter": "浅孔当前应力强",
                    "padding": [0, 0, 10, -700]
                }
            }]
        }
    }]
}

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])
option.series[4].data = option.series[4].data.map((x, i) => [70 + i * 100, x])

作者：愤怒的阿昆达
转载自：https://www.jianshu.com/p/777c0082d280
来源：简书

博客zhu虎康
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts柱状图饼图折线图.zip
07-31
echarts 电脑端 柱状图 折线图 饼图 散点图 js html
echarts柱状图及阴影偏移
m0_37394102的博客
08-18 1879
echarts柱状图及阴影刻度线
echarts 实现y轴位置任意偏移--x轴原理相同
weixin_41514441的博客
07-06 9104
业务场景：多拼接横向柱状图y轴名称偏移 直接上代码 option = { tooltip: { trigger: 'axis', axisPointer: { // Use axis to trigger tooltip type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' } }, lege
Echarts markPoint.symbolOffset 失效问题
BitterSugar的博客
03-27 254
今天在开发Echarts折线图时，想做一个冒泡效果，用到了echarts提供的markPoint对象，在项目里，除了，其他都能正常显示，于是将下面的代码粘贴到echarts自带的示例里运行，发现是能正常修改位置的。
echarts3d地图散点数据陷进地图的多次试验后终于成功
06-13
echarts 3d地图数据散点下陷，下陷到地图里的数据是数据中的最小值，解决方法是，添加数据中不能出现的最小值，并且让它不现实出来，就可以解决想要数据下陷得问题
echarts折线图line动态显示阈值警
07-20
根据实时数据变换markLine的展示效果。比如温度超过设置的警戒线，就会出现警报效果
echart柱状图偏移位置设置
热门推荐
ddyy2695734664的博客
02-19 3万+
echart柱状图因为有title和信息的问题，导致顶部显得空间很大得不到有效利用如图 echart配置项中有grid属性，里面可以配置图表的偏移位置，通过调整可以充分利用空间 var option = { title: { text: '', ...
echarts时间段折线图，横坐标偏移
qq_39232387的博客
03-02 3296
实现的效果如图 1777是3点到6点的值，横坐标往左移动就好了 悬浮的标记是自定义的 贴一下整个代码吧 setChart() { let max = 0; max = Math.max(...this.data.data) + 800; //y轴最大值 let option = { grid: { top: " 0%", left: "5%", right: "5%", ..
echarts折线图，折线如何实现偏移
jiaonizuoren的博客
10-13 1万+
在为双柱状图的每个柱子加对应的折线图时，直接添加会发生折线图的点没有对应到柱状图的中心，而是在两个柱子之间，如下图： 解决办法：可以通过增加一个隐藏的x轴，用来控制线图的点的位置来实现，代码如下： option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cro...
Echarts x轴设置上下偏移
huzhenv5的博客
08-05 2万+
Echarts x轴设置上下偏移 在我们使用Echarts过程中，有时会碰到需要让x轴上下偏移的情况。举个例子，如下图中我们加粗了x轴，默认情况下柱子图形会压着x轴的上半部分，导致整体看起来十分的怪异 如果想要整体看起更美观，我们可以通过提升柱形图位置，或者降低x轴位置，让柱形图刚好挨着x轴上边缘，这种情况下会更美观一点，我们该如何实现呢？ 利用stack 这种方法的原理是通过柱子图形同stack会自动叠加的原理，我们增加一组假数据，设置为跟真实业务数据相同的stack，并设置柱子颜色为透明，这样从视觉上
散点图、柱状图绘制.ipynb
06-07
散点图、柱状图绘制.ipynb 使用matplotlib绘制散点图柱状图
使用echarts实现四象限散点图
09-02
1、文件夹下载下来后直接双击html文件即可看到效果； 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、有问题欢迎留言，看到会解答；
使用echarts实现立体-柱状图
07-21
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的...
echarts 散点图
06-11
基于echarts 的散点图，还需要引用 jquery echarts.js.
Echarts+百度地图_散点图完整版demo
11-12
echarts 结合百度地图api ，
element-ui的bug记录
nick_zhang的博客
04-29 561
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
【Web】CTFSHOW 中期测评刷题记录(1)
最新发布
uuzeray的博客
05-02 1492
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 437
createWs("测试数据", (res) => {
echarts geo 地图 散点偏移
06-06
如果在 echarts 的地图中使用散点图，可能会出现散点与地图上对应位置不重合的情况，需要通过偏移散点的位置来解决。可以通过 `geo` 组件的 `label` 属性中的 `offset` 来实现。具体的实现步骤如下： 1. 在 `geo` 组件中设置 `label` 属性，包括 `offset` 和其他样式属性。 ``` geo: { map: 'china', label: { show: true, position: 'right', formatter: '{b}', offset: [10, 0] // 散点偏移的像素值，可根据实际情况调整 } } ``` 2. 在 `series` 中设置散点图的 `symbolOffset` 属性，用来实现散点的偏移。 ``` series: [{ name: '散点图', type: 'scatter', coordinateSystem: 'geo', symbolSize: 10, symbol: 'circle', symbolOffset: [0, 5], // 散点偏移的像素值，可根据实际情况调整 data: [ {name: '北京', value: [116.46, 39.92]}, {name: '上海', value: [121.48, 31.22]}, ... ] }] ``` 上述代码中，`symbolOffset` 属性用来设置散点的偏移量，其中第一个值是水平方向的偏移量，第二个值是垂直方向的偏移量。可以根据实际情况进行调整。 通过以上的设置，就可以实现散点图的偏移了。注意，偏移量的值需要根据实际情况进行调整，以保证散点与地图上对应位置重合。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值