<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#chart-panel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 1000px;
height: 750px;
}
</style>
<script src="./lib/5.5.0/echarts.min.js"></script>
<script src="./lib/liquidfill/3.1.0/echarts-liquidfill.js"></script>
</head>
<body>
<div id="chart-panel"></div>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<script type="text/javascript">
//1、初始化图表对象。
var myChart = echarts.init(document.getElementById('chart-panel'));
//2、图表配置。
var value = 0.54;
let option = {
toolbox: {
feature: {
saveAsImage: {}
}
},
backgroundColor: '#181b22',
title: [
{
text: (value * 100).toFixed(0) + '%',
left: '50%',
top: '40%',
textAlign: 'center',
textStyle: {
fontSize: '30',
color: '#8b8d90',
},
},
],
polar: {
radius: ['43%', '40%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
clockwise: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
type: 'liquidFill',
radius: '40%',
z: 1,
center: ['50%', '50%'],
amplitude: 20,
color: [{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#324791',
},
{
offset: 1,
color: '#449090',
},
],
globalCoord: false,
}],
data: [
0.4,
{
value: 0.4,
direction: 'left',
},
],
backgroundStyle: {
borderWidth: 1,
color: 'transparent',
},
label: {
formatter: '',
},
outline: {
show: false,
},
},
{
name: '',
type: 'bar',
roundCap: true,
z: 2,
showBackground: true,
backgroundStyle: {
color: '#15181e',
},
data: [75],
coordinateSystem: 'polar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, .5, 1, [
{
offset: 0,
color: '#5acef2',
},
{
offset: .7,
color: '#5073fb',
},
{
offset: 1,
color: '#6ae8d8',
},
]),
},
},
],
};
//3、通过图表对象的setOption方法和图表配置进行关联。
myChart.setOption(option);
</script>
</body>
</html>
图表制作解说(目标1000个图表)
- 粉丝: 885
- 资源: 277
最新资源
- Chrome代理 switchyOmega
- GVC-全球价值链参与地位指数,基于ICIO表,(Wang等 2017a)计算方法
- 易语言ADS指纹浏览器管理工具
- 易语言奇易模块5.3.6
- cad定制家具平面图工具-(FG)门板覆盖柜体
- asp.net 原生js代码及HTML实现多文件分片上传功能(自定义上传文件大小、文件上传类型)
- whl@pip install pyaudio ERROR: Failed building wheel for pyaudio
- Constantsfd密钥和权限集合.kt
- 基于Java的财务报销管理系统后端开发源码
- 基于Python核心技术的cola项目设计源码介绍
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈