echarts常用实例

<!--门禁卡开门统计-->
<template>
<div class="openCardCountEle" style="height: 90%;width: 100%;padding: 4px;" v-loading="isLoading">
<div style="width: 100%;height: 100%;z-index: 0">
<div id="openCardCountEleID"></div>
</div>
</div>
</template><script>
import echarts from 'echarts';
import {getFileDetail30DaysTime} from 'api/viasadmin/arcgisMap/IntelDigCtrl';
import {openCardCount} from 'api/dashboard';
export default {
name: "openCardCountEle",
props:['curDAItem'],
data() {
return {
chart: null,
id: 'openCardCountEleID',
isLoading: false,
color: [
'#ff8463','#9bca62','#2ec7c9','#b6a2de','#5ab1ef',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
legendData: ['0:00-2:00', '2:00-4:00', '4:00-6:00', '6:00-8:00', '8:00-10:00', '10:00-12:00',
'12:00-14:00','14:00-16:00','16:00-18:00','18:00-20:00','20:00-22:00','22:00-24:00'],
seriesData:[],
// seriesData:[10, 52, 200, 334, 390, 330, 220],
};
},
beforeDestroy() {
if (!this.chart) {return false;}
this.chart.dispose();
this.chart = null;
},
beforeCreate(){},
created(){},
mounted() {
this.$nextTick(() => {
this.getList();
// this.initChart();
});
},
methods: {
getList(){
//获取上次的勾选记录
this.isLoading = true;
const param ={
archivesCode:this.curDAItem.archivesCode,
topNum:
}
getFileDetail30DaysTime(param).then(rsp=>{
this.isLoading = false;
if(rsp.status == && rsp.data){
this.seriesData = rsp.data;
} else {
this.seriesData =[];
}
this.initChart();
})
},
initChart() {
$("#openCardCountEleID").width($(".openCardCountEle").width());
$("#openCardCountEleID").height($(".openCardCountEle").height());
this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption({
color: this.color,
grid: {
left: '80px',
right: '50px',
top: '70px',
bottom:'30px', },
legend: {
data: ['感知次数'],
top: ,
textStyle:{color:'#E69142', fontWeight:'bold'},
},
title: {
text: '设备感知次数',
textStyle:{
fontSize: ,
fontWeight: "normal",
color: "#32DBEF"
}
},
tooltip: {
trigger: 'axis',
showDelay:,
},
xAxis: {
type: 'category',
data: this.legendData,
axisLine: {
lineStyle: {
color: '#fff',
width: ,//这里是为了突出显示加上的
},
},
splitLine: {
show: false,
lineStyle:{color: ['#2E65B1'], width: , type: 'solid'}
}
},
yAxis : [{
axisLine: {lineStyle: {color: '#fff', width: }},
type : 'value',
splitLine: {show: true, lineStyle:{color: ['#2E65B1'], width: , type: 'solid'}},
axisLabel: {show: true, textStyle: {color: '#fff'}}
}],
series : [
{
name:'感知次数',
type:'bar',
data:this.seriesData,
barMaxWidth: '',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(, , , , [{
offset: ,
color: "#FFCF68" // 0% 处的颜色
},{
offset: 0.5,
color: "#ff9333" // 100% 处的颜色
}, {
offset: ,
color: "#ff9333" // 100% 处的颜色
}], false)
}
}
}
]
},true); }
}
}
</script><style scoped></style>

<!--视频门禁-->
<template>
<div class="videoDoorCtrl" v-loading="isLoading">
<div class="videoDoorTitle">
<span class="title">视频门禁进出数据统计</span>
<span class="mapSelectBox">
<el-select class="selectCls" v-model="regionTypeVal" multiple collapse-tags @change="outInTypeChange">
<el-option v-for="item in AreaOptionList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</span>
</div>
<div style="width: 100%;height: 100%;z-index: 0">
<div :class="className" id="videoDoorID"></div>
</div>
</div>
</template><script>
import echarts from 'echarts';
import {doorCount} from 'api/viasadmin/arcgisMap/arcgisMap';
import {residentialAreaDoorList} from '../../../api/com'; export default {
name: "videoDoorCtrl",
props: {
className: { type: String, default: 'chart'},
id: { type: String, default: 'videoDoorID' },
},
data() {
return {
chart: null,
regionTypeVal:[],
outInTypeOpt:[{value:'',label:'出门'},{value:'',label:'入门'}],
isLoading:false,
color:[
'#ff8463','#9bca62','#2ec7c9','#b6a2de','#5ab1ef',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
legendData:[],
seriesData:[],
selected:{},
AreaOptionList:[],
param : {
esList:[], // 空的话默认查询全部
startDate:'', // 默认当天
endDate:''
}
};
},
beforeDestroy() {
if (!this.chart) {return false;}
this.chart.dispose();
this.chart = null;
},
beforeCreate(){},
created(){
this.getAreaList();
},
methods: {
getAreaList(){
const paramList = {};
let getLastSet=[];
if(window.localStorage.getItem("mapHomeVideoDoorSelectList")){
getLastSet = JSON.parse(window.localStorage.getItem("mapHomeVideoDoorSelectList"));
} //获取上次的勾选记录
this.isLoading = true;
residentialAreaDoorList(paramList).then(rsp =>{
this.isLoading = false;
if(rsp.status == ){
for(let i = ;i<rsp.result.length;i++){
this.AreaOptionList.push({'value': rsp.result[i].value, 'label': rsp.result[i].label});
}
if(getLastSet){
for(let i =;i<getLastSet.length;i++){
this.regionTypeVal.push(getLastSet[i].id);
this.param.esList.push({id:getLastSet[i].id})
}
}
} else {
this.AreaOptionList = [];
}
this.getChartData();
})
},
getChartData(){
doorCount(this.param).then(rsp => {
this.legendData = [];
this.seriesData= [];
this.selected= [];
if (rsp.status == ) {
for (let i = ; i < rsp.data.list.length; i++) {
this.legendData.push(rsp.data.list[i].esName);
this.seriesData.push({
name: rsp.data.list[i].esName,
type: 'line',
stack: '总量',
data: rsp.data.list[i].list
})
this.selected[rsp.data.list[i].esName] = i;
}
} else{
this.seriesData = [];
this.legendData = [];
this.selected = {};
}
this.initChart();
})
},
initChart() {
// $("#videoDoorID").width($(".videoDoorCtrl").width());
// $("#videoDoorID").height($(".videoDoorCtrl").height());
$("#videoDoorID").width($(window).width() * 0.20); // 和首页的initPage方法进行对应。
$("#videoDoorID").height(($(window).height()-)*0.25); this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption({
color: this.color,
grid: {
left: '50px',
right: '30px',
top: '50px',
bottom:'80px'
},
legend: {
type: 'scroll',
orient: 'horizontal',//vertical
right: ,
bottom: ,
data: this.legendData,
textStyle:{
color:'#E69142',
fontWeight:'bold'
},
pageTextStyle:{ //图例页信息的文字样式。
color:'#fff'
},
animation:true,
selected: this.selected,
pageIconColor: '#00FFFF', //翻页按钮的颜色。
pageIconInactiveColor:'#ADE5E5', // 翻页按钮不激活时（即翻页到头时）的颜色
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
showDelay:,
confine :true, //是否将 tooltip 框限制在图表的区域内
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00', '13:00',
'14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00'],
axisLine: {
lineStyle: {
color: '#fff',
width: ,//这里是为了突出显示加上的
}
},
splitLine: {
show: false,
lineStyle:{color: ['#666'], width: , type: 'solid'}
}
},
yAxis: {
type: 'value',
axisLine: {lineStyle: {color: '#fff', width: }},
splitLine: {
show: true,
lineStyle:{color: ['#666'], width: , type: 'solid'}
},
axisLabel: {show: true, textStyle: {color: '#fff'}
}
},
series: this.seriesData
},true); },
outInTypeChange(val){
this.regionTypeVal = val;
this.param.esList = [];
for(let i = ;i<this.regionTypeVal.length;i++){
this.param.esList.push({id:this.regionTypeVal[i]}); }
// 把勾选的结果保存到localstroage
window.localStorage.setItem("mapHomeVideoDoorSelectList",JSON.stringify(this.param.esList));
this.getChartData();
}
}
}
</script><style scoped>
.videoDoorCtrl {
color: #;
padding: 5px;
width: %;
height: %;
position: relative;
}
.videoDoorTitle {
position: absolute;
top: 5px;
z-index: ;
width: %;
}
.selectCls {
width: %;
border-radius: 6px;
float: right;
margin-right: 10px;
}
.videoDoorTitle .title{
color: #ffffff;
font-weight: ;
/*font-size: 15px;*/
font-size: .18rem;
margin-top: 8px;
display: inline-block;
}</style>

<!--辖区基础数据-->
<template>
<div style="margin: 2%;height: 100%;width: 100%;" class="communityPolice">
<el-carousel height="100%" :autoplay=false :interval = 1000*30>
<el-carousel-item>
<el-col :span="4">
<span style="display: inline-block;text-align: center;width: 100%;">今日告警<br/>总数：</span>
<span class="totalCls">
{{policeData.totalCount}}
</span>
</el-col>
<el-col :span="20">
<div class="chartsOutter" style="width: 98%;height: 100%;">
<div id="policID" style="width: 100%;"></div>
</div>
</el-col>
</el-carousel-item>
<el-carousel-item>
<el-col :span="4">
<span style="display: inline-block;text-align: center;width: 100%;">警情总数：</span>
<span class="totalCls">
{{warnDetilData.totalCount}}
</span>
</el-col>
<el-col :span="20">
<div class="chartsOutter" style="width: 98%;height: 100%;">
<div id="warnDetilID" style="width: 100%;"></div>
</div>
</el-col>
</el-carousel-item>
</el-carousel>
</div>
</template> <script>
import {communityCount,communityXQCount,communityXQWarnCount} from 'api/viasadmin/arcgisMap/arcgisMap';
import {filterFieldFun,curTimeFun} from 'filters/index';
import { mapGetters } from 'vuex';
import echarts from 'echarts'; export default {
name: "communityPolice",
data() {
return {
esListParam:[],
color:[
'#3CA45C','#EB6F13','#C9C438','#5BB7EC','#D882C3',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
listQueryWarn:{
startTime:'',
endTime:'',
esList:[]
},
warnDetilData:{
totalCount:'',
seriesData:[],
legendData:[],
},
listQueryPolice:{
endDate:'',
startDate:'',
esList:[]
},
policeData:{
totalCount:'',
seriesData:[],
legendData:[],
}
}
},
computed: {
...mapGetters([ 'mapGlobalCommunityIDGetter'])
},
watch: {
// 监听所选社区数据变化
mapGlobalCommunityIDGetter(val) {
this.listQueryPolice.esList = val;
this.getPoliceChartData();
},
},
created() {
let timeTodayStart = curTimeFun('1','-')+' 00:00:00';
let timeTodayEnd = curTimeFun('1','-')+' 23:59:59';
this.listQueryPolice.startDate = timeTodayStart;
this.listQueryPolice.endDate = timeTodayEnd;
this.listQueryWarn.startTime = timeTodayStart;
this.listQueryWarn.endTime = timeTodayEnd;
},
mounted() {
this.$nextTick(() => {
this.listQueryPolice.esList = this.$store.getters.mapGlobalCommunityIDGetter;
this.getPoliceChartData();
this.getWarnDetilChartData();
});
},
methods: {
getWarnDetilChartData(){ // 警情总数
communityXQWarnCount(this.listQueryWarn).then(rsp=>{
if(rsp.status == 200){
let total= 0;
this.warnDetilData.legendData = [];
this.warnDetilData.seriesData = [];
for(let i = 0;i<rsp.data.length;i++){
total +=rsp.data[i].policeCaseNum;
this.warnDetilData.legendData.push(rsp.data[i].policeCaseType);
this.warnDetilData.seriesData.push({
value:rsp.data[i].policeCaseNum,
name:rsp.data[i].policeCaseType
})
}
this.warnDetilData.totalCount = total;
this.initWainDetilChart();
}
})
},
initWainDetilChart() { // 警情总数
$("#warnDetilID").width($(window).width() * 0.20*0.9); // 和首页的initPage方法进行对应。
$("#warnDetilID").height(($(window).height()-80)*0.13);
this.chart = echarts.init(document.getElementById("warnDetilID"));
this.chart.setOption({
color: this.color,
tooltip : {trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)"},
grid: {top: '0px', bottom:'80px', right:'10px'},
legend: {
orient: 'vertical',
type: 'scroll',
left: 'right',
icon:'circle',
right: 30,
pageTextStyle:{color:'#fff'}, //图例页信息的文字样式。
textStyle:{color:'#fff',},
animation:true,
data: this.warnDetilData.legendData,
selected: this.policeData.legendData,
pageIconColor: '#00FFFF', //翻页按钮的颜色。
pageIconInactiveColor:'#ADE5E5', // 翻页按钮不激活时（即翻页到头时）的颜色
},
series : [{
name: '警情总数',
type: 'pie',
radius : '38%',
center: ['35%', '40%'],
data: this.warnDetilData.seriesData,
itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}},
label:{
normal:{
formatter: "{b}（{c}个）"
}
}
}]
},true);
},
getPoliceChartData(){ // 警情告警
communityXQCount(this.listQueryPolice).then(rsp=>{
if(rsp.status == 200){
this.policeData.totalCount = rsp.data.totalCount;
this.policeData.legendData = [];
this.policeData.seriesData = [];
for(let i = 0;i<rsp.data.list.length;i++){
this.policeData.legendData.push(filterFieldFun(rsp.data.list[i].alarmType,'alarmTypeGetter'));
this.policeData.seriesData.push({
value:rsp.data.list[i].alarmCount,
name:filterFieldFun(rsp.data.list[i].alarmType,'alarmTypeGetter')
})
}
this.initPolicChart();
}
})
},
initPolicChart() { // 今日告警 $("#policID").width($(window).width() * 0.20*0.9); // 和首页的initPage方法进行对应。
$("#policID").height(($(window).height()-80)*0.13);
this.chart = echarts.init(document.getElementById("policID"));
this.chart.setOption({
color: this.color,
tooltip : {trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)"},
grid: {top: '0px', bottom:'80px', right:'10px'},
legend: {
type: 'scroll',
orient: 'vertical',
icon:'circle',
left: 'right',
right: 30,
pageTextStyle:{color:'#fff'}, //图例页信息的文字样式。
textStyle:{color:'#fff',},
animation:true,
data: this.policeData.legendData,
selected: this.policeData.legendData,
pageIconColor: '#00FFFF', //翻页按钮的颜色。
pageIconInactiveColor:'#ADE5E5', // 翻页按钮不激活时（即翻页到头时）的颜色
},
series : [{
name: '今日告警总数',
type: 'pie',
radius : '38%',
center: ['35%', '40%'],
data: this.policeData.seriesData,
itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}},
label:{
normal:{
formatter: "{b}({c}个)"
}
}
}]
},true);
},
},
}
</script> <style rel="stylesheet/scss" lang="scss" scoped>
.el-col {
height: 100%;
}
.communityPolice td {
padding: 8px;
}
.communityPolice .tdnum {
color: #ff9333;
font-weight: 600
}
.communityPolice .totalCls {
display: inline-block;
text-align: center;
width: 100%;
font-size: 16px;
font-weight: 600;
background: #1b3a74;
border-radius: 100%;
height: 30px;
color: yellow;
line-height: 30px;
margin-top: 10px;
}
</style>