如何使用Echarts绘制仪表盘？
ECharts 是一个使用 JavaScript 实现的开源可视化库，可以运行在浏览器中，生成各种图形和图表。下面是一个使用 ECharts 绘制仪表盘的简单示例：
首先，确保你的项目中已经引入了 ECharts。你可以通过 npm 安装，或者直接在 HTML 文件中通过 <script> 标签引入。
通过 npm 安装
npm install echarts --save
在 HTML 中引入
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
然后，你可以按照以下步骤创建一个仪表盘：
- HTML 结构
在 HTML 文件中，创建一个具有特定宽度和高度的 <div> 元素，用于容纳仪表盘。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 仪表盘示例</title>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
<!-- 创建用于容纳仪表盘的 div -->
<div id="gaugeChart" style="width: 600px; height: 400px;"></div>
<script>
// JavaScript 代码将在这里编写
</script>
</body>
</html>
- JavaScript 代码
在 <script> 标签中，编写 JavaScript 代码来创建和配置仪表盘。
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('gaugeChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '仪表盘示例',
left: 'center'
},
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
name: '业务指标',
type: 'gauge',
detail: {formatter:'{value}%'},
data: [{value: 50, name: '完成率'}],
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10, // 坐标轴线宽是10
color: [[0.2, '#ff4500'], [0.8, '#48b'], [1, '#228b22']], // 坐标轴线颜色分段设置
}
},
axisTick: { // 坐标轴小标记
splitNumber: 10, // 每份split细分多少段
length: 12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto', // 坐标轴小标记颜色自动从axisLine的color中取
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 14,
},
formatter: function (v) {
switch (v + '') {
case '10':
return '差';
case '30':
return '较差';
case '50':
return '一般';
case '70':
return '良好';
case '90':
return '优秀';
default:
return '';
}
}
},
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width: 10,
color: 'auto',
}
},
pointer: { // 指针
width: 5,
},
title: {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 16,
},
offsetCenter: [0, '-30%'], // x, y，单位px
},
detail: {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
},
offsetCenter: [0, '40%'], // x, y，单位px
formatter: '{value}%',
backgroundColor: 'rgba(30,144,255,0.8)',
borderColor: 'rgba(40,188,255,1)',
borderWidth: 1,
borderRadius: 4,
padding: [0, -2],
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
b: {
fontSize: 16,
lineHeight: 33
},
x: {
fontSize: 11,
borderColor: '#449933',
borderRadius: 4,
padding: [2, 5],
backgroundColor: {
image: '...'
}
}
}
},
}
];
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
这个示例创建了一个简单的仪表盘，你可以根据需要调整配置项来定制仪表盘的外观和行为。例如，你可以更改 axisLabel 的 formatter 函数来定义不同的标签文本，或者调整 pointer 的样式来更改指针的外观。
浙公网安备 33010602011771号