ECharts 大屏显示图
代码下载包
https://files.cnblogs.com/files/yehuisir/eckarts_open_class-master.zip?t=1650275102
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var data_f = [
32, 33, 31, 14, 19, 13, 10,15,18,23,
23, 16, 17,27, 18, 20, 23,36,13,14,
14, 15, 17, 17, 17, 11, 13,14,18,19,
];
var data_p = [
32, 33, 31, 14, 19, 13, 10,15,18,23,
23, 16, 17,27, 18, 20, 23,36,13,14,
14, 15, 17, 17, 17, 11, 13,14,18,19,
];
var data_g = [
32, 33, 31, 14, 19, 13, 10,15,18,23,
23, 16, 17,27, 18, 20, 23,36,13,14,
14, 15, 17, 17, 17, 11, 13,14,18,19,
];
var data_z = [96, 99, 93, 42, 57, 39, 30, 45, 54, 69, 69, 48, 51, 81, 54, 60, 69, 108, 39, 42, 42, 45, 51, 51, 51, 33, 39, 42, 54, 57]
this.BarOption1 = {
color:["#A35200", "#0A7FD2", "#3BA854", "#6DB9D9",],
title: {
text: '充冷时长',
textStyle:{
color: '#FFFFFF'
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
textStyle: {
color: "#FFFFFF"
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
,
tooltip: {
textStyle: {
color: "rgba(143, 38, 38, 1)"
}
}
},
xAxis: [
{
type: 'category',
data: [
'1', '2', '3', '4', '5', '6', '7','8','9','10',
'11', '12', '13', '14', '15', '16', '17','18','19','20',
'21', '22', '23', '24', '25', '26', '27','28','29','30',
],
axisLabel: {
color: '#FFFFFF'
}
},
],
yAxis: [
{
type: 'value',
axisLabel: {
color: '#FFFFFF',
interval: 30
},
splitArea: {
interval: 6
},
nameTextStyle: {
color: "#FFFFFF"
},
name: "充冷时长(h)"
}
],
series: [
{
name: '峰电',
type: 'bar',
emphasis: {
focus: 'series'
},
stack:"总量",
data:data_f,
barWidth: 10,
itemStyle:{
barBorderRadius: 15,
},
},
{
name: '平电',
type: 'bar',
stack:"总量",
emphasis: {
focus: 'series'
},
barWidth: 10,
itemStyle:{
barBorderRadius: 15,
},
data: data_p,
},
{
name: '谷电',
type: 'bar',
stack:"总量",
emphasis: {
focus: 'series'
},
itemStyle:{
barBorderRadius: 15,
},
barCategoryGap: "58%",
barWidth: 10,
data: data_g
},
,
{
name: '总电充冷时长',
type: 'line',
smooth:true,
symbol: 'circle', //设定为实心点
symbolSize: 11,
data: data_z,
itemStyle: {
borderColor: "#FFFFFF",
},
}
]
};
this.BarOption2 = {
color:["#A35200", "#0A7FD2", "#3BA854",],
title: {
text: '冷箱充冷时长分析',
textStyle:{
color: '#FFFFFF'
},
},
graphic:[{
type:'text',
left:'33%',
top:'44%',
style:{
text:'579',
textAlign:'center',
fill:'#FFFFFF',
width:30,
height:30,
color:"#FFFFFF",
fontSize: 25,
}
},
{
type:'text',
left:'30%',
top:'53%',
style:{
text:'总充冷时长',
textAlign:'center',
fill:'#FFFFFF',
width:30,
height:30,
color:"#FFFFFF",
fontSize: 15,
}
}],
tooltip: {
trigger: 'item'
},
legend: {
top: '20%',
right:"30px",
textStyle: {
color: "#FFFFFF"
},
orient: "vertical",
},
series: [
{
// name: 'Access From',
type: 'pie',
radius: ['60%', '38%'],
right: "23%",
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
// emphasis: {
// label: {
// show: true,
// fontSize: '40',
// fontWeight: 'bold'
// }
// },
labelLine: {
show: false
},
data: [
{ value: 1048, name: '峰电时长：230h' },
{ value: 735, name: '平电时长：172h' },
{ value: 580, name: '谷电时长：120h' },
]
}
]
};
实例二
//初始化echarts this.BarOption1 = { color:["#3DB1D9","#AE9456"], title: { text: '冷箱开关门时长', textStyle:{ color: '#FFFFFF' }, }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, legend: { data: ['开关门次数', '开关门时长'], textStyle: { color: "#FFFFFF" }, }, xAxis: [ { type: 'category', data: [ '1', '2', '3', '4', '5', '6', '7','8','9','10', '11', '12', '13', '14', '15', '16', '17','18','19','20', '21', '22', '23', '24', '25', '26', '27','28','29','30', ], axisPointer: { type: 'shadow' }, axisLabel: { color: '#FFFFFF' } } ], yAxis: [ { type: 'value', // name: 'Precipitation', min: 0, max: 30, interval: 5, axisLabel: { formatter: '{value}', color: '#FFFFFF' }, name: "开关门时长(h)", nameTextStyle: { color:'#FFFFFF' } }, { type: 'value', min: 0, max: 30, interval: 5, axisLabel: { formatter: '{value}', color: '#FFFFFF' }, name: "开关门次数(次)", nameTextStyle: { color:'#FFFFFF' } } ], series: [ { name: '开关门次数', type: 'bar', tooltip: { valueFormatter: function (value) { return value ; } }, data: [ 10, 12,11, 14, 10, 13, 12,10, 13, 12, 11, 12,13, 14, 15, 11, 13,11, 19, 10, 11, 12,11, 14, 10, 13, 12,10, 13, 12, ], barWidth: 10, itemStyle: { barBorderRadius: [15,15,0,0], // // 填充色渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#3DB1D9" }, { offset: 0.5, color: "#3DB1D9" }, { offset: 1, color: "#19283C" } ]) }, }, { name: '开关门时长', type: 'line', symbol: "none", lineStyle: { color: "#AE9456" }, yAxisIndex: 1, tooltip: { valueFormatter: function (value) { return value + ''; } }, scale: false, data: [ 20, 22,21, 24, 20, 23, 22,20, 23, 22, 21, 22,23, 24, 25, 16, 17,18, 25, 20, 22, 22,21, 24, 20, 23, 22,20, 23, 22,], smooth:true, areaStyle: { // 填充色渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#98834F" }, { offset: 0.5, color: "#19283C" }, { offset: 1, color: "#19283C" } ]) } } ] }; this.BarOption2 = { color:["#AE9456","#3DB1D9"], title: { text: '冷箱开关门排名', textStyle:{ color: '#FFFFFF' }, }, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data:['开关门时长','开关门次数',], textStyle: { color: "#FFFFFF" }, right:"20px", }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'value', splitLine:{ show:true, }, //横坐标的负半轴的 "坐标轴" 上显示是正数 axisLabel:{ color: '#FFFFFF', show:true,//不显示坐标轴的数字 formatter:function(value){ if (value<0) { return -value; }else{ return value; } } } } ], yAxis : [ { show:true,//纵坐标显示 type : 'category', position:'left',//纵向坐标显示位置 可选为：left | right axisTick : {show: false}, // splitArea : {show : true}, splitLine:{ show:false//网格线不显示 }, data : ['老猫0001','老猫0002','老猫0003','老猫0004','老猫0005','老猫0006','老猫0007'], axisLabel: { color: '#FFFFFF' }, } ], series : [ { name:'开关门时长', type:'bar', stack: '总量', label: { normal: { show: true, /* *处理横坐标负半轴这边的 "柱状" 显示的数 *后台传过来是负数，显示时是正数 */ formatter: function (value) { if(value.data<0){ return -value.data; }else{ return value.data; } }, } }, data:[-120, -132, -101, -134, -190, -230, -210], itemStyle: { // // 填充色渐变 color: new echarts.graphic.LinearGradient(0,0, 1, 0, [ { offset: 0, color: "#3DB1D9" }, { offset: 0.5, color: "#3DB1D9" }, { offset: 1, color: "#19283C" } ]) }, }, { name:'开关门次数', type:'bar', stack: '总量', label: { normal: { show: true } }, data:[320, 302, 341, 374, 390, 450, 420], itemStyle: { // // 填充色渐变 color: new echarts.graphic.LinearGradient(1,0, 0, 0, [ { offset: 0, color: "#BB9753" }, { offset: 0.5, color: "#BB9753" }, { offset: 1, color: "#19283C" } ]) }, }, ] };
实例三
this.BarOption1 = { color:["#A35200", "#0A7FD2", "#3BA854", "#6DB9D9",], title: { text: '充冷机耗电量', textStyle:{ color: '#FFFFFF' }, }, tooltip: { axisPointer: { type: 'cross', crossStyle: { color: '#999' } }, trigger: 'axis', }, legend: { data: ['峰电', '平电', '谷电', '总充冷时长'], textStyle: { color: "#FFFFFF" }, itemGap: 2 }, xAxis: [ { type: 'category', data: [ 'CLJ0001', 'CLJ0002', 'CLJ0003', 'CLJ0004', 'CLJ0005', 'CLJ0006', 'CLJ0007', 'CLJ0008', 'CLJ0009', 'CLJ00010', ], axisLabel: { color: "#FFFFFF", interval: 0 }, } ], yAxis: [ { type: 'value', name: '耗电量(kWh)', min: 0, max: 70, interval: 10, axisLabel: { formatter: '{value}', color: "#FFFFFF" }, nameTextStyle: { color: "#FFFFFF" }, }, { } ], series: [ { name: '峰电', type: 'bar', // tooltip: { // valueFormatter: function (value) { // return value + '%'; // } // }, data: [ 22, 12, 12, 23, 25, 15, 17, 16, 32, 20, ], stack: 'sum', label: { show: true, formatter: '{c} %', padding:5, }, itemStyle: { barBorderRadius: 5, borderWidth: 3, opacity: 0.5, borderColor:"#A35200", }, barCategoryGap: "46%", } , { name: '平电', type: 'bar', // tooltip: { // valueFormatter: function (value) { // return value + ' %'; // } // }, data: [ 16, 19, 10, 16, 18, 17, 15, 12, 18, 18, ], stack: 'sum', label: { show: true, formatter: '{c} %', padding:5, }, itemStyle: { opacity: 0.5, barBorderRadius: 5, borderWidth: 3 , borderColor:"#0A7FD2", }, barCategoryGap: "46%", }, , { name: '谷电', type: 'bar', // tooltip: { // valueFormatter: function (value) { // return value + ' %'; // } // }, data: [ 15, 9, 12, 16, 8, 17, 15, 12, 4, 8, ], stack: 'sum', label: { show: true, formatter: '{c} %', padding:5, }, itemStyle: { opacity: 0.5, barBorderRadius: 5, borderWidth: 3, borderColor:"#3BA854", }, barCategoryGap: "46%", } , { name: '总充冷时长', type: 'line', yAxisIndex: 1, tooltip: { valueFormatter: function (value) { return value + ' %'; } }, smooth:true, data: [20, 22, 33, 45, 63, 12, 20, 24, 23, 16, 12, 62] } ] }; this.BarOption2 = { color: ["#496EE6", "#7FD359", "#FFC832", "#F27475", "#17D9FF", "#C0DF3E", "#1FC5B6", "#1D98E5", "#17A966", "#FF7B32", "#FF575B", "#A958CB"], title: { text: '充冷机耗电量', textStyle:{ color: '#FFFFFF' }, }, legend: { // top: 'bottom', textStyle: { color: "#FFFFFF", fontSize: 12, fontFamily: "PingFangSC-Regular" }, orient: "vertical", right: 1, bottom: 52, }, series: [ { name: 'Nightingale Chart', type: 'pie', radius: [20, 100], center: ['50%', '50%'], roseType: 'area', itemStyle: { borderRadius: 8 }, data: [ {name: '一月', value: '49.8',label: { color: "#FFFFFF" }}, {name: '二月', value: '40.5',label: { color: "#FFFFFF" }}, {name: '三月', value: '40.1',label: { color: "#FFFFFF" }}, {name: '四月', value: '33.7',label: { color: "#FFFFFF" }}, {name: '五月', value: '40.6',label: { color: "#FFFFFF" }}, {name: '六月', value: '44.3',label: { color: "#FFFFFF" }}, {name: '七月', value: '42.7',label: { color: "#FFFFFF" }}, {name: '八月', value: '32.6',label: { color: "#FFFFFF" }}, {name: '九月', value: '37.0',label: { color: "#FFFFFF" }}, {name: '十月', value: '49.0',label: { color: "#FFFFFF" }}, {name: '十一月', value: '46.9',label: { color: "#FFFFFF" }}, {name: '十二月', value: '39.8',label: { color: "#FFFFFF" }} ] } ] };
实例四
this.BarOption1 = { color:["#A35200", "#0A7FD2", "#3BA854", "#6DB9D9",], title: { text: '充冷机电费', textStyle:{ color: '#FFFFFF' }, }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { textStyle: { color: "#FFFFFF" }, }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true , tooltip: { textStyle: { color: "rgba(143, 38, 38, 1)" } } }, xAxis: [ { type: 'category', data: [ '1', '2', '3', '4', '5', '6', '7','8','9','10', '11', '12', '13', '14', '15', '16', '17','18','19','20', '21', '22', '23', '24', '25', '26', '27','28','29','30', ], axisLabel: { color: '#FFFFFF' } }, ], yAxis: [ { type: 'value', axisLabel: { color: '#FFFFFF', interval: 30 }, splitArea: { interval: 6 }, nameTextStyle: { color: "#FFFFFF" }, name: "电费(￥)" } ], series: [ { name: '峰电费', type: 'bar', emphasis: { focus: 'series' }, stack:"总量", data:data_f, barWidth: 10, itemStyle:{ barBorderRadius: 15, }, }, { name: '平电费', type: 'bar', stack:"总量", emphasis: { focus: 'series' }, barWidth: 10, itemStyle:{ barBorderRadius: 15, }, data: data_p, }, { name: '谷电费', type: 'bar', stack:"总量", emphasis: { focus: 'series' }, itemStyle:{ barBorderRadius: 15, }, barCategoryGap: "58%", barWidth: 10, data: data_g }, , { name: '总电费', type: 'line', smooth:true, symbol: 'circle', //设定为实心点 symbolSize: 11, data: data_z, itemStyle: { borderColor: "#FFFFFF", }, } ] }; this.BarOption2 = { title: { text: '峰平谷电费分析', top: 10, left: 10, textStyle:{ color: '#FFFFFF' }, }, tooltip: { trigger: 'item' }, // legend: { // type: 'scroll', // bottom: 10, // data: (function () { // var list = []; // for (var i = 1; i <= 28; i++) { // list.push(i + 2000 + ''); // } // return list; // })() // }, visualMap: { top: 'middle', right: 10, color:[ "#6DB9D9", "#3BA854", "#0A7FD2", "#A35200",], calculable: true }, radar: { indicator: [ { text: '8:00-11:00', max: 400 }, { text: '0:00-8:00', max: 400 }, { text: '22:00-24:00', max: 400 }, { text: '17:00-22:00', max: 400 }, { text: '11:00-17:00', max: 400 } ], axisLine: { symbol: "circle" } }, series: (function () { var series = []; for (var i = 1; i <= 28; i++) { series.push({ type: 'radar', symbol: 'none', lineStyle: { width: 1 }, emphasis: { areaStyle: { color: 'rgba(0,250,0,0.3)' } }, data: [ { value: [ (40 - i) * 10, (38 - i) * 4 + 60, i * 5 + 10, i * 9, (i * i) / 2 ], name: i + 2000 + '' } ] }); } return series; })() };
实例五
this.BarOption1 = { title: { text: '当月故障次数：159次', top: 10, left: 10, textStyle:{ color: '#FFFFFF' }, }, xAxis: { type: 'category', boundaryGap: false, data: [ '1', '2', '3', '4', '5', '6', '7','8','9','10', '11', '12', '13', '14', '15', '16', '17','18','19','20', '21', '22', '23', '24', '25', '26', '27','28','29','30',], axisLabel: { color: "#FFFFFF", }, }, yAxis: { type: 'value', axisLabel: { formatter: '{value}', color: "#FFFFFF" }, nameTextStyle: { color: "#FFFFFF" }, name: '故障次数(次)', axisLine: { show: true }, axisTick: { show: true }, lineStyle: { color: "rgba(173, 62, 62, 1)" } }, series: [ { data: [ 20, 32, 11, 34, 29, 30, 12,19, 10, 12, 10, 22, 21, 30, 19, 35, 22,18, 14, 18, 21, 32, 31, 24, 29, 33, 12,17, 10, 19, ], type: 'line', smooth:true, scale: false, symbol: "none", areaStyle: { // 填充色渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#393C49" }, { offset: 0.5, color: "#4C4249" }, { offset: 1, color: "#4C4249" } ]) }, lineStyle: { // color: "#1562AA", // 填充色渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#393C49" }, { offset: 0.5, color: "#1562AA" }, { offset: 1, color: "#1562AA" } ]) }, } ] }; var myColor = ["#496EE6", "#7FD359", "#FFC832", "#F27475", "#17D9FF", "#C0DF3E", "#1FC5B6", "#1D98E5", "#17A966", "#FF7B32"]; this.BarOption2 = { title: { text: '充冷机故障次数排名', textStyle:{ color: '#FFFFFF' }, }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, // legend: {}, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { type: 'category', data: ['GLJ001', 'GLJ002', 'GLJ003', 'GLJ004', 'GLJ005', 'GLJ006', 'GLJ007', 'GLJ008', 'GLJ009', 'GLJ010'], axisLabel: { color: "#FFFFFF" }, }, series: [ { name: '2011', type: 'bar', data: [ 18, 23, 24, 17, 13, 15,14, 18, 19, 25, ], // 修改第一组柱子的圆角 itemStyle: { barBorderRadius: 20, // 此时的color 可以修改柱子的颜色 color: function(params) { // params 传进来的是柱子对象 // console.log(params); // dataIndex 是当前柱子的索引号 return myColor[params.dataIndex]; } }, // 柱子之间的距离 barCategoryGap: 50, //柱子的宽度 barWidth: 10, // 显示柱子内的文字 label: { show: true, position: "inside", // {c} 会自动的解析为 数据 data里面的数据 formatter: "{c}次" } } ] };
实例六
this.BarOption1 = { // color:["#A35200", "#0A7FD2", "#3BA854", "#6DB9D9",], title: { text: '箱体出租率分析', textStyle:{ color: '#FFFFFF' }, }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { textStyle: { color: "#FFFFFF" }, show:false, }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true , tooltip: { textStyle: { color: "rgba(143, 38, 38, 1)" } } }, xAxis: [ { type: 'category', data: [ '1', '2', '3', '4', '5', '6', '7','8','9','10', '11', '12', '13', '14', '15', '16', '17','18','19','20', '21', '22', '23', '24', '25', '26', '27','28','29','30', ], axisLabel: { color: '#FFFFFF' } }, ], yAxis: [ { type: 'value', axisLabel: { color: '#FFFFFF', interval: 30 }, splitArea: { interval: 6 }, nameTextStyle: { color: "#FFFFFF" }, name: "箱体出租率(%)" } ], series: [ { name: '峰电费', type: 'bar', emphasis: { focus: 'series' }, stack:"总量", data:data_f, barWidth: 10, itemStyle:{ barBorderRadius: [15,15,0,0], // // 填充色渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#3DB1D9" }, { offset: 0.5, color: "#3DB1D9" }, { offset: 1, color: "#19283C" } ]) }, label: { show: true, formatter: "{c}%", position: "outside", color: "#FFFFFF" }, }, ] }; var myColor = ["#496EE6", "#7FD359", "#FFC832", "#F27475", "#17D9FF", "#C0DF3E", "#1FC5B6", "#1D98E5", "#17A966", "#FF7B32"]; this.BarOption2 = { title: { text: '箱体月出租率', textStyle:{ color: '#FFFFFF' }, }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, // legend: {}, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01], show: true, data: [ '0', '20', '40', '60', '80', '100', ], }, yAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月','十一月','十二月'], axisLabel: { color: "#FFFFFF" }, inverse: true, }, series: [ { name: '2011', type: 'bar', data: [ 18, 23, 24, 17, 13, 15,14, 18, 19, 25,15, 19, 23, ], // 修改第一组柱子的圆角 itemStyle: { barBorderRadius: 20, // 此时的color 可以修改柱子的颜色 // // 填充色渐变 color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ { offset: 0, color: "#60227C" }, { offset: 0.5, color: "#60227C" }, { offset: 1, color: "#19283C" } ]) }, // 柱子之间的距离 barCategoryGap: 50, //柱子的宽度 barWidth: 10, // 显示柱子内的文字 label: { show: true, position: "right", // {c} 会自动的解析为 数据 data里面的数据 formatter: "{c}%", color: "#FFFFFF" }, } ] };
