Echarts 2.27版本生成仪表盘

最新推荐文章于 2023-09-06 16:30:05 发布

佛系GIS

最新推荐文章于 2023-09-06 16:30:05 发布

阅读量1k

点赞数

分类专栏： Echarts js 文章标签： Echarts js

本文链接：https://blog.csdn.net/angel_lili/article/details/79074736

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Echarts

1 篇文章 0 订阅

订阅专栏

注意事项：

官方DEMO写的不太全面，对于新手来说，会很迷惑，遇到的问题也会很头疼，试验了一上午，终于恍然大明白

需要添加 require.config里的路径，仪表盘用到的文件为 'echarts/chart/gauge'需要添加，代码已经COPY出来了，欢迎大家一起学习，如果错误，希望大家批评指正。

代码如下：

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>ECharts练习</title>
</head>
<body>

<div id="main" style="width: 1000px; height: 400px;"></div>
<script src="../echarts/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: '../echarts/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar',
'echarts/chart/gauge'
],
function (ec) {
// 基于准备好的dom，初始化echarts实例
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
formatter: "{a} <br/>{c} {b}"
},
toolbox: {
show: true,
feature: {
mark: { show: true },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: '速度',
type: 'gauge',
z: 3,
min: 0,
max: 220,
splitNumber: 11,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10
}
},
axisTick: { // 坐标轴小标记
length: 15, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
title: {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic'
}
},
detail: {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
}
},
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控制线条样式
width: 8
}
},
axisTick: { // 坐标轴小标记
length: 12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width: 5
},
title: {
offsetCenter: [0, '-30%'] // x, y，单位px
},
detail: {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
}
},
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, '#ff4500'], [0.8, '#48b'], [1, '#228b22']],
width: 8
}
},
axisTick: { // 坐标轴小标记
splitNumber: 5,
length: 10, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: {
formatter: function (v) {
switch (v + '') {
case '0': return 'E';
case '1': return 'Gas';
case '2': return 'F';
}
}
},
splitLine: { // 分隔线
length: 15, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width: 2
},
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, '#ff4500'], [0.8, '#48b'], [1, '#228b22']],
width: 8
}
},
axisTick: { // 坐标轴小标记
show: false
},
axisLabel: {
formatter: function (v) {
switch (v + '') {
case '0': return 'H';
case '1': return 'Water';
case '2': return 'C';
}
}
},
splitLine: { // 分隔线
length: 15, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width: 2
},
title: {
show: false
},
detail: {
show: false
},
data: [{ value: 0.5, name: 'gas' }]
}
]
};

clearInterval(timeTicket);
var 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)
myChart.setOption(option);
}
);
</script>
</body>

</html>

运行结果图：

佛系GIS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts 2.27版本生成仪表盘

注意事项：官方DEMO写的不太全面，对于新手来说，会很迷惑，遇到的问题也会很头疼，试验了一上午，终于恍然大明白需要添加 require.config里的路径，仪表盘用到的文件为 'echarts/chart/gauge'需要添加，代码已经COPY出来了，欢迎大家一起学习，如果错误，希望大家批评指正。代码如下： ECharts练习
复制链接

扫一扫

专栏目录