代码拉取完成,页面将自动刷新
同步操作将从 WEB SCADA/WEB SCADA 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<style type="text/css">
.items {
display: flex;
}
.item {
display: flex;}
.total-size{
font-size: 18px;
}
.size{
font-size: 24px;
font-weight: bold;
}
.lay1{ width:20px; height:20px; border:1px solid #FF6699;}
.lay2{ width:20px; height:20px; border:1px solid #FF6699;}
body{ text-align:center}
.div{ margin:0 auto;}
</style>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript" src="http://data-visual.cn/datav/src/js/echarts/extension/echarts-wordcloud.min.js"></script>
</head>
<body background="./1.jpg">
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div class="items">
<div class="box item" id="barleft" style="height:200px; width:30%"></div>
<div class="div" style="height:100px; width:40%;text-align: center;">
<h1 style="color: white;">Ecava IGX Web SCADA<br><p style="color:white;">先进的物联网系统</p></h1>
</div>
<div class="box item" id="pieright" style="height:200px;width:30%"></div>
</div>
<div class="items">
<div class="box item" id="container" style="height:200px; width:33%">sdasdsdasd</div>
<div class="box item" id="container1" style="height:300px; width:33%;margin-top: -50px"></div>
<div class="box item" id="right2" style="height:200px; width:33%"></div>
</div>
<div class="items">
<div class="box item" id="left3" style="height:200px; width:33%">sdasdsdasd</div>
<div class="box item" id="middle3" style="height:200px; width:33%"></div>
<div class="box item" id="right3" style="height:200px; width:33%"></div>
</div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/funnel',
'echarts/chart/pie'
],
drawEcharts
);
function drawEcharts(ec){
drawBar(ec);
drawBar1(ec);
drawLine(ec);
drawfunnel(ec);
}
function drawBar1(){
var myBarChart1 = echarts.init(document.getElementById('barleft'));
option3 = {
title: {
text: '总量',
subtext: '数据来自IGX虚拟变量'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2011年', '2012年']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
},
series: [
{
name: '2011年',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012年',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
myBarChart1.setOption(option3,true); //当setOption第二个参数为true时,会阻止数据合并
}
drawBar1()
function drawBar(){//右边第二个柱状图
var myBarChart = echarts.init(document.getElementById('right2'));
//app.title = '坐标轴刻度与标签对齐';
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
myBarChart.setOption(option,true); //当setOption第二个参数为true时,会阻止数据合并
}
drawBar()
function right3(){//右边第二个柱状图
var myBarChart = echarts.init(document.getElementById('right3'));
//app.title = '坐标轴刻度与标签对齐';
option = {
title: {
text: '漏斗图',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['展现','点击','访问','咨询','订单']
},
series: [
{
name: '预期',
type: 'funnel',
left: '10%',
width: '80%',
label: {
normal: {
formatter: '{b}预期'
},
emphasis: {
position:'inside',
formatter: '{b}预期: {c}%'
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
opacity: 0.7
}
},
data: [
{value: 60, name: '访问'},
{value: 40, name: '咨询'},
{value: 20, name: '订单'},
{value: 80, name: '点击'},
{value: 100, name: '展现'}
]
},
{
name: '实际',
type: 'funnel',
left: '10%',
width: '80%',
maxSize: '80%',
label: {
normal: {
position: 'inside',
formatter: '{c}%',
textStyle: {
color: '#fff'
}
},
emphasis: {
position:'inside',
formatter: '{b}实际: {c}%'
}
},
itemStyle: {
normal: {
opacity: 0.5,
borderColor: '#fff',
borderWidth: 2
}
},
data: [
{value: 30, name: '访问'},
{value: 10, name: '咨询'},
{value: 5, name: '订单'},
{value: 50, name: '点击'},
{value: 80, name: '展现'}
]
}
]
};
myBarChart.setOption(option,true); //当setOption第二个参数为true时,会阻止数据合并
}
right3()
function drawLine(){
var myLineChart = echarts.init(document.getElementById('left3'));
var option2 = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
};
myLineChart.setOption(option2,true);
}
drawLine()
function middle3(){
var myLineChart = echarts.init(document.getElementById('middle3'));
var option2 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [20, 25, 30, 40, 36, 32, 25],
type: 'bar'
}]
};
myLineChart.setOption(option2,true);
}
middle3()
function drawfunnel(){//饼状图
var myPieChart1 = echarts.init(document.getElementById('pieright'));
option4 = {
"tooltip": {
"trigger": 'item',
"formatter": "{a} : ({d}%)"
},
"series": [{
"name": "CPU分配率 内圈",
"center": [
"50%",
"50%"
],
"radius": [
"49%",
"50%"
],
"clockWise": false,
"hoverAnimation": false,
"type": "pie",
"data": [{
"value": 84,
"name": "",
"label": {
"normal": {
"show": true,
"formatter": '{d} %',
"textStyle": {
"fontSize": 28,
"fontWeight": "bold"
},
"position": "center"
}
},
"labelLine": {
"show": false
},
"itemStyle": {
"normal": {
"color": "#5886f0",
"borderColor": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00a2ff'
}, {
offset: 1,
color: '#70ffac'
}]),
"borderWidth": 25
},
"emphasis": {
"color": "#5886f0",
"borderColor": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#85b6b2'
}, {
offset: 1,
color: '#6d4f8d'
}]),
"borderWidth": 25
}
},
}, {
"name": " ",
"value": 16,
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
},
"color": 'rgba(0,0,0,0)',
"borderColor": 'rgba(0,0,0,0)',
"borderWidth": 0
},
"emphasis": {
"color": 'rgba(0,0,0,0)',
"borderColor": 'rgba(0,0,0,0)',
"borderWidth": 0
}
}
}]
}, {
"name": "CPU分配率 外圈",
"center": [
"50%",
"50%"
],
"radius": [
"59%",
"60%"
],
"clockWise": false,
"hoverAnimation": false,
"type": "pie",
"data": [{
"value": 84,
"name": "",
"label": {
"normal": {
"show": true,
"formatter": '{d} %',
"textStyle": {
"fontSize": 28,
"fontWeight": "bold"
},
"position": "center"
}
},
"labelLine": {
"show": false
},
"itemStyle": {
"normal": {
"color": "#5886f0",
"borderColor": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00a2ff'
}, {
offset: 1,
color: '#70ffac'
}]),
"borderWidth": 1
},
"emphasis": {
"color": "#5886f0",
"borderColor": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#85b6b2'
}, {
offset: 1,
color: '#6d4f8d'
}]),
"borderWidth": 1
}
},
}, {
"name": " ",
"value": 16,
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
},
"color": 'rgba(0,0,0,0)',
"borderColor": 'rgba(0,0,0,0)',
"borderWidth": 0
},
"emphasis": {
"color": 'rgba(0,0,0,0)',
"borderColor": 'rgba(0,0,0,0)',
"borderWidth": 0
}
}
}]
}]
};
myPieChart1.setOption(option4, true);
//当setOption第二个参数为true时,会阻止数据合并
}
drawfunnel()
//字幅云
function wordCloud(){
var dom = document.getElementById("container");
var mycloudChart = echarts.init(dom);
var app = {};
option5 = null;
option5 = {
title:{
text:"词云图",
link:'http://www.ecava.cn',
subtext: 'ecava.cn',
sublink:'http://www.ecava.cn',
},
tooltip: {},
series: [{
type: 'wordCloud',
gridSize: 20,
sizeRange: [12, 50],
rotationRange: [0, 0],
shape: 'circle',
textStyle: {
normal: {
color: function() {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: [{
name: 'IGX WEB SCADA',
value: 10000,
textStyle: {
normal: {
color: 'white'
},
emphasis: {
color: 'red'
}
}
}, {
name: 'IGX',
value: 6181
}, {
name: 'HTML5',
value: 4386
}, {
name: 'CSS3',
value: 4055
}, {
name: 'Web SCADA',
value: 2467
}, {
name: '服务',
value: 2244
}, {
name: '纯WEB',
value: 1898
}, {
name: '安全',
value: 1484
}, {
name: '稳定',
value: 1112
}, {
name: '集群',
value: 965
}, {
name: '最快1毫秒',
value: 847
}, {
name: '全内容权限控制',
value: 582
}, {
name: '跨产量访问',
value: 555
}, {
name: '安卓',
value: 550
}, {
name: '苹果',
value: 462
}, {
name: '集群',
value: 366
}, {
name: '报警',
value: 360
}, {
name: '曲线',
value: 282
}, {
name: '报表',
value: 273
}, {
name: '日志',
value: 265
}]
}]
};
mycloudChart.setOption(option5, true);
}
wordCloud()
function middle(){//中间图形
//生产分析/渠道分析
var dom = document.getElementById("container1");
var mymiddleChart1 = echarts.init(dom);
option6 = {
timeline: {
data: [
'膜法世家','生产2','生产3','生产4','生产5','生产6','生产7','生产8','生产9','生产10','生产11','生产12','生产13','生产14','生产15','生产16','生产17','生产18','生产19','生产20'
],
left:'10%',
right:'10%',
bottom:0,
height:60,
axisType: 'category',
show: true,
autoPlay: false,
playInterval: 1000,
checkpointStyle: {
color: '#04a5f1',
borderColor: 'rgba(4, 165, 261, .5)'
},
label:{
normal:{
formatter: function(v) {
var _txt = v.replace(/\//igm, '\n');
return _txt;},
rotate:-45,
position:'bottom'}
},
itemStyle: {
normal: {
color: '#04a5f1'
},
emphasis: {
color: '#04a5f1'
}
},
lineStyle: {
color: '#ddd'
},
controlStyle:{
show: false,
},
},
options: [{
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor:'rgba(255,255,255,0.8)',
extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
textStyle:{
color:'#666',},
},
},
backgroundColor:'rgba(255,255,255,0.8)',
extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
textStyle:{
color:'#666',
},
},
toolbox: {
'show': true,
// orient: 'vertical',
//x: 'right',
//y: 'center',
feature: {
'magicType': {
'show': true,
'type': ['bar', 'line']
},
restore: {
'show': true
},
saveAsImage: {
'show': true
}
}
},
legend: {
data:['生产量','利润额'],
},
grid: {
top: '100',
left: '3%',
right: '4%',
bottom: '80',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['产量1','产量2','产量3','产量4','产量5','产量6','产量7','产量8','产量9','产量10','产量11','产量12','产量13','产量14'],
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
//rotate:-30,
textStyle: {
color: '#666',
fontStyle: 'normal',
}
},
axisLine:{//坐标轴轴线相关设置
lineStyle:{
color:'#666',
opacity:1
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
}
],
yAxis: [
{
name: '生产量(万件)',
type: 'value',
axisLabel: {
textStyle: {
color: '#666',
}
},
axisLine:{
show: false
},
axisTick:{
show: false
},
splitLine: {
show: false,
}
},{
name: '利润额(万元)',
type: 'value',
position: 'right',
axisLabel: {
textStyle: {
color: '#666',
fontStyle: 'normal',
}
},
axisLine:{
show: false
},
axisTick:{
show: false
},
splitLine: {
show: false,
}
}
],
series: [{
'name': '生产量',
'type': 'bar',
// barWidth: 15,
'data': [11, 49, 13, 24, 23, 11, 3, 85,61, 48, 45,23, 23, 85],
itemStyle: {
normal: {
//barBorderRadius: 15,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#229aff'},
{offset: 1, color: '#13bfe8'}
]
)
}}
}, {
name: '利润额',
yAxisIndex: 1,
type: 'line',
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 10,
data: [61, 48, 45,23, 11, 28, 4, 11, 49, 13, 24, 11, 3, 85],
itemStyle: {
normal: {
color:'#fdb94e'},
},
}]
},{
title: {
'text': '膜法世家',
'show':false,
},
series: [{
'data': [159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61,260]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65]
}]
}, {
title: {
'text': '生产2',
'show':false,
},
series: [{
'data': [ 9, 6, 56, 41, 70, 1, 0, 35, 44, 2,94, 7, 64, 55]
}, {
"data": [94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 2, 17, 25]
}]
}, {
title: {
'text': '生产3',
'show':false,
},
series: [{
'data': [159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61,260]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65]
}]
}, {
title: {
'text': '生产4',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 56, 41, 70, 70,60,80]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 11, 61]
}]
}, {
title: {
'text': '生产5',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 41, 70,56,]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 61]
}]
}, {
title: {
'text': '生产6',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 41, 70 ,60]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 61]
}]
}, {
title: {
'text': '生产7',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 41, 70,56,]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 61]
}]
}, {
title: {
'text': '生产8',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 41, 70,56,]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 61]
}]
}, {
title: {
'text': '生产9',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 56, 41, 70, 70,60,80]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 11, 61]
}]
}, {
title: {
'text': '生产10',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 56, 41, 70, 70,60,80]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 11, 61]
}]
}, {
title: {
'text': '生产11',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 56, 41, 70, 70,60,80]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 11, 61]
}]
}, {
title: {
'text': '生产12',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 56, 41, 70, 70,60,80]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 11, 61]
}]
}, {
title: {
'text': '生产13',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 56, 41, 70, 70,60,80]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 11, 61]
}]
}, {
title: {
'text': '生产14',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 56, 41, 70, 70,60,80]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 11, 61]
}]
}, {
title: {
'text': '生产15',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 56, 41, 70, 70,60,80]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 11, 61]
}]
}, {
title: {
'text': '生产16',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 56, 41, 70, 70,60,80]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 11, 61]
}]
}, {
title: {
'text': '生产17',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 56, 41, 70, 70,60,80]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 11, 61]
}]
}, {
title: {
'text': '生产18',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 56, 41, 70, 70,60,80]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 11, 61]
}]
}, {
title: {
'text': '生产19',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 56, 41, 70, 70,60,80]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 11, 61]
}]
}, {
title: {
'text': '生产20',
'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 56, 41, 70, 70,60,80]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 11, 61]
}]
}]
};
mymiddleChart1.setOption(option6,true); }
middle()
</script>
</body>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。