首页我想要一段echarts写的html代码，用来展示各项银行指标，起到仪表盘效果

我想要一段echarts写的html代码，用来展示各项银行指标，起到仪表盘效果

时间: 2023-12-23 07:04:28 浏览: 71

好的，以下是一段使用 Echarts 实现的仪表盘效果的 HTML 代码，你可以根据自己的需求进行修改： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>银行指标仪表盘</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body>  <div id="main" style="width: 600px;height:400px;"></div> <script> // 初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 配置项 var option = { // 仪表盘角度范围 angleAxis: { max: 100, startAngle: 225, endAngle: -45, clockwise: true, splitLine: { show: false }, axisLine: { lineStyle: { width: 20, color: [ [0.25, '#FF6E76'], [0.5, '#FFD34E'], [0.75, '#4EE3A8'], [1, '#7C7CFF'] ] } }, axisTick: { length: 15, lineStyle: { color: 'auto' } }, axisLabel: { fontSize: 20, fontWeight: 'bold', color: '#333', formatter: function (value) { return value.toFixed(0); } }, }, // 指针 series: [ { type: 'gauge', progress: { show: true, width: 20 }, detail: { formatter: '{value}%', fontSize: 30, offsetCenter: [0, '70%'] }, data: [ { value: 78, name: '完成率', itemStyle: { color: '#FF6E76' } } ] } ] }; // 使用配置项展示图表 myChart.setOption(option); </script> </body> </html> ``` 上述代码中，我们使用了 Echarts 的仪表盘类型（gauge），并且根据自己的需求配置了角度范围、指针样式、数据等。你可以根据自己的需求进行修改。

阅读全文