|
@@ -0,0 +1,390 @@
|
|
|
+<template>
|
|
|
+ <div :id="chartId" class="linechart">
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import echarts from "echarts";
|
|
|
+import moment from "moment"
|
|
|
+export default {
|
|
|
+ props:{
|
|
|
+ chartId:String,
|
|
|
+ chartDate:{
|
|
|
+ default:null
|
|
|
+ },
|
|
|
+ xType:String,
|
|
|
+ normalChart:{
|
|
|
+ type:Boolean,
|
|
|
+ default:false,
|
|
|
+ },
|
|
|
+ weekNormalChart:{
|
|
|
+ type:Boolean,
|
|
|
+ default:false,
|
|
|
+ },
|
|
|
+ numberChart:{
|
|
|
+ type:Boolean,
|
|
|
+ default:false,
|
|
|
+ },
|
|
|
+ yType:{
|
|
|
+ type:String,
|
|
|
+ default:"rate"
|
|
|
+ },
|
|
|
+ sjChartType:{
|
|
|
+ type:String
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ chartInit:null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.$once("hook:beforeDestroy", () => {
|
|
|
+ if (this.chartInit) {
|
|
|
+ this.chartInit.clear();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ moment,
|
|
|
+ showChartInfo(divId, infoStr="暂无数据"){
|
|
|
+ let msgOption = {
|
|
|
+ title: {
|
|
|
+ show: true,
|
|
|
+ textStyle:{
|
|
|
+ color:'grey',
|
|
|
+ fontSize:14
|
|
|
+ },
|
|
|
+ text: infoStr,
|
|
|
+ left: 'center',
|
|
|
+ top: 'center'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ series: []
|
|
|
+ };
|
|
|
+ this.chartInit= echarts.init(document.getElementById(divId));
|
|
|
+ this.chartInit.hideLoading()
|
|
|
+ this.chartInit.setOption(msgOption)
|
|
|
+ },
|
|
|
+ initDayTime(value){
|
|
|
+ value =value.slice(4,6)+'-'+ value.slice(6,8)
|
|
|
+ return value
|
|
|
+ },
|
|
|
+ initHourTime(value){
|
|
|
+ value =value.slice(0,2)+':'+ value.slice(2,4)
|
|
|
+ return value
|
|
|
+ },
|
|
|
+ drawChart(id = this.chartId,data={}){
|
|
|
+ if(!data||!Object.keys(data).length){
|
|
|
+ this.showChartInfo(id);
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let that=this;
|
|
|
+ this.chartInit&&(this.chartInit=null)
|
|
|
+ this.chartInit= echarts.init(document.getElementById(id));
|
|
|
+ let dataX;
|
|
|
+ if(this.xType=="day"){
|
|
|
+ dataX=data.date||[];
|
|
|
+ }else if(this.xType=="hour"){
|
|
|
+ dataX=data.time||[];
|
|
|
+ }else{
|
|
|
+ dataX=data.floorName||[];
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
|
|
+ type: '' // 默认为直线,可选为:'line' | 'shadow'
|
|
|
+ },
|
|
|
+ formatter: params=> {
|
|
|
+ var showHtm="";
|
|
|
+ let name = params[0].name;
|
|
|
+
|
|
|
+ if(this.xType&&this.xType!=="floor"){
|
|
|
+ name = this.xType=="day"?this.initDayTime(params[0].name):this.initHourTime(params[0].name)
|
|
|
+ }
|
|
|
+ for(var i=0;i<params.length;i++){
|
|
|
+ //名称
|
|
|
+ var text = params[i].marker +params[i].seriesName;
|
|
|
+ //值
|
|
|
+ var value = (params[i].value || '--');
|
|
|
+ value = this.yType=="rate"?(value!=='--'?((value*100).toFixed(1)+'%'):'--'):value;
|
|
|
+ showHtm+= text+ ':' + value +'<br>'
|
|
|
+ }
|
|
|
+ showHtm =`${name}<br/>${showHtm}`;
|
|
|
+ return showHtm;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "50",
|
|
|
+ right: "50",
|
|
|
+ bottom: "30",
|
|
|
+ top:"7",
|
|
|
+ borderColor:'#E9E9E9',
|
|
|
+ },
|
|
|
+ color: ['#0091FF','#FFFFFF','#F9908B'],
|
|
|
+ animation:false,
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ // boundaryGap: false,
|
|
|
+ data: dataX,
|
|
|
+ axisTick:{
|
|
|
+ show:false
|
|
|
+ },
|
|
|
+ interval:0,
|
|
|
+ axisLine:{
|
|
|
+ lineStyle:{
|
|
|
+ color:'#D9D9D9',
|
|
|
+ // width:8,//这里是为了突出显示加上的
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color:'#848484',
|
|
|
+ interval:0,
|
|
|
+ fontSize:11,
|
|
|
+ formatter:(value)=>{
|
|
|
+ if(this.xType=="hour"&&value.endsWith("0000")){
|
|
|
+ return value.slice(0,2)+':'+value.slice(2,4)
|
|
|
+ }else if(this.xType=="hour"&&!value.endsWith("0000")){
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ if(this.xType=="day"){
|
|
|
+ return value.slice(4,6)+'-'+value.slice(6,8)+'\n'+'周'+this.getWeek(moment(value).format('E'))
|
|
|
+ }else{
|
|
|
+ return value
|
|
|
+ }
|
|
|
+ // !this.normalChart&&(value = value*100+'%');
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ position:'left',
|
|
|
+ axisLabel: {
|
|
|
+ color:'#848484',
|
|
|
+ fontSize:12,
|
|
|
+ formatter:(value)=>{
|
|
|
+ if(!this.normalChart&&!this.numberChart){
|
|
|
+ value = value*100+'%'
|
|
|
+ }
|
|
|
+ return value
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle:{
|
|
|
+ color: ['#E9E9E9'],
|
|
|
+ width: 1,
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nameTextStyle:{
|
|
|
+ color:'#848484'
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: this.yType=="rate"?'偏冷占比':'偏冷数量',
|
|
|
+ type: 'bar',
|
|
|
+ stack: '达标率',
|
|
|
+ data: this.yType=="rate"?data.coldProprotion:data.coldSpaceNum,
|
|
|
+ barWidth: '50%',
|
|
|
+ barMaxWidth:'50'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: this.yType=="rate"?'达标占比':'达标数量',
|
|
|
+ data: this.yType=="rate"?data.normalProprotion:data.normalSpaceNum,
|
|
|
+ stack: '达标率',
|
|
|
+ type: 'bar',
|
|
|
+ itemStyle: {
|
|
|
+ barBorderColor: '#D6DADF',
|
|
|
+ },
|
|
|
+ barWidth: '50%',
|
|
|
+ barMaxWidth:'50',
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: (this.yType=="rate"&&this.xType=='day'||(this.sjChartType))?true:false,
|
|
|
+ position: 'inside',
|
|
|
+ color:"#1F2329",
|
|
|
+ formatter: (params)=>{
|
|
|
+ return !params.value?'':`${parseInt(params.value*100)}%`;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: this.yType=="rate"?'偏热占比':'偏热数量',
|
|
|
+ stack: '达标率',
|
|
|
+ data: this.yType=="rate"?data.hotProprotion:data.hotSpaceNum,
|
|
|
+ type: 'bar',
|
|
|
+ barMaxWidth:'50',
|
|
|
+ barWidth: '50%',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ if(this.normalChart){
|
|
|
+ let normalDatex=["<=23","23~24","24~25","25~26","26~27",">27"]
|
|
|
+ option.xAxis.data=normalDatex;
|
|
|
+ option.grid.top="45"
|
|
|
+ option.title={
|
|
|
+ subtext: '空间数量'
|
|
|
+ }
|
|
|
+ option.series=[];
|
|
|
+ option.series=[
|
|
|
+ {name: '空间数量',
|
|
|
+ type: 'bar',
|
|
|
+ stack: '达标率',
|
|
|
+ color:"#82c7fc",
|
|
|
+ barWidth: '30%',
|
|
|
+ data: data[0]?[data[0].oneSpaceNum,data[0].twoSpaceNum,data[0].threeSpaceNum,data[0].fourSpaceNum,data[0].fiveSpaceNum,data[0].sixSpaceNum]:[]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ if(this.weekNormalChart){
|
|
|
+ let normalDatex=["≥90%","80%~90%","70%~80%","<70%"];
|
|
|
+ option.xAxis.data=normalDatex;
|
|
|
+ option.xAxis.name="达标区间";
|
|
|
+ option.yAxis.show=false;
|
|
|
+ // option.grid.top="45"
|
|
|
+ option.title={
|
|
|
+ subtext: '空间数量'
|
|
|
+ }
|
|
|
+ option.grid= {
|
|
|
+ top:"18",
|
|
|
+ left: "50",
|
|
|
+ right: "65",
|
|
|
+ bottom: "30",
|
|
|
+ };
|
|
|
+ option.series=[];
|
|
|
+ option.series=[
|
|
|
+ {name: '空间数量',
|
|
|
+ type: 'bar',
|
|
|
+ stack: '数量',
|
|
|
+ color:"#82c7fc",
|
|
|
+ barWidth: '30%',
|
|
|
+ itemStyle: {
|
|
|
+ //通常情况下:
|
|
|
+ normal:{
|
|
|
+ //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
|
|
|
+ color: function (params){
|
|
|
+ var colorList = ['#0091FF','#0091FF','#0091FF','#0091FF'];
|
|
|
+ return colorList[params.dataIndex];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //鼠标悬停时:
|
|
|
+ emphasis: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ color:"#1F2329",
|
|
|
+ formatter: (params)=>{
|
|
|
+ return `${parseInt(params.value)}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ data: data?[data.oneSpaceNum,data.twoSpaceNum,data.threeSpaceNum,data.foureSpaceNum]:[]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ if(this.numberChart){
|
|
|
+ option.grid.top="22"
|
|
|
+ option.title={
|
|
|
+ top:-13,
|
|
|
+ left:0,
|
|
|
+ subtext: '空间数量'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(this.sjChartType){
|
|
|
+ if(this.sjChartType=="regions"){
|
|
|
+ let normalDatex=["内区","外区"];
|
|
|
+ option.xAxis.data=normalDatex;
|
|
|
+ }
|
|
|
+ if(this.sjChartType=="orientation"){
|
|
|
+ let normalDatex=["东","南","西","北"];
|
|
|
+ option.xAxis.data=normalDatex;
|
|
|
+ }
|
|
|
+ if(this.sjChartType=="localtion" || this.sjChartType=="freshAir" ){
|
|
|
+ let normalDatex=data.objectName;
|
|
|
+ option.xAxis.data=normalDatex;
|
|
|
+ }
|
|
|
+ option.yAxis.show=false;
|
|
|
+ option.grid= {
|
|
|
+ left: "0",
|
|
|
+ right: "0",
|
|
|
+ bottom: "30",
|
|
|
+ top:"7",
|
|
|
+ borderColor:'#E9E9E9',
|
|
|
+ };
|
|
|
+ }
|
|
|
+ this.chartInit.setOption(option);
|
|
|
+ window.addEventListener("resize",function(){
|
|
|
+ that.chartInit.resize();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getWeek (week) {
|
|
|
+ switch (Number(week)) {
|
|
|
+ case 1:
|
|
|
+ return '一'
|
|
|
+ case 2:
|
|
|
+ return '二'
|
|
|
+ case 3:
|
|
|
+ return '三'
|
|
|
+ case 4:
|
|
|
+ return '四'
|
|
|
+ case 5:
|
|
|
+ return '五'
|
|
|
+ case 6:
|
|
|
+ return '六'
|
|
|
+ case 7:
|
|
|
+ return '日'
|
|
|
+ default:
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ chartDate:{
|
|
|
+ handler(newval){
|
|
|
+ if (this.chartInit) {
|
|
|
+ this.chartInit.clear();
|
|
|
+ }
|
|
|
+ this.chartDate=newval;
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.drawChart(this.chartId,this.chartDate)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deep:true,
|
|
|
+ immediate: true,
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.linechart{
|
|
|
+ width: 100%;
|
|
|
+ height: 240px;
|
|
|
+}
|
|
|
+</style>
|