echarts水球图编写
// 前提条件 需要引入这个插件
<script src="./echarts-liquidfill.min.js"></script> // 代码
let Chart = echarts.init(document.getElementById('Chart'));
let option = {
title: { // 水球图标题样式
text: '日',
left: 'center',
bottom: '10%',
textStyle: {
color: '#ffffff',
fontSize: 14
}
},
tooltip: {
show: true
},
series: [
{
name: '日',
type: 'liquidFill', // 水球图样式
center: ['50%', '45%'], // 水球图位置
amplitude: 3, // 波浪波动起伏大小
waveLength: '100%', // 波浪长度
color: ['#3399cc'], // 波浪颜色
backgroundStyle: {
color: '#ffffff', // 内部球背景颜色
borderWidth: 2, // 内部球边框宽度
borderColor: '#e3e3e3' // 内部球边框颜色
},
label:{
normal:{
formatter: '234', // 内部文字内容
textStyle: {
color: '#ffffff', // 在波浪上方时的文字颜色
insideColor: '#ffffff', // 在波浪下方时的文字颜色
fontSize: 10 // 文字大小
}
}
},
outline: {
borderDistance: 0, // 外边框与内边框间的距离
itemStyle: {
borderWidth: 5, // 外边框的宽度
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 1代表上面 // 外边框的颜色(渐变色)
offset: 0,
color: '#1b6491'
}, {
offset: 1,
color: '#3399cc'
}]),
}
},
data: [0.6] // 水球的注满度 60%
}
]
};
Chart.setOption(option);

这个水球内部的背景,没办法调成纯白色,设置成白色背景还是发灰,不知哪位会调
echarts水球图编写的更多相关文章
- 使用echarts水球图
使用echarts水球图 官方实例中没有水球图样式,当我们需要用到水球图的时候需要下载echarts-liquidfill.js. 使用 在echarts之后引入 echarts-liquidfill ...
- 【带着canvas去流浪(7)】绘制水球图
目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 文字淹水效果的实现 五. 关于canvas抗锯齿 六. 小结 示例代码托管在:http://www.github.com/dashnowor ...
- 带着canvas去流浪系列之七 绘制水球图
[摘要] 用原生canvasAPI实现百度echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- v-charts 绘制柱状图、条形图、水球图、雷达图、折线图+柱状图,附官网地址
v-charts 官网地址:https://v-charts.js.org/#/ 柱状图: <template> <ve-histogram :data="chartDat ...
- echarts雷达图
用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- echarts柱图自定义为硬币堆叠的形式
看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- echarts 雷达图的个性化设置
echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...
- 修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
随机推荐
- 发布方式一:发布.netcore流程
通过注册世纪互联,发布网站 注册需要上传身份证正反照片,以及打款一元,试用期一个月 https://www.azure.cn 注册完成后,进入主页面: 如图所示,创建完成后的效果: 点开详情, ...
- Comprehensive Tutorial 综合教程(MainDemo应用程序)
Follow this tutorial to create a simple application used to store contacts and other related objects ...
- 使用npm link 加速调试
我们在把包发布到npm上时,如果需要对本地的包进行修改,我们需要改变一个版本,重新发布.然后测试时需要更新这个包进行测试.这样的话,每一次的调试都特别麻烦.我们可以使用npm link来加速这个调试过 ...
- Dojo.declare使用方法详解
ArcGIS API for JavaScript是基于dojo开发的一套API,在实际生产中,我们需要再根据自己的需求实现自定义的功能,最后抽象成接口给前端调用. 我们使用dojo的declare来 ...
- 读书笔记_python网络编程3(5)
5. 网络数据与网络错误 应该如何准备需要传输的数据? 应该如何对数据进行编码与格式化? Py程序需要提供哪些类型的错误? 5.1. 字节与字符串 PC与网卡都支持将字节作为通用传输单元.字节将8比特 ...
- JVM-9-调优工具
JDK的bin目录下有很多用于监视虚拟机和故障处理的工具,这些工具都非常稳定而且功能强大,能在处理应用程序性能问题.定位故障是发挥很大的作用.比较细心的读者可能会注意到这些工具的程序体积都异常小巧.并 ...
- sed命令总结
目录 1.概述 2.查 1.打印整行(一或多) 2.正则打印包含关键字的行 2.增 3.删 4.改 5.后向引用 6.结合 7.练习 我叫张贺,贪财好色.一名合格的LINUX运维工程师,专注于LINU ...
- 前端常用的css代码
1.垂直居中对齐 .vc{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .vc{ position: ...
- 04. Go 语言流程控制
Go 语言流程控制 流程控制是每种编程语言控制逻辑走向和执行次序的重要部分,流程控制可以说是一门语言的"经脉". Go 语言的常用流程控制有 if 和 for,而 switch 和 ...
- Codeforces Round #603 (Div. 2) C. Everyone is a Winner! 二分
C. Everyone is a Winner! On the well-known testing system MathForces, a draw of n rating units is ar ...