echarts实现通用大屏数据看板监控代码
代码语言：html
所属分类：其他
代码描述：echarts实现通用大屏数据看板监控代码
代码标签： echarts 通用 大屏 数据 看板 监控 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echart-china.js"></script>
<script type="text/javascript" >
$(window).load(function(){$(".loading").fadeOut()})
$(function () {
echarts_1();
echarts_2();
echarts_3();
echarts_4();
echarts_5();
echarts_6();
echarts_7();
echarts_8();
echarts_9();
echarts_15();
function echarts_1() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart1'));
var data = [{
title: '**省'
},
['本周'],
[{
name: '文本1',
max: 150
}, {
name: '文本2',
max: 150
}, {
name: '文本3',
max: 150
}, {
name: '文本4',
max: 150
}, {
name: '文本5',
max: 150
}],
[43, 100, 28, 3, 150],
]
option = {
color: ['#9DD060', '#35C96E', '#4DCEF8'],
tooltip: {},
radar: {
center: ['50%', '50%'],
radius: ["25%", "70%"],
name: {
textStyle: {
color: '#72ACD1'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.0',
width: 2
}
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 1,
type: 'dotted'
},
},
splitArea: {
areaStyle: {
color: ['rgba(255,255,255,.1)', 'rgba(255,255,255,0)']
}
},
indicator: data[2]
},
series: [{
name: '',
type: 'radar',
data: [{
areaStyle: {
normal: {
opacity: 0.3,
}
},
value: data[3],
name: data[1][0]
},
{
areaStyle: {
normal: {
opacity: 0.3,
}
},
value: data[4],
name: data[1][1]
},
{
areaStyle: {
normal: {
opacity: 0.3,
}
},
value: data[5],
name: data[1][2]
}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_2() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart2'));
option = {
// backgroundColor: '#00265f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2017年', '2018年'],
top:'5%',
textStyle: {
color: "#fff",
fontSize: '12',
},
itemGap: 35
},
grid: {
left: '0%',
top:'40px',
right: '0%',
bottom: '0',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
// rotate:50,
show: true,
splitNumber: 5,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '12',
},
},
}],
yAxis: [{
type: 'value',
axisLabel: {
//formatter: '{value} %'
show:true,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '12',
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1 )",
width: 1,
type: "solid"
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
}
}
}],
series: [{
name: '2017年',
type: 'line',
smooth: true,
data: [2, 6, 3, 8, 5, 8],
itemStyle: {
normal: {
color:'#2f89cf',
opacity: 1,
barBorderRadius: 5,
}
}
}, {
name: '2018年',
type: 'line',
smooth: true,
data: [5, 2, 6, 4, 5, 12],
barWidth:'15',
// barGap: 1,
itemStyle: {
normal: {
color:'#62c98d',
opacity: 1,
barBorderRadius: 5,
}
}
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_3() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart3'));
option = {
// backgroundColor: '#00265f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2017年', '2018年'],
top:'5%',
textStyle: {
color: "#fff",
fontSize: '12',
},
itemGap: 35
},
grid: {
left: '0%',
top:'40px',
right: '0%',
bottom: '0',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
// rotate:50,
show: true,
splitNumber: 15,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '12',
},
},
}],
yAxis: [{
type: 'value',
axisLabel: {
//formatter: '{value} %'
show:true,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '12',
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1 )",
width: 1,
type: "solid"
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
}
}
}],
series: [{
name: '2017年',
type: 'line',
smooth: true,
data: [8, 16, 10, 12, 7, 9],
itemStyle: {
normal: {
color:'#2f89cf',
opacity: 1,
barBorderRadius: 5,
}
}
}, {
name: '2018年',
type: 'line',
smooth: true,
data: [5, 12, 6, 4, 5, 12],
barWidth:'15',
// barGap: 1,
itemStyle: {
normal: {
color:'#62c98d',
opacity: 1,
barBorderRadius: 5,
}
}
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_4() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart4'));
var data = [78, 60, 60, 70, 69, 60, 70, 69]
var titlename = ['文本1', '文本2', '文本3', '文本4', '文本5', '文本6', '文本7', '文本8'];
var valdata = [683, 234, 234, 523, 345, 234, 523, 345]
option = {
grid: {
left: '10',
top: '20',
right: '30',
bottom: '-25',
containLabel: true
},
xAxis: {
show: false
},
yAxis: [{
show: true,
data: titlename,
inverse: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
},
formatter: function(value, index) {
return [
'{title|' + value + '} '
].join('\n')
},
rich: {}
},
}, {
show: true,
inverse: true,
data: valdata,
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,.5)'
}
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
}],
series: [{
name: '条',
type: 'bar',
yAxisIndex: 0,
data: data,
barWidth: '40%',
itemStyle: {
normal: {
barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#248ff7'
}, {
offset: 1,
color: '#3893e5'
}]),
}
},
label: {
normal: {
show: false,
}
},
}, {
name: '框',
type: 'bar',
yAxisIndex: 1,
barGap: '-100%',
data: [100, 100, 100, 100, 100, 100, 100, 100],
barWidth: '40%',
itemStyle: {
normal: {
color: 'none',
borderColor: 'rgba(255,255,255,.1)',
borderWidth: 1,
barBorderRadius: 15,
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_5() {
var myChart = echarts.init(document.getElementById('echart5'));
let inputValue =80
option = {
title: {
subtext: '文本1',
left: 'center',
bottom:15,
subtextStyle: {
color: 'rgba(255,255,255,.6)',
fontSize: 12
}
},
series: [
{
name: '',
type: 'gauge',
radius: '90%',
startAngle: 200,
endAngle: -20,
detail: {formatter: '{value}'},
data: [{value: inputValue, name: ''}],
axisLine: {
lineStyle: {
width: 10,
color: [
[
0.8, new echarts.graphic.LinearGradient(//0.8值为颜色显示百分比80%
0, 0, 1, 0, [{
offset: 0,
color: '#ae3df6'
},
{
offset: 1,
color: '#53bef9'
}
]
)
],
[
1, '#1c4e85'
]
]
}
},
pointer: {
show: false, //不显示指针
length: "70%",
width:3,
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
detail: {
offsetCenter: [0, 1],
color: '#fff',
fontSize: 16,
}
},
]
}
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_6() {
var myChart = echarts.init(document.getElementById('echart6'));
let inputValue = 2
option = {
title: {
subtext: '文本2',
left: 'center',
bottom:15,
subtextStyle: {
color: 'rgba(255,255,255,.6)',
fontSize: 12
}
},
series: [
{
name: '',
type: 'gauge',
radius: '90%',
startAngle: 200,
endAngle: -20,
detail: {formatter: '{value}'},
data: [{value: inputValue, name: ''}],
axisLine: {
lineStyle: {
width: 10,
color: [
[
0.7, new echarts.graphic.LinearGradient(//0.8值为颜色显示百分比%
0, 0, 1, 0, [{
offset: 0,
color: '#1db0d2'
},
{
offset: 1,
color: '#44ceef'
}
]
)
],
[
1, '#1c4e85'
]
]
}
},
pointer: {
show: false, //不显示指针
length: "70%",
width:3,
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
detail: {
offsetCenter: [0, 1],
color: '#fff',
fontSize: 16,
}
},
]
}
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_7() {
var myChart = echarts.init(document.getElementById('echart7'));
let inputValue = 10
option = {
title: {
subtext: '文本3',
left: 'center',
bottom:15,
subtextStyle: {
color: 'rgba(255,255,255,.6)',
fontSize: 12
}
},
series: [
{
name: '',
type: 'gauge',
radius: '90%',
startAngle: 200,
endAngle: -20,
detail: {formatter: '{value}'},
data: [{value: inputValue, name: ''}],
axisLine: {
lineStyle: {
width: 10,
color: [
[
0.2, new echarts.graphic.LinearGradient(//0.8值为颜色显示百分比80%
0, 0, 1, 0, [{
offset: 0,
color: '#1ea899'
},
{
offset: 1,
color: '#29c582'
}
]
)
],
[
1, '#1c4e85'
]
]
}
},
pointer: {
show: false, //不显示指针
length: "70%",
width:3,
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
detail: {
offsetCenter: [0, 1],
color: '#fff',
fontSize: 16,
}
},
]
}
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_8() {
var myChart = echarts.init(document.getElementById('echart8'));
let inputValue = 2.5
option = {
title: {
subtext: '文本4',
left: 'center',
bottom:15,
subtextStyle: {
color: 'rgba(255,255,255,.6)',
fontSize: 12
}
},
series: [
{
name: '',
type: 'gauge',
radius: '90%',
startAngle: 200,
endAngle: -20,
detail: {formatter: '{value}'},
data: [{value: inputValue, name: ''}],
axisLine: {
lineStyle: {
width: 10,
color: [
[
0.4, new echarts.graphic.LinearGradient(//0.8值为颜色显示百分比80%
0, 0, 1, 0, [{
offset: 0,
color: '#e6658f'
},
{
offset: 1,
color: '#f8a58b'
}
]
)
],
[
1, '#1c4e85'
]
]
}
},
pointer: {
show: false, //不显示指针
length: "70%",
width:3,
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
detail: {
offsetCenter: [0, 1],
color: '#fff',
fontSize: 16,
}
},
]
}
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_9() {
var myChart = echarts.init(document.getElementById('echart9'));
option = {
tooltip: {
trigger: 'axis',
axisPointer: {type: 'shadow'},
formatter:'{b}走势' ,
},
legend: {
x: 'center',
y: '10',
icon: 'circle',
itemGap:8,
textStyle: {color: 'rgba(255,255,255,1)'},
itemWidth: 10,
itemHeight: 10,
},
grid: {
left: '0',
top: '40',
right: '15',
bottom: '0',
containLabel: true
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: {show:false},
axisLabel: {
textStyle: {
color:'rgba(255,255,255,.5)',
}
},
},
yAxis: {
type: 'value',
splitNumber:4,
axisLine: { show: false },
axisTick: {show: false},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.05)'
}
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.5)",
},
},
},
series: [ {
name: '用电',
type: 'bar',
barWidth: '25%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#8bd46e'
}, {
offset: 1,
color: '#03b48e'
}]),
barBorderRadius: 11,
}
},
data: [123,154, 234, 321,120,390]
},
{
name: '水质',
type: 'bar',
barWidth: '25%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3893e5'
}, {
offset: 1,
color: '#248ff7'
}]),
barBorderRadius: 11,
}
},
data: [63,194, 234, 321,278,110]
}
]
};
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echarts_15() {
var myChart = echarts.init(document.getElementById('map'));
var data = [
{name: '衢州', value: 177},
{name: '广州', value: 277},
{name: '廊坊', value: 193},
{name: '菏泽', value: 194},
{name: '合肥', value: 229},
{name: '武汉', value: 273},
{name: '大庆', value: 279},
{name: '北京', value: 379},
{name: '重庆', value: 120}
];
var geoCoordMap = {
'海门':[121.15,31.89],
'鄂尔多斯':[109.781327,39.608266],
'招远':[120.38,37.35],
'舟山':[122.207216,29.985295],
'齐齐哈尔':[123.97,47.33],
'盐城':[120.13,33.38],
'赤峰':[118.87,42.28],
'青岛':[120.33,36.07],
'乳山':[121.52,36.89],
'金昌':[102.188043,38.520089],
'泉州':[118.58,24.93],
'莱西':[120.53,36.86],
'日照':[119.46,35.42],
'胶南':[119.97,35.88],
'南通':[121.05,32.08],
'拉萨':[91.11,29.97],
'云浮':[112.02,22.93],
'梅州':[116.1,24.55],
'文登':[122.05,37.2],
'上海':[121.48,31.22],
'攀枝花':[101.718637,26.582347],
'威海':[122.1,37.5],
'承德':[117.93,40.97],
'厦门':[118.1,24.46],
'汕尾':[115.375279,22.786211],
'潮州':[116.63,23.68],
'丹东':[124.37,40.13],
'太仓':[121.1,31.45],
'曲靖':[103.79,25.51],
'烟台':[121.39,37.52],
'福州':[119.3,26.08],
'瓦房店':[121.979603,39.627114],
'即墨':[120.45,36.38],
'抚顺':[123.97,41.97],
'玉溪':[102.52,24.35],
'张家口':[114.87,40.82],
'阳泉':[113.57,37.85],
'莱州':[119.942327,37.177017],
'湖州':[120.1,30.86],
'汕头':[116.69,23.39],
'昆山':[120.95,31.39],
'宁波':[121.56,29.86],
'湛江':[110.359377,21.270708],
'揭阳':[116.35,23.55],
'荣成':[122.41,37.16],
'连云港':[119.16,34.59],
'葫芦岛':[120.836932,40.711052],
'常熟':[120.74,31.64],
'东莞':[113.75,23.04],
'河源':[114.68,23.73],
'淮安':[119.15,33.5],
'泰州':[119.9,32.49],
'南宁':[108.33,22.84],
'营口':[122.18,40.65],
'惠州':[114.4,23.09],
'江阴':[120.26,31.91],
'蓬莱':[120.75,37.8],
'韶关':[113.62,24.84],
'嘉峪关':[98.289152,39.77313],
'广州':[113.23,23.16],
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0