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官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
随机推荐
- ABP开发框架前后端开发系列---(14)基于Winform的ABP快速开发框架
前面介绍了很多ABP系列的文章,一步一步的把我们日常开发中涉及到的Web API服务构建.登录日志和操作审计日志.字典管理模块.省份城市的信息维护.权限管理模块中的组织机构.用户.角色.权限.菜单等内 ...
- Z从壹开始前后端分离【 .NET Core2.0/3.0 +Vue2.0 】框架之二 || 后端项目搭建
本文梯子 前言 1..net core 框架性能测试 2..net core 执行过程 3.中间件执行过程 4.AOP切面 5.整体框架结构与数据库表UML 一.创建第一个Core 1.SDK 安装 ...
- session购物车中的移除功能部分(学生笔记)
function onclick_remove(r) { if (confirm("确认删除么!此操作不可恢复")) { var out_momey = $(".out_ ...
- [20191113]oracle共享连接模式端口2.txt
[20191113]oracle共享连接模式端口2.txt --//昨天的测试链接:http://blog.itpub.net/267265/viewspace-2663651/=>[20191 ...
- 关于华为模拟器(eNSP)添加路由器启动后一直打印#号的原因
操作系统为win10 专业版 1903:1.首先打开控制面板,找到windows defender防火墙,在“允许应用通过防火墙”中把和espn相关的两个的专网和公网都勾选上,最后确定:然后重启华为模 ...
- RabbitMQ学习笔记(六、RabbitMQ进阶)
目录: 性能 存储机制 内存及磁盘告警 性能: 影响RabbitMQ性能的因素有很多,主要的分为硬件性能与软件性能. )硬件性能:如网络.内存.CPU等等. )软件性能:消息持久化.消息确认.路由算法 ...
- 漫长的 windows caffe编译过程 (OnlyCpu)
在windows下 编译caffe代码. 官方推荐是vs2013 而我手头只有VS2017 .准备开始下载代码开始编译. 1 代码下载 windows版本的代码有两份,一份是官方的编译的windows ...
- 七夕节 (HDU - 1215) 【简单数论】【找因数】
七夕节 (HDU - 1215) [简单数论][找因数] 标签: 入门讲座题解 数论 题目描述 七夕节那天,月老来到数字王国,他在城门上贴了一张告示,并且和数字王国的人们说:"你们想知道你们 ...
- Linux驱动中的platform总线分析
copy from :https://blog.csdn.net/fml1997/article/details/77622860 概述 从Linux2.6内核起,引入一套新的驱动管理和注册机制:pl ...
- 解决SQL Server中无管理员账户权限问题
遇到忘记SQL Server管理员账户密码或管理员账户被意外删除的情况,如何在SQL Server中添加一个新的管理员账户?按一下步骤操作可添加一个windows账户到SQL Server中,并分配数 ...