Echarts中的gauge仪表盘.（特殊加一句代码）
来源：互联网 发布：人工智能服装设计打板 编辑：程序博客网 时间：2024/05/20 03:38
?<!DOCTYPE html>
<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 timeTicket;
//配置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中运行，那么图形展示就形成了。
注：路径一定要配对。
0 0
- Echarts中的gauge仪表盘.（特殊加一句代码）
- highcharts 仪表盘样式总结（gauge）
- Highcharts 制作仪表盘 gauge
- Echarts仪表盘
- Echarts关于仪表盘
- ECharts 仪表盘改变颜色
- Echarts CPU监控 （折线仪表盘，图例混搭）
- Echarts CPU监控 （折线仪表盘，图例混搭）
- ECharts画动态仪表盘+柱状图（ajax获取+循环画图）
- echarts仪表盘（ie8中0显示异常）
- Echarts更改仪表盘显示属性
- echarts仪表盘和模拟进度条
- 【WPF开发】WpfGauge：开源仪表盘(Gauge)的使用
- highcharts gauge 速度 仪表盘动态创建动态改变指针
- 代码中的特殊注释
- （1）Echarts图表绑定特殊事件
- Gauge
- echarts 根据实际数据改变仪表盘颜色
- 工业设计之美
- 文件剪切代码（从一个目录剪切到另一个目录）
- SQL_SERVER_2008升级SQL_SERVER_2008_R2的方法
- 不要从战略、技术出发做产品——陆树燊
- MVC设计模式 转发和重定向
- Echarts中的gauge仪表盘.（特殊加一句代码）
- SQL Server2008 安装失败后的解决办法
- windows编程简介
- 行为模式->策略模式
- 用户需求和分析——张有亮
- 让你的微信小程序具有在线支付功能
- C/C++学习（4）函数与指针取地址符
- eclipse中下载maven插件解决办法
- 我的产品观
