Echarts3单仪表盘和多仪表盘

一. 简介

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二. 特性

1. 丰富的可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

2. 自定义主题构建

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

三. 示例

1. 首先引入 ECharts

通过标签方式直接引入构建好的 echarts 文件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script>
</head>
</html>

2. 为 ECharts 准备一个具备高宽的 DOM 容器

<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="myChart" style="width: 600px;height:400px;"></div>
</body>

3. 实例化生成

通过 echarts.init 方法初始化一个 echarts 实例，并通过 setOption 方法生成一个简单的仪表盘，下面是完整代码。

（1）常规单仪表盘

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('myChart'));// 指定图表的配置项和数据var option = {tooltip: {formatter: '{a} <br/>{b} : {c}KM/H'},toolbox: {feature: {restore: {},saveAsImage: {}}},series: [{name: '速度指标',type: 'gauge',detail: {formatter: '{value}KM/H'},data: [{value: 50, name: '速度'}]}] };// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

效果图

（2）自定义属性单仪表盘

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('myChart'));// 指定图表的配置项和数据var option = {tooltip : {//提示框浮层属性show: true,transitionDuration:0.8,//提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。formatter: "{a} - {c}KM/H"//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。},toolbox: {//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。show : true,feature : {mark : {show: true},restore : {show: true},saveAsImage : {show: true}}},series : [//系列列表。每个系列通过 type 决定自己的图表类型{name:'速度',type:'gauge',          // 仪表盘min: 0,                // 最小值max: 100,            // 最大值precision: 2,          // 小数精度，默认为0，无小数点splitNumber: 10,       // 分割段数，默认为5axisLine: {            // 轴线相关配置lineStyle: {       // 轴线样式color: [[0.2, '#5FB878'], [0.8, '#01AAED'], [1, '#FF5722']], //轴线可以被分成不同颜色的多段，每段的结束位置和颜色可以通过一个数组来表示width: 50}},axisTick: {            // 刻度样式splitNumber: 10,   // 分隔线之间分割的刻度数length :15,        // 刻度线长，支持相对半径的百分比lineStyle: {       // 刻度线样式color: '#EEE'}},axisLabel: {           // 刻度标签textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEcolor: 'auto'}},splitLine: {           // 分隔线样式show: true,        // 默认显示，属性show控制显示与否length :50,         // 分隔线线长，支持相对半径的百分比lineStyle: {       // 分隔线条样式color: '#CCC'}},pointer : {            // 仪表盘指针width : 10},title : {          // 仪表盘标题show : true,offsetCenter: [0, '90%'],       // x, y，单位pxtextStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEcolor: 'rgba(255,255,255,0.7)',fontSize: 16,fontWeight: 'bolder'}},detail : {          // 仪表盘详情，用于显示数据formatter:'{value}KM/H',offsetCenter: [0, '56%'],textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEcolor: 'auto',fontSize: 20,fontWeight: 'bolder'}},data: [{value: 50, name: '速度'}]}]};// 使用刚指定的配置项和数据显示图表，加个定时生成，让你的仪表盘动起来setInterval(function () {option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;myChart.setOption(option, true);},2000);</script>
</body>
</html>

效果图

（4）多仪表盘

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('myChart'));// 指定图表的配置项和数据var option = {backgroundColor: '#1b1b1b',tooltip: {formatter: '{a} <br/>{c} {b}'},toolbox: {show: true,feature: {mark: {show: true},restore: {show: true},saveAsImage: {show: true}}},series: [{name: '速度',type: 'gauge',min: 0,max: 220,splitNumber: 11,radius: '50%',axisLine: {            // 坐标轴线lineStyle: {       // 属性lineStyle控制线条样式color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],width: 3,shadowColor: '#fff', //默认透明shadowBlur: 10}},axisLabel: {            // 坐标轴小标记fontWeight: 'bolder',color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10},axisTick: {            // 坐标轴小标记length: 15,        // 属性length控制线长lineStyle: {       // 属性lineStyle控制线条样式color: 'auto',shadowColor: '#fff', //默认透明shadowBlur: 10}},splitLine: {           // 分隔线length: 25,         // 属性length控制线长lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式width: 3,color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},pointer: {           // 分隔线shadowColor: '#fff', //默认透明shadowBlur: 5},title: {textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: 'bolder',fontSize: 20,fontStyle: 'italic',color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},detail: {backgroundColor: 'rgba(30,144,255,0.8)',borderWidth: 1,borderColor: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 5,offsetCenter: [0, '50%'],       // x, y，单位pxtextStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: 'bolder',color: '#fff'}},data: [{value: 40, name: 'km/h'}]},{name: '转速',type: 'gauge',center: ['25%', '55%'],    // 默认全局居中radius: '30%',min: 0,max: 7,endAngle: 45,splitNumber: 7,axisLine: {            // 坐标轴线lineStyle: {       // 属性lineStyle控制线条样式color: [[0.29, 'lime'], [0.86, '#1e90ff'], [1, '#ff4500']],width: 2,shadowColor: '#fff', //默认透明shadowBlur: 10}},axisLabel: {            // 坐标轴小标记fontWeight: 'bolder',color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10},axisTick: {            // 坐标轴小标记length: 12,        // 属性length控制线长lineStyle: {       // 属性lineStyle控制线条样式color: 'auto',shadowColor: '#fff', //默认透明shadowBlur: 10}},splitLine: {           // 分隔线length: 20,         // 属性length控制线长lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式width: 3,color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},pointer: {width: 5,shadowColor: '#fff', //默认透明shadowBlur: 5},title: {offsetCenter: [0, '-30%'],       // x, y，单位pxtextStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: 'bolder',fontStyle: 'italic',color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},detail: {//backgroundColor: 'rgba(30,144,255,0.8)',// borderWidth: 1,borderColor: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 5,width: 80,height: 30,offsetCenter: [25, '20%'],       // x, y，单位pxtextStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: 'bolder',color: '#fff'}},data: [{value: 1.5, name: 'x1000 r/min'}]},{name: '油表',type: 'gauge',center: ['75%', '50%'],    // 默认全局居中radius: '30%',min: 0,max: 2,startAngle: 135,endAngle: 45,splitNumber: 2,axisLine: {            // 坐标轴线lineStyle: {       // 属性lineStyle控制线条样式color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],width: 2,shadowColor: '#fff', //默认透明shadowBlur: 10}},axisTick: {            // 坐标轴小标记length: 12,        // 属性length控制线长lineStyle: {       // 属性lineStyle控制线条样式color: 'auto',shadowColor: '#fff', //默认透明shadowBlur: 10}},axisLabel: {fontWeight: 'bolder',color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10,formatter: function (v){switch (v + '') {case '0': return 'E';case '1': return 'Gas';case '2': return 'F';}}},splitLine: {           // 分隔线length:15,         // 属性length控制线长lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式width:3,color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},pointer: {width:2,shadowColor: '#fff', //默认透明shadowBlur: 5},title: {show: false},detail: {show: false},data: [{value: 0.5, name: 'gas'}]},{name: '水表',type: 'gauge',center: ['75%', '50%'],    // 默认全局居中radius: '30%',min: 0,max: 2,startAngle: 315,endAngle: 225,splitNumber: 2,axisLine: {            // 坐标轴线lineStyle: {       // 属性lineStyle控制线条样式color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],width: 2,shadowColor: '#fff', //默认透明shadowBlur: 10}},axisTick: {            // 坐标轴小标记show: false},axisLabel: {fontWeight: 'bolder',color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10,formatter: function(v){switch (v + '') {case '0': return 'H';case '1': return 'Water';case '2': return 'C';}}},splitLine: {           // 分隔线length: 15,         // 属性length控制线长lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式width: 3,color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},pointer: {width: 2,shadowColor: '#fff', //默认透明shadowBlur: 5},title: {show: false},detail: {show: false},data:[{value: 0.5, name: 'gas'}]}]};setInterval(function (){option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;myChart.setOption(option);},2000);</script>
</body>
</html>

效果图

四. 后记

其实用起来也简单，根据自己的显示需求，遇到不懂的时候多查看官方文档就好了。
附官方文档链接

Echarts3单仪表盘和多仪表盘相关推荐

华容道6×6图解_2008款马自达6仪表盘图解，仪表盘故障指示灯图解
[2008款马自达6仪表盘图解] [2008款马自达6座椅安全带报警信号灯] 如果驾驶员的座椅安全带没有扣好,则当点火开关达到ON(打开)位置时,座椅安全带的报警信号灯亮起. [2008款马自达6车门 ...
grafana 创建仪表盘_创建仪表盘前要问的三个问题
grafana 创建仪表盘可视化 (VISUALIZATIONS) It's easier than ever to dive into dashboarding, but are you doin ...
先尚传真服务器指示灯显示,【仪表盘指示灯】仪表盘上常见的五种故障指示灯_仪表盘指示灯图解_佰佰安全网...
玻璃水指示灯所谓玻璃水就是汽车挡风玻璃清洗液的俗称.属于汽车使用中的易耗品. 优质的汽车挡风玻璃水主要由水.酒精.乙二醇.缓蚀剂及多种表面活性剂组成.汽车挡风玻璃水俗称玻璃水(即车窗净). 当玻璃水 ...
英朗gt仪表盘图标说明_【英朗仪表盘】英朗仪表盘说明书、英朗仪表盘故障灯说明_车主指南...
别克英朗仪表盘故障灯图解如下,英朗仪表盘有个感叹号灯亮起有两种情况:一是指你的刹车液少了,二是胎压不正常. 别克全新英朗仪表盘图解:全新英朗搭配的是彩色仪表盘,显示的效果更佳.可以帮助车主更清楚的分 ...
k8s==安装仪表盘，用仪表盘部署nginx
k8s安装仪表盘_ChengQian's blog的博客-CSDN博客_k8s仪表盘 https://zhuanlan.zhihu.com/p/513430375 # 下载所需要的yaml文件 wge ...
Echarts 多仪表盘（汽车仪表盘，动态刷新）
Echarts 多仪表盘 echarts 作业三一.任务需求实现一个汽车仪表盘,需包含四个仪表盘. 二.使用步骤代码如下(示例): <!DOCTYPE html> <html ...
车仪表台上的装饰_46汽车仪表盘装饰汽车仪表盘装饰类型
课题汽车仪表盘装饰 _ 汽车仪表盘装饰类型教学目标知识目标能力目标德育渗透 1. 认识汽车仪表盘装饰的. 2. 掌握汽车仪表盘装饰的方法. 3. 形成良好的汽车内装饰理念教学重点. ...
JeecgBoot低代码平台 3.5.2，仪表盘版本发布！重磅新功能—支持在线拖拽设计大屏和门户
项目介绍 JeecgBoot是一款企业级的低代码平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue3,Mybatis-plus,Shiro, ...
如何设计一个漂亮的仪表盘—Jeecg仪表盘轻松实现【数据可视化专题】
仪表盘是数据可视化的一种展现方式,是将数据以各类图表和图形化的方式,以视觉形式来呈现,从而帮助我们更加直观的了解数据展示的意义. 下面看看Jeecg低代码平台的仪表盘功能效果. 操作简单,通过拖拽即可 ...

Echarts3单仪表盘和多仪表盘

一. 简介

二. 特性

1. 丰富的可视化类型

2. 自定义主题构建

三. 示例

1. 首先引入 ECharts

2. 为 ECharts 准备一个具备高宽的 DOM 容器

3. 实例化生成

（1）常规单仪表盘

（2）自定义属性单仪表盘

（4）多仪表盘

四. 后记

Echarts3单仪表盘和多仪表盘相关推荐

最新文章

热门文章