// 前提条件 需要引入这个插件
<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水球图编写的更多相关文章

  1. 使用echarts水球图

    使用echarts水球图 官方实例中没有水球图样式,当我们需要用到水球图的时候需要下载echarts-liquidfill.js. 使用 在echarts之后引入 echarts-liquidfill ...

  2. 【带着canvas去流浪(7)】绘制水球图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 文字淹水效果的实现 五. 关于canvas抗锯齿 六. 小结 示例代码托管在:http://www.github.com/dashnowor ...

  3. 带着canvas去流浪系列之七 绘制水球图

    [摘要] 用原生canvasAPI实现百度echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  4. v-charts 绘制柱状图、条形图、水球图、雷达图、折线图+柱状图,附官网地址

    v-charts 官网地址:https://v-charts.js.org/#/ 柱状图: <template> <ve-histogram :data="chartDat ...

  5. echarts雷达图

    用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  6. echarts柱图自定义为硬币堆叠的形式

    看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...

  7. 实现Echarts折线图的虚实转换

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...

  8. echarts 雷达图的个性化设置

    echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...

  9. 修改echarts环形图的牵引线及文字位置

    修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...

随机推荐

  1. DWG文件怎么转换成PDF格式

    在CAD中,设计师们绘制的图纸都是以dwg文件来进行保存的.Dwg文件是不能够直接进行打开查看的,就需要将其格式进行转换一下.将dwg文件转换为PDF格式的进行查看.那具体要怎么来进行操作呢?下面小编 ...

  2. windows下同时安装多个python版本的方法

    根据项目的需要,我的电脑上需要安装的python不止一个版本,比如同时需要python2.7和python3.6: 安装多个python版本 这时需要下载多个python安装包,为了区分不同的pyth ...

  3. 来个ADG switch over

    怕以后忘了,做个试验记录一下,这个switch比较常规1]主--备库先查一遍,如下的话就可以开始了两者当前序列一致角色状态如下--主库SQL> archive log list;数据库日志模式 ...

  4. Linux ssh突然连接不了的案例浅析

    公司的Linux服务器都是通过一台JumpServer跳转的.个人使用Jumpserver(开源跳板机系统)时,有时候由于需要上传.下载文件很不方便.而由于配置关系,一般情况无法使用SecureCRT ...

  5. mssql 系统函数 字符串函数 space 功能简介

    转自: http://www.maomao365.com/?p=4672  一.space 函数功能简介 space功能:返回指定数量的空格参数简介: 参数1: 指定数量,参数需为int类型 注意事项 ...

  6. git 现在本地创建仓库 再 推送到 远程 github 仓库中

    今天,需要再本地使用git管理代码,但是当代码创建好的时候,想发布到github上面的私有仓库中,但是没有提前创建远端仓库,所以需要把本地git仓库推送到远端另外一个仓库了,下面进行简要记录,刚刚经过 ...

  7. 【5】Android Service 与 AIDL

    前言:本系列仅介绍基本大体的使用步骤,而不对每个步骤进行细致的讲解.读者可作为已经对相关内容有所了解后的快速查阅. 一.单应用内Service的使用 Service组件与Activity以IBinde ...

  8. [JavaScript]父子窗口间参数传递

    概述 当页面嵌入一个iframe,或者打开一个子窗口.这个时候如果父窗口需要与子窗口之间通讯,如果直接用DOM访问对方窗口window,会受到跨于安全机制影响. javascript提供一个方法,可以 ...

  9. Day10 - Python基础10 socketserver 实现并发

    本节内容: 1.实例tcp的并发 2.看源代码继承关系 3.详解:ThreadingTCPServer的过程 4.tcp和udp的request 不同 5.基于udp的并发实现 1.实例tcp并发 s ...

  10. 7.SourceTree 的使用

    SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端管理工具,同时也是Mn版本控制系统工具.支持创建.克隆.提交.push.pull 和合并等操作. 下载路 ...