ECharts水球图-水球8.rar_EChartJS第8期:审美不疲劳

共5个文件

js：4个

html：1个

echarts

统计分析

数据可视化

需积分: 5 179 浏览量 2024-09-18 08:51:38 上传评论收藏 879KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

ECharts水球图-水球8.rar （5个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

liquidfill

3.1.0

echarts-liquidfill.js 50KB

echarts-liquidfill.min.js 8KB

svg

geo

index.html 5KB

images

json

<!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>  <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>

评论收藏

内容反馈