ECharts仪表盘实例代码(附源码下载)

ECharts仪表盘应用概述

汽车驾驶舱内的仪表盘能让驾驶员直观掌握车辆状态。借助ECharts库，开发者可以制作类似的仪表盘组件，清晰展示各项指标的具体数值及其所处范围。这种仪表盘形式的报表广泛应用于各类统计系统中。本文将结合具体实例，讲解如何利用ECharts实现销售任务完成率的统计展示。

效果演示 源码下载

HTML结构搭建

HTML

首先需要在项目中引入ECharts库文件。接着，在页面中需要放置图表的位置添加一个div元素，ID设为myChart，并为其设置具体的宽度和高度属性，以确保图表容器具有合适的显示空间。

<script src="echarts.min.js"></script> 
<div id="myChart" style="width: 600px;height:400px;"></div> 

JavaScript初始化与配置

Javascript

接下来需要初始化ECharts实例，配置相关的图表选项，最后将图表渲染到页面上。

var myChart = echarts.init(document.getElementById('myChart')); 
option = { 
tooltip : { 
formatter: "{a} <br/>{b} : {c}%" 
}, 
series : [ 
{ 
name:'业务指标', 
type:'gauge', 
detail : {formatter:'{value}%'}, //仪表盘显示数据 
axisLine: { //仪表盘轴线样式 
lineStyle: { 
width: 20 
} 
}, 
splitLine: { //分割线样式 
length: 20 
}, 
data:[{value: 50, name: '完成率'}] 
} 
] 
}; 
myChart.setOption(option); 

Tooltip提示框配置详解

在配置选项中，tooltip是一个提示框组件，默认参数show为true，表示显示提示框。参数formatter用于定义提示框浮层内容的格式，支持字符串模板和回调函数两种形式。通常使用字符串模板，其变量包括{a}、{b}、{c}、{d}和{e}，分别代表系列名、数据名、数据值等。当trigger为'axis'时，若存在多个系列数据，可通过{a0}、{a1}、{a2}等带索引的形式表示系列索引。不同图表类型下{a}、{b}、{c}、{d}的具体含义有所不同。对于饼图、仪表盘和漏斗图，{a}表示系列名称，{b}表示数据项名称，{c}表示数值，{d}表示百分比。

Series系列参数解析

配置中的series参数用于定义系列列表。每个系列通过type属性决定其图表类型，该属性包含多个子参数。其中，name参数表示系列名称，用于tooltip显示、legend图例筛选以及在setOption更新数据和配置项时指定对应系列。type参数指定图表类型，例如type:'gauge'即表示仪表盘。detail参数用于定义仪表盘详情，以显示具体数据，可定义数据显示的高宽、背景色、边框颜色等，本例中定义了仪表盘详情显示为百分数。axisLine参数用于定义仪表盘轴线相关配置，如轴线样式等。splitLine参数用来定义仪表盘中的分隔线样式，包括线长、颜色、线宽等。data参数用于展示数据，可设置仪表盘指标对应的值以及名称。

动态数值更新实现

如果需要实现动态变化的仪表盘，可以使用setInterval()函数定时变换仪表数值，参考以下代码实现。

clearInterval(timeTicket); 
var timeTicket = setInterval(function () { 
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; 
myChart.setOption(option, true); 
},2000); 

以上内容介绍了ECharts仪表盘实例代码，希望对大家有所帮助！