// 前提条件 需要引入这个插件
<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. ASP.NET Core Web 应用程序系列(四)- ASP.NET Core 异步编程之async await

    PS:异步编程的本质就是新开任务线程来处理. 约定:异步的方法名均以Async结尾. 实际上呢,异步编程就是通过Task.Run()来实现的. 了解线程的人都知道,新开一个线程来处理事务这个很常见,但 ...

  2. javaWeb核心技术第十四篇之easyui

    网站是分为网站的前台和网站的后台. 前台--给用户看的 例如:商城 后台--给管理员看的 例如:商城后台 目的:用来添加维护数据 BootStrap:jsp 页面显示,效果好,美观,适合作为用户界面. ...

  3. C#中增量类功能的方式之 继承与扩展

    之前一次公司培训的时候,将它记录下来,https://www.cnblogs.com/AlvinLee/p/10180536.html这个博客上面比较全面. 1.扩展方法 扩展方法是一种特殊的静态方法 ...

  4. 松软科技web课堂:SQLServer之MID() 函数

    MID() 函数 MID 函数用于从文本字段中提取字符. SQL MID() 语法 SELECT MID(column_name,start[,length]) FROM table_name 参数 ...

  5. zookeeper启动失败,但是状态显示已启动的原因

    今天在起zookeeper集群的时候,其他两台机子都能起起来,只有这一台机子起不起来: 对比了 这个路径下的 文件后发现多了一个这个文件 根据名字推测应该是放进程id.突然明白这个应该是上次非正常退出 ...

  6. 利用Azure虚拟机安装Dynamics 365 Customer Engagement之二:创建域控虚拟机

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  7. https连接

        在发送连接之前设置显示握手过程:   System.setProperty("javax.net.debug", "all"); DubboServer ...

  8. Saltstack_使用指南13_runner的job和manage与execution的saltutil

    1. 主机规划 salt 版本 [root@salt100 ~]# salt --version salt (Oxygen) [root@salt100 ~]# salt-minion --versi ...

  9. 微信支付和微信支付通知基于sdk的说明(2)

    前期准备工作 微信商户账户/密码(获取appid等信息) 微信公众号账户/密码(获取cert证书等信息,不做线上退款不需要证书) 下载php支付demo 从商户平台进入的话是以下界面或者直接搜索公众号 ...

  10. 执行 Run manage.py Task 报 AttributeError: 'Command' object has no attribute 'usage'?

    这个问题,是python与Pycharm不兼容导致,解决办法将Pycharm升级最新版本