Echarts 水球图设置基准线

*前言：最近的项目需求中，要求在水球图中加一条标准线（作为报警提示线）。

1、效果如下：

2、思路：

注意：如果是直接在水球图上画标线是实现不了的。

所以我们换种思路（大佬指点了一下），在折线图上加，然后隐藏x，y轴。

3、代码如下：

const data = [0.68, 0.30]
option = {// x轴xAxis: {show: false, // 不显示},// y轴yAxis: {show: false, // 不显示},grid: {top: '2.5%',right: '40',bottom: '2.5%',left: 0,},series: [{type: 'liquidFill',// shape: 'pin',radius: '96%', // 半径大小center: ['50%', '50%'], // 布局位置data, // 水球波纹值amplitude: 0,waveAnimation: false,outline: { // 轮廓设置show: true,borderDistance: 2, // 轮廓间距itemStyle: {borderColor: '#294D99', // 轮廓颜色borderWidth: 4, // 轮廓大小shadowBlur: 'none', // 轮廓阴影}},}, {type: 'line', // 折线图markLine: {silent: true, // 不触发鼠标事件symbol: '', // 标线两端样式lineStyle: { // 标线样式color: '#f00',type: 'solid'},data: [{ // 标线数据yAxis: data[1], // y 轴}]}}]
};

4、可根据基础代码继续延伸。欢迎大家来评论

Echarts 水球图设置基准线相关推荐

vue中对echarts折线图设置基准线/警告线，可在输入框输入想要的值，并改变已有的基准线的值。
系列文章目录前端小白,来此做笔记,前端vue框架下的echart添加警戒线,可在输入框中去输入想要设置的数值,按保存键去实现.同时可对警戒线的上下进行颜色的区分.采用的后端动态数据写文章为了以后碰 ...
echart水滴_漂亮得不像实力派：ECharts 水球图教程
水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们就一起来学习一下,如何使用 ECharts 水球图. 第 ...
echarts 水球图
// ECharts 水球图插件,需要额外插件脚本,参见上方"脚本" // 完整配置参数参见:https://github.com/ecomfe/echarts-liquidfil ...
vue3+ts 之echarts 水球图 liquidFill 的使用
vue3+ts 之echarts 水球图 liquidFill 的使用前言一.echarts liquidfill.js水球图插件二.使用步骤 1.上代码总结前言项目框架使用的是 vben ...
vue echarts 水球图多个水球图并存配置
echarts 水球图下面介绍为vue-cli开发环境下 npm下载 npm install echarts --save npm install echarts-liquidfill --save ...
html5 加速球效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...
说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liq ...
ECHARTS 水球图
转载编辑. 原作者链接地址:https://zhuanlan.zhihu.com/p/25353670?group_id=827655855632715776 水球图是一种适合于展现单个百分比数据的图 ...
微信小程序 ECharts 水球图
效果图: 水球图插件 git地址:https://github.com/ecomfe/echarts-liquidfill#api 下载后,将dist下面的echarts-liquidfill.min ...
echarts 折线图设置y轴最小刻度_数据可视化—Echarts图表应用
<错误>郑愁予我打江南走过, 那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞.你的心如小小寂寞的城,恰若青石的街道向晚.蛩音不响,三月的春帷不揭,你的心是小小的窗扉紧掩.我达达 ...

Echarts 水球图设置基准线

Echarts 水球图设置基准线相关推荐

最新文章

热门文章