搜索end -->
html5 echarts汽车加速仪表盘动画特效
作者/代码整理：&&(转载请附加本文地址，带有“懒人原生”字样的谢绝转载) 发布日期：
这是一款圆形的html5 echarts汽车加速仪表盘动画特效，模拟汽车加速减速时的仪表图表变化效果。
&script type="text/javascript"&
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip : {
formatter: "{a} &br/&{b} : {c}%"
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
series : [
name:'业务指标',
type:'gauge',
splitNumber: 10,
// 分割段数，默认为5
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
axisTick: {
// 坐标轴小标记
splitNumber: 10,
// 每份split细分多少段
length :12,
// 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto'
axisLabel: {
// 坐标轴文本标签，详见axis.axisLabel
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto'
splitLine: {
show: true,
// 默认显示，属性show控制显示与否
length :30,
// 属性length控制线长
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
pointer : {
show : true,
offsetCenter: [0, '-40%'],
// x, y，单位px
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
detail : {
formatter:'{value}%',
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto',
fontWeight: 'bolder'
data:[{value: 50, name: '完成率'}]
// 为echarts对象加载数据
myChart.setOption(option);
setInterval(function (){
option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
myChart.setOption(option,true);
猜你喜欢...Echarts中的gauge仪表盘.（特殊加一句代码） - CSDN博客
Echarts中的gauge仪表盘.（特殊加一句代码）
&head&& & &meta charset="utf-8"&& & &title&ECharts&/title&&/head&&body&& & &!-- 为ECharts准备一个具备大小（宽高）的Dom --&& & &div id="main" style="height:400px"&&/div&& & &!-- ECharts单文件引入 --&& & &script src="../dist/echarts.js"&&/script&& & &script type="text/javascript"&// 添加一行代码//var timeT//配置echarts& & & & // 路径配置& & & & require.config({& & & & & & paths: {& & & & & & & & echarts: '../dist'& & & & & & }& & & & });& & & &&& & & & // 使用& & & & require(& & & & & & [& & & & & & & & 'echarts',& & & & & & & & 'echarts/chart/gauge'& & & & & & ],& & & & & & function (ec) {& & & & & & & & // 基于准备好的dom，初始化echarts图表& & & & & & & & var myChart = ec.init(document.getElementById('main'));&& & & & & & & &&& & & & & & & & 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,& & & & & & axisLine: { & & & & & &// 坐标轴线& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],& & & & & & & & & & width: 3,& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisLabel: { & & & & & &// 坐标轴小标记& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & 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: { & & & // 其余属性默认使用全局文本样式，详见TEXTSTYLE& & & & & & & & & & fontWeight: '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，单位px& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式，详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff'& & & & & & & & }& & & & & & },& & & & & & data:[{value: 40, name: 'km/h'}]& & & & },& & & & {& & & & & & name:'转速',& & & & & & type:'gauge',& & & & & & center : ['25%', '55%'], & &// 默认全局居中& & & & & & radius : '50%',& & & & & & 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: { & & & & & &// 坐标轴小标记& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & 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，单位px& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式，详见TEXTSTYLE& & & & & & & & & & fontWeight: '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，单位px& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式，详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff'& & & & & & & & }& & & & & & },& & & & & & data:[{value: 1.5, name: 'x1000 r/min'}]& & & & },& & & & {& & & & & & name:'油表',& & & & & & type:'gauge',& & & & & & center : ['75%', '50%'], & &// 默认全局居中& & & & & & radius : '50%',& & & & & & 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: {& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & 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 : '50%',& & & & & & 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: {& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & 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'}]& & & & }& & ]};clearInterval(timeTicket);timeTicket = 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,true);},2000)& & & & & & & & & &&& & & & & & & & & &&& & & & & & & & // 为echarts对象加载数据&& & & & & & & & myChart.setOption(option);&& & & & & & }& & & & );& & &/script&&/body&写过之后存到记事本中，再在编译器Brackets.exe中运行，那么图形展示就形成了。注：路径一定要配对。
本文已收录于以下专栏：
相关文章推荐
// 全图默认背景
// backgroundColor: ‘rgba(0,0,0,0)’,// 默认色板
color: ['#ff7f50','#87cefa...
情景：实际值&计划值 仪表盘颜色显示 绿色表示超过预期   相反则表示未达到预期
Echarts关于仪表盘
先来无事，特制作不一样的图标一发，把仪表盘做成百分条，我也是醉了
var myChart = echarts.init(doc...
echarts各个配置项详细说明总结最近有个朋友在做关于各种图表的项目，用到了echarts,关于各个配置项刚开始用好多都不懂，有些地方需要改不知道改哪个参数，就在网上查了各种，找到了一个不错的总结，...
1. 效果2. 简介1. 其中仪表的部分使用的是ECharts的gauge控件实现。
2. CGI使用自动刷新的方式每隔3秒自动运行一次，gauge控件每隔3秒读取CGI的html文档，并且解析出温...
Essential Gauge for Silverlight 是一款功能强大的仪表控件，包含Radial, Digital 、Rolling和Linear仪表，使用该控件可以很容易地为你的商业应用程...
WpfGauge：WPF版本开源仪表盘(Gauge)的使用wpfgauge是一款.net平台WPF版本的开源仪表盘，包括了源码和使用实例。官网地址是：
https://wpfgauge.codepl...
/**********************
作者 Spider
网上公布的各种PHP后门全军覆没
针对一些特殊变形的后门需要自己添加特征
误报率不到百分之一
************...
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)ECharts GL 1.0 alpha 发布 - 推酷
ECharts GL 1.0 alpha 发布
距离 ECharts-X 最近一个版本已经过去了两年多时间，期间我们不断被开发者在各种渠道询问 ECharts-X 为什么还不升级新版本，是不是不再维护了等等，对于这些问题我们只能回答我们还没准备好。尽管这两年时间 ECharts X 没什么动静，但是其它的工作，像 ECharts 3 的架构大改动和后续版本的迭代升级，以及其它 WebGL 产品的开发，都是对新版本架构和技术上的积累。现在我们终于可以说我们准备得差不多了，ECharts-X 的下一代，ECharts-GL 发布 1.0 alpha。
是 ECharts 的 WebGL 扩展，其中提供了三维散点图，飞线图，柱状图，曲面图，地球等多种三维可视化方式。并且增加 scatterGL ， graphGL 系列类型用于二维的散点图，关系图的加速绘制和布局。
先来一张 Gallery 上
的示例图片集。
下面会一一介绍 ECharts GL 的特性，如果你已经等不及想尝鲜了，可以直接在 Gallery 上查看编辑 ECharts GL 的示例。
一、更便捷的安装和引入
大家用过 ECharts-X 的话，或许曾被其繁琐的引入方式困扰过，甚至可能因为尝试了很多次都没办法正确引入而选择放弃。
ECharts-GL 中大大简化了引入方式，在标签引入的环境下。你可以从
上获取 ECharts GL 后直接引入构建好的文件.
&script data-src=&echarts/dist/echarts.min.js&&&/script& &script data-src=&echarts-gl/dist/echarts-gl.min.js&&&/script&
如果你用 webpack 和 npm 作为开发环境。也只需要在 npm install echarts-gl 之后再 require 引入。
require('echarts-gl');
二、更多三维可视化类型。
除了老版本的地球用于地理数据可视化，ECharts GL 新增了三维的笛卡尔坐标系、地理坐标系，并且在这些新的三维坐标系基础上提供了六个新的系列类型，包括散点图 scatter3D、
这些新的系列类型以及组件类型都是使用 WebGL 绘制，因此能够保证高质量，高性能的展示出你想要的三维可视化作品。
同时我们在配置项的设计上尽量沿用了 ECharts 的风格，保证简洁统一。比如下面这个配置就能画出一个简单的三维散点图。
option = {
grid3D: {},
xAxis3D: {},
yAxis3D: {},
zAxis3D: {},
series: [{
type: 'scatter3D',
symbolSize: 50,
data: [[-1, -1, -1], [0, 0, 0], [1, 1, 1]],
itemStyle: {
opacity: 1
这里跟 ECharts 有点区别，GL 中尝试了更扁平的 option 设计，使用场景更少的 emphasis 属性将会单独移出来，而原先 normal 这个层级将被移除，itemStyle 下的属性相当于原先 itemStyle.normal 下的属性。如果这次尝试没问题，接下来 ECharts 新的大版本也会使用这种更扁平的设计。 具体配置结构见
大部分 GL 中的三维组件和系列都会带上 3D 后缀以便跟 ECharts 中的组件系列区分开。
下面这个更复杂点的例子使用 scatter3D 可视化了三维的Simplex Noise
除了三维的散点图，你也可以在笛卡尔坐标系上画折线图 line3D，
其中line3D，bar3D 也是对 ECharts 中的折线图，柱状图扩展到了三维的版本。而surface是 ECharts GL 里全新的三维图。
你可以像下面这样用surface 画函数曲面。
也可以像这样用曲面去可视化像图片像素这样的数据
甚至你可以用参数方程构建出下面这样有趣的参数曲面
除了三维笛卡尔坐标系，像柱状图，散点图也可以显示在地球，
比如下面这个例子就是在地球上通过散点图绘制世界人口。
你可以大胆的组合不同坐标系和系列，制作出更具创造力的可视化作品！
三、高品质的画面
在很多场景里，高品质的画面是一个很重要的需求，例如：
在大屏中，需要提供炫酷的，一下能够抓住人眼球的特效。
生成需要放在文章或者 PPT 中的截图，需要高质量的渲染，不能有廉价三维效果的感觉。
ECharts GL 提供了一系列诸如景深，
，基于物理的渲染 等等开箱即用的配置项让你去方便的提升自己可视化作品的渲染效果。
在这些配置项的基础上，你可以实现这样带景深的微缩模型的效果：
或者这样的基于物理渲染的金属零件的效果：
或者这样 Bling Bling 的影视广告特效：
又或者这样的大规模建筑群：
想要了解更多的效果，可以逛逛我们的示例集
四、二维可视化的加速
除了三维的可视化，ECharts GL 还内置scatterGL,graphGL 两个系列，能够大幅度的优化常见的二维散点图和关系图的绘制和布局性能。
散点图也是比较常见的会有大数据量的系列类型。ECharts 尽管能绘制像微博签到图那样上十万的散点图，但是很难做到流畅的交互。拖拽、缩放等操作都会有卡顿。
在 ECharts GL 里利用 WebGL 加速绘制后，可以无压力得绘制和实时的交互十万个数据的散点图了。
而且实现这一切只需要把原先的 scatter 类型改为 scatterGL 类型，不需要再做其它的改动！
对于关系图 graphGL除了绘制上有加速之外，我们还在 WebGL 中实现了
。在高端的显卡上 GPU 布局相对于 CPU 布局甚至能有上百倍的性能提升。
下面是在 GTX1070 和 i7 4GHz 的电脑中对一个 两万 个节点，近 五万 条边的关系图一次布局的迭代的性能对比。
以及对这个关系图实时布局的视频。
2500 个节点的网格图使用 GPU 布局的例子（只支持 PC 端）。
这里特别感谢 Gephi 提供了 Force Atlas2 这样在大规模关系数据上能够有稳定优良的布局结果的算法。
五、与 ECharts 交互组件的结合
ECharts GL 作为一个扩展，并不是独立的，它提供的系列和组件能够和 ECharts 中的大部分组件组合使用。你可以使用visualMap 组件对 GL 中的系列进行颜色，大小，不透明的编码，可以用tooltip 组件显示 GL 中图形的数据信息，也可以用legend 筛选出想要展示的系列等等。
例如下面这个例子用visualMap 组件对柱状图做了颜色的映射，而且能够通过控件筛选出区间内的数据。
当然除此之外，你也可以在一个实例里任意混搭使用 ECharts GL 的组件以及 ECharts 的组件。
六、移动端兼容
现在很多移动端的浏览器已经支持 WebGL 了，特别是像 iOS 系统对 WebGL 的扩展特性等支持得非常完善。所以用 ECharts GL 制作的大部分例子都能在 iOS 上流畅无压力的运行。在交互上 ECharts GL 也对移动端做了兼容处理，支持平移，双指缩放等等。
如果你现在不是在手机上浏览这篇文章，可以稍后在手机上打开
看看效果。
下面是在 iPhone 6 上实时预览前面示例中参数曲面的效果。
ECharts GL 1.0 alpha 只是个开始，在正式版发布之前，我们还会对画面，交互的细节，动画，性能等等做更多的优化。大家使用过程中有任何的问题或者建议都可以在 GitHub 上跟我们反馈， 我们也非常期待大家能够利用 ECharts GL 做出让我们想象不到的作品。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致ECharts学习（4）--仪表盘
时间： 20:02:57
&&&& 阅读：200
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&1.　　ECharts中的仪表盘，要使用这个图表时把series中的type属性修改成‘gauge’，然后在detail中设置仪表盘详情，用于显示数据。最常用的是formatter(格式化函数或者字符串)，然后可以设置data属性用来表示指针的指向。下面我们可以设置value的值为每隔2秒就随机生成一个数，然后就可以模拟显示指针的动态显示。
2.　　代码展示：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&ECharts练习&/title&
&script type="text/javascript" src="js/echarts.min.js"&&/script&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="main" style="width: 600height:400"&&/div&
&script type="text/javascript"&
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘main‘));
// 指定图表的配置项和数据
var option = {
text: ‘业务指标‘, //标题文本内容
toolbox: { //可视化的工具箱
show: true,
feature: {
restore: { //重置
show: true
saveAsImage: {//保存图片
show: true
tooltip: { //弹窗组件
formatter: "{a} &br/&{b} : {c}%"
series: [{
name: ‘业务指标‘,
type: ‘gauge‘,
detail: {formatter:‘{value}%‘},
data: [{value: <span style="background-color: #f5f5f5; color: #, name: ‘完成率‘}]
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
setInterval(function(){//把option.series[0].data[0].value的值使用random()方法获取一个随机数
option.series[<span style="background-color: #f5f5f5; color: #].data[<span style="background-color: #f5f5f5; color: #].value = (Math.random() * <span style="background-color: #f5f5f5; color: #0).toFixed(<span style="background-color: #f5f5f5; color: #) - <span style="background-color: #f5f5f5; color: #;
myChart.setOption(option, true);
}, <span style="background-color: #f5f5f5; color: #00);
3.　　效果展示：
4.　　这里只是最简单的实现了仪表盘，如果我们要实现更加复杂的功能，可以参考API文档中的其他参数进行设置，在官网的案例中做了一个十分酷炫的汽车的夜间仪表盘，下面我粘贴下代码，大家可以自己研究下，不懂得参数可以查看文档：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&ECharts练习&/title&
&script type="text/javascript" src="js/echarts.min.js"&&/script&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="main" style="width: 600height:400"&&/div&
&script type="text/javascript"&
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘main‘));
// 指定图表的配置项和数据
option = {
backgroundColor: ‘#1b1b1b‘,
tooltip: {
formatter: "{a} &br/&{c} {b}"
toolbox: {
show: true,
feature: {
show: true
restore: {
show: true
saveAsImage: {
show: true
series: [{
name: ‘速度‘,
type: ‘gauge‘,
min: <span style="background-color: #f5f5f5; color: #,
max: <span style="background-color: #f5f5f5; color: #0,
splitNumber: <span style="background-color: #f5f5f5; color: #,
radius: ‘<span style="background-color: #f5f5f5; color: #%‘,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
[<span style="background-color: #f5f5f5; color: #.09, ‘lime‘],
[<span style="background-color: #f5f5f5; color: #.82, ‘#1e90ff‘],
[<span style="background-color: #f5f5f5; color: #, ‘#ff4500‘]
width: <span style="background-color: #f5f5f5; color: #,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
fontWeight: ‘bolder‘,
color: ‘#fff‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
axisTick: { // 坐标轴小标记
length: <span style="background-color: #f5f5f5; color: #, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: ‘auto‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
splitLine: { // 分隔线
length: <span style="background-color: #f5f5f5; color: #, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width: <span style="background-color: #f5f5f5; color: #,
color: ‘#fff‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
pointer: { // 分隔线
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: ‘bolder‘,
fontSize: <span style="background-color: #f5f5f5; color: #,
fontStyle: ‘italic‘,
color: ‘#fff‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
backgroundColor: ‘rgba(30,144,255,0.8)‘,
borderWidth: <span style="background-color: #f5f5f5; color: #,
borderColor: ‘#fff‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #,
offsetCenter: [<span style="background-color: #f5f5f5; color: #, ‘<span style="background-color: #f5f5f5; color: #%‘], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: ‘bolder‘,
color: ‘#fff‘
value: <span style="background-color: #f5f5f5; color: #,
name: ‘km/h‘
name: ‘转速‘,
type: ‘gauge‘,
center: [‘<span style="background-color: #f5f5f5; color: #%‘, ‘<span style="background-color: #f5f5f5; color: #%‘], // 默认全局居中
radius: ‘<span style="background-color: #f5f5f5; color: #%‘,
min: <span style="background-color: #f5f5f5; color: #,
max: <span style="background-color: #f5f5f5; color: #,
endAngle: <span style="background-color: #f5f5f5; color: #,
splitNumber: <span style="background-color: #f5f5f5; color: #,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
[<span style="background-color: #f5f5f5; color: #.29, ‘lime‘],
[<span style="background-color: #f5f5f5; color: #.86, ‘#1e90ff‘],
[<span style="background-color: #f5f5f5; color: #, ‘#ff4500‘]
width: <span style="background-color: #f5f5f5; color: #,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
fontWeight: ‘bolder‘,
color: ‘#fff‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
axisTick: { // 坐标轴小标记
length: <span style="background-color: #f5f5f5; color: #, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: ‘auto‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
splitLine: { // 分隔线
length: <span style="background-color: #f5f5f5; color: #, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width: <span style="background-color: #f5f5f5; color: #,
color: ‘#fff‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
pointer: {
width: <span style="background-color: #f5f5f5; color: #,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
offsetCenter: [<span style="background-color: #f5f5f5; color: #, ‘-30%‘], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: ‘bolder‘,
fontStyle: ‘italic‘,
color: ‘#fff‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
//backgroundColor: ‘rgba(30,144,255,0.8)‘,
// borderWidth: 1,
borderColor: ‘#fff‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #,
width: <span style="background-color: #f5f5f5; color: #,
height: <span style="background-color: #f5f5f5; color: #,
offsetCenter: [<span style="background-color: #f5f5f5; color: #, ‘<span style="background-color: #f5f5f5; color: #%‘], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: ‘bolder‘,
color: ‘#fff‘
value: <span style="background-color: #f5f5f5; color: #.5,
name: ‘x1000 r/min‘
name: ‘油表‘,
type: ‘gauge‘,
center: [‘<span style="background-color: #f5f5f5; color: #%‘, ‘<span style="background-color: #f5f5f5; color: #%‘], // 默认全局居中
radius: ‘<span style="background-color: #f5f5f5; color: #%‘,
min: <span style="background-color: #f5f5f5; color: #,
max: <span style="background-color: #f5f5f5; color: #,
startAngle: <span style="background-color: #f5f5f5; color: #5,
endAngle: <span style="background-color: #f5f5f5; color: #,
splitNumber: <span style="background-color: #f5f5f5; color: #,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
[<span style="background-color: #f5f5f5; color: #.2, ‘lime‘],
[<span style="background-color: #f5f5f5; color: #.8, ‘#1e90ff‘],
[<span style="background-color: #f5f5f5; color: #, ‘#ff4500‘]
width: <span style="background-color: #f5f5f5; color: #,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
axisTick: { // 坐标轴小标记
length: <span style="background-color: #f5f5f5; color: #, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: ‘auto‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
axisLabel: {
textStyle: { // 属性lineStyle控制线条样式
fontWeight: ‘bolder‘,
color: ‘#fff‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
formatter: function(v) {
switch(v + ‘‘) {
case ‘<span style="background-color: #f5f5f5; color: #‘:
return ‘E‘;
case ‘<span style="background-color: #f5f5f5; color: #‘:
return ‘Gas‘;
case ‘<span style="background-color: #f5f5f5; color: #‘:
return ‘F‘;
splitLine: { // 分隔线
length: <span style="background-color: #f5f5f5; color: #, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width: <span style="background-color: #f5f5f5; color: #,
color: ‘#fff‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
pointer: {
width: <span style="background-color: #f5f5f5; color: #,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
show: false
show: false
value: <span style="background-color: #f5f5f5; color: #.5,
name: ‘gas‘
name: ‘水表‘,
type: ‘gauge‘,
center: [‘<span style="background-color: #f5f5f5; color: #%‘, ‘<span style="background-color: #f5f5f5; color: #%‘], // 默认全局居中
radius: ‘<span style="background-color: #f5f5f5; color: #%‘,
min: <span style="background-color: #f5f5f5; color: #,
max: <span style="background-color: #f5f5f5; color: #,
startAngle: <span style="background-color: #f5f5f5; color: #5,
endAngle: <span style="background-color: #f5f5f5; color: #5,
splitNumber: <span style="background-color: #f5f5f5; color: #,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
[<span style="background-color: #f5f5f5; color: #.2, ‘lime‘],
[<span style="background-color: #f5f5f5; color: #.8, ‘#1e90ff‘],
[<span style="background-color: #f5f5f5; color: #, ‘#ff4500‘]
width: <span style="background-color: #f5f5f5; color: #,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
axisTick: { // 坐标轴小标记
show: false
axisLabel: {
textStyle: { // 属性lineStyle控制线条样式
fontWeight: ‘bolder‘,
color: ‘#fff‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
formatter: function(v) {
switch(v + ‘‘) {
case ‘<span style="background-color: #f5f5f5; color: #‘:
return ‘H‘;
case ‘<span style="background-color: #f5f5f5; color: #‘:
return ‘Water‘;
case ‘<span style="background-color: #f5f5f5; color: #‘:
return ‘C‘;
splitLine: { // 分隔线
length: <span style="background-color: #f5f5f5; color: #, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width: <span style="background-color: #f5f5f5; color: #,
color: ‘#fff‘,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
pointer: {
width: <span style="background-color: #f5f5f5; color: #,
shadowColor: ‘#fff‘, //默认透明
shadowBlur: <span style="background-color: #f5f5f5; color: #
show: false
show: false
value: <span style="background-color: #f5f5f5; color: #.5,
name: ‘gas‘
myChart.setOption(option);
setInterval(function() {
option.series[<span style="background-color: #f5f5f5; color: #].data[<span style="background-color: #f5f5f5; color: #].value = (Math.random() * <span style="background-color: #f5f5f5; color: #0).toFixed(<span style="background-color: #f5f5f5; color: #) - <span style="background-color: #f5f5f5; color: #;
option.series[<span style="background-color: #f5f5f5; color: #].data[<span style="background-color: #f5f5f5; color: #].value = (Math.random() * <span style="background-color: #f5f5f5; color: #).toFixed(<span style="background-color: #f5f5f5; color: #) - <span style="background-color: #f5f5f5; color: #;
option.series[<span style="background-color: #f5f5f5; color: #].data[<span style="background-color: #f5f5f5; color: #].value = (Math.random() * <span style="background-color: #f5f5f5; color: #).toFixed(<span style="background-color: #f5f5f5; color: #) - <span style="background-color: #f5f5f5; color: #;
option.series[<span style="background-color: #f5f5f5; color: #].data[<span style="background-color: #f5f5f5; color: #].value = (Math.random() * <span style="background-color: #f5f5f5; color: #).toFixed(<span style="background-color: #f5f5f5; color: #) - <span style="background-color: #f5f5f5; color: #;
myChart.setOption(option);
}, <span style="background-color: #f5f5f5; color: #00)
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！