ECharts仪表盘-气温仪表盘.zip资源-CSDN文库

共5个文件

png：2个

js：2个

html：1个

版权申诉

51 浏览量 2024-12-27 09:28:04 上传评论收藏 2.8MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

ECharts仪表盘-气温仪表盘.zip （5个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

svg

geo

bin

index.html 5KB

images

hill-Kilimanjaro.png 278KB

hill-Qomolangma.png 1.52MB

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="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div id="chart-panel"></div> <script type="text/javascript"> //初始化图表对象。 var myChart = echarts.init(document.getElementById('chart-panel')); //图表配置。 let option = { toolbox: { show: true, feature: { saveAsImage: {}, }, }, series: [ { type: 'gauge', center: ['50%', '60%'], startAngle: 200, endAngle: -20, min: 0, max: 60, splitNumber: 12, itemStyle: { color: '#FFAB91' }, progress: { show: true, width: 30 }, pointer: { show: false }, axisLine: { lineStyle: { width: 30 } }, axisTick: { distance: -45, splitNumber: 5, lineStyle: { width: 2, color: '#999' } }, splitLine: { distance: -52, length: 14, lineStyle: { width: 3, color: '#999' } }, axisLabel: { distance: -20, color: '#999', fontSize: 20 }, anchor: { show: false }, title: { show: false }, detail: { valueAnimation: true, width: '60%', lineHeight: 40, offsetCenter: [0, '-15%'], fontSize: 60, fontWeight: 'bolder', formatter: '{value} °C', color: 'inherit' }, data: [ { value: 20 } ] }, { type: 'gauge', center: ['50%', '60%'], startAngle: 200, endAngle: -20, min: 0, max: 60, itemStyle: { color: '#FD7347' }, progress: { show: true, width: 8 }, pointer: { show: false }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, detail: { show: false }, data: [ { value: 20 } ] } ] }; setInterval(function () { const random = +(Math.random() * 60).toFixed(2); myChart.setOption({ series: [ { data: [ { value: random } ] }, { data: [ { value: random } ] } ] }); }, 2000); //将图表对象和图表配置进行关联。 myChart.setOption(option); </script> </body> </html>

评论收藏

内容反馈

版权申诉