- 饼状图扩大图例
配置代码
export const YYSFL = function(data) { return { color: ['#1FD0A3', '#0FA7E9', '#FFC929', '#F2775A', '#EF5350'], tooltip: { trigger: 'item' }, title: { show: true, //显示策略，默认值true,可选为：true（显示） | false（暗藏） text: '55%', //主题目文本，'\n'指定换行 link: '', //主题目文本超链接,默认值true target: null, //指定窗口关上主题目超链接，反对'self' | 'blank'，不指定等同为'blank'（新窗口） subtext: '公开饮用水', //副标题文本，'\n'指定换行 sublink: '', //副标题文本超链接 subtarget: null, //指定窗口关上副标题超链接，反对'self' | 'blank'，不指定等同为'blank'（新窗口） x: 'center', //程度安放地位，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） y: 'center', //垂直安放地位，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px） textAlign: null, //程度对齐形式，默认依据x设置主动调整，可选为： left' | 'right' | 'center backgroundColor: 'rgba(0,0,0,0)', //题目背景色彩，默认'rgba(0,0,0,0)'通明 borderColor: '#ccc', //题目边框色彩,默认'#ccc' borderWidth: 0, //题目边框线宽，单位px，默认为0（无边框） padding: 5, //题目内边距，单位px，默认各方向内边距为5，承受数组别离设定上右下右边距 itemGap: 10, //主副标题纵向距离，单位px，默认为10 textStyle: { //主题目文本款式{"fontSize": 18,"fontWeight": "bolder","color": "#333"} // fontFamily: 'Arial, Verdana, sans...', fontSize: 30, fontStyle: 'normal', fontWeight: 'bold', color: '#4A4A4A' } }, legend: { top: 55, // left: 'right', right: 10, icon: 'circle', itemWidth: 10, itemHeight: 7, //批改icon图形大小 bottom: 0, align: 'left', orient: 'vertical', textStyle:{ rich:(function(){ const colors = ['#1FD0A3', '#0FA7E9', '#FFC929', '#F2775A', '#EF5350'] return ["a","b","c","d","e"].reduce((temp,item,index)=>{ temp[item]={ color:colors[index] } return temp },{}) })() }, formatter: function(name) { const dt={ 'Ⅰ类':{ value:+data[0].value, prefix:"a" }, 'Ⅱ类':{ value:+data[1].value, prefix:"b" }, 'Ⅲ类':{ value:+data[2].value, prefix:"c" }, 'Ⅳ类':{ value:+data[3].value, prefix:"d" }, 'Ⅴ类':{ value:+data[3].value, prefix:"e" }, }; return name+"{"+dt[name].prefix+"| "+dt[name].value+"}" }, }, grid: { top: '20%', left: '1%', right: '15%', bottom: '5%', containLabel: true }, series: [ { name: 'xxx', type: 'pie', radius: ['60%', '80%'], avoidLabelOverlap: false, label: { show: false, position: 'outside', formatter: '{b}: {d}%', fontSize: 14 }, emphasis: { label: { show: false, fontSize: '40', fontWeight: 'bold' } }, labelLine: { show: true }, data: data } ] }}仪表盘定制
import * as echarts from 'echarts';export const ecologyStaticConfig = { grid:{ bottom:'15%' }, series: [{ type: 'gauge', startAngle: 180, endAngle: 0, min: 0, max: 1, splitNumber: 8, radius:'200%', center:['50%','100%'], axisLine: { lineStyle: { width: 3, color: [ [0.25, '#FF6E76'], [0.5, '#FDDD60'], [0.75, '#58D9F9'], [1, '#7CFFB2'] ] } }, pointer: { // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', // width: 10, icon:"triangle", length: '20%', width: 5, offsetCenter: [-18, '-30%'], itemStyle: { borderWidth: 3, color:'#1FD0A3', // borderColor:"#0FA7E9" } }, anchor: { show: true, showAbove: true, size: 10, offsetCenter: [0, '-30%'], itemStyle: { borderWidth: 3, color:'#fff', borderColor:"#0FA7E9" } }, axisTick: { splitNumber:1, show:true, length: 6, lineStyle: { color: 'auto', width: 2 } }, splitLine: { show:false, length: 20, lineStyle: { color: 'auto', width: 5 } }, axisLabel: { show:true, color: '#464646', fontSize: 12, distance: 0, formatter: function (value) { if (value === 0.875) { return '优'; } else if (value === 0.625) { return '中'; } else if (value === 0.375) { return '良'; } else if (value === 0.125) { return '差'; } } }, title: { offsetCenter: [0, '20%'], fontSize: 14 }, detail: { fontSize: 14, offsetCenter: [0, '-5%'], valueAnimation: true, formatter: function (value) { let level = '优'; if(value<0.125){ level='差' }else if(value<0.375){ level='良' }else if(value<0.625){ level='中' }else { level = '优'; } return '综合评级' + level + '分'; }, color: 'auto' }, data: [{ value: 0.70, }] }]};- 区间柱状图
import * as echarts from 'echarts';export const fileStaticConfig = { tooltip: { trigger: 'axis' }, color:["#8543E0","#FFC929","#40C567","#0FA7E9","#1FD0A3"], legend: { data: ['林地', '建设', "草地", "农田", "未利用"], top:5, left: 'right', textStyle: { color: "#4A4A4A" }, icon: "circle", itemWidth: 10, itemHeight: 7, //批改icon图形大小 bottom: 0 }, title:{ text: '', textStyle:{ fontFamily:'Microsoft yahei', //字体 fontSize:15, //大小 color:'#000', opacity: 0.75, } }, grid: { left: '2%', right: '6%', top: "20%", bottom: '0%', containLabel: true }, xAxis: { type: 'category', boundaryGap: true, axisLine: { lineStyle: { color: '#000', width: 1, opacity: 0.65, // type: "dashed" //这里是坐标轴的宽度 } }, axisLabel: { interval:0, rotate:40 }, data: ['2016','2017','2018','2019','2020','2021'] }, yAxis: { type: 'value', name:'面积', axisLine: { lineStyle: { color: '#000', width: 1, opacity: 0.15, type: "dashed" //这里是坐标轴的宽度 } }, splitLine: { show: true, lineStyle:{ type:'dashed' } } }, series: [ { name: '林地', type: 'bar', stack: 'one', barWidth: 15, data: [80, 81, 82, 83, 84, 85] }, { name: '建设', type: 'bar', stack: 'one', barWidth: 15, data: [20, 21, 22, 23, 24, 25] }, { name: '草地', type: 'bar', stack: 'one', barWidth: 15, data: [10, 11, 12, 13, 14, 15] }, { name: '农田', type: 'bar', stack: 'one', barWidth: 15, data: [40, 41, 42, 43, 44, 45] }, { name: '未利用', type: 'bar', stack: 'one', barWidth: 15, data: [10, 11, 12, 13, 14, 15] } ]}- 高低柱状图
export const option = { tooltip: { trigger: 'axis' }, color:["#0FA7E9"], title:{ text: '', textStyle:{ fontFamily:'Microsoft yahei', //字体 fontSize:15, //大小 color:'#000', opacity: 0.75, } }, grid: { left: '2%', right: '6%', top: "10%", bottom: 60, containLabel: true }, xAxis: { type: 'category', boundaryGap: true, axisLine: { lineStyle: { color: '#000', width: 1, opacity: 0.65, // type: "dashed" //这里是坐标轴的宽度 } }, axisLabel: { interval:0, rotate:40 }, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, yAxis: { type: 'value', name:'AQI', max:300, axisLine: { lineStyle: { color: '#000', width: 1, opacity: 0.15, type: "dashed" //这里是坐标轴的宽度 } }, splitLine: { show: true, lineStyle:{ type:'dashed' } } }, series: [ { areaStyle: { opacity: 0.8 }, barWidth: 15, data: [100, 146, 146, 165, { value: 220, }, 200, 190, 150, 140, 130, 110, 100], type: 'bar', markPoint: { symbolSize: 0, label: { color: '#0FA7E9', fontWeight: 'bold', position: 'top' }, data: [ {type: 'max', name: '最大值'} ] } } ]}饼状图突变和间隔调整
export const SLMJ = { // color: ['#1FD0A3', '#dedede'], tooltip: { trigger: 'item' }, title: { show: true, //显示策略，默认值true,可选为：true（显示） | false（暗藏） text: '69.65%', //主题目文本，'\n'指定换行 link: '', //主题目文本超链接,默认值true target: null, //指定窗口关上主题目超链接，反对'self' | 'blank'，不指定等同为'blank'（新窗口） subtext: '森林覆盖率', //副标题文本，'\n'指定换行 sublink: '', //副标题文本超链接 subtarget: null, //指定窗口关上副标题超链接，反对'self' | 'blank'，不指定等同为'blank'（新窗口） x: '30%', //程度安放地位，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） y: 'center', //垂直安放地位，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px） textAlign: 'center', //程度对齐形式，默认依据x设置主动调整，可选为： left' | 'right' | 'center backgroundColor: 'rgba(0,0,0,0)', //题目背景色彩，默认'rgba(0,0,0,0)'通明 borderColor: '#ccc', //题目边框色彩,默认'#ccc' borderWidth: 0, //题目边框线宽，单位px，默认为0（无边框） padding: 5, //题目内边距，单位px，默认各方向内边距为5，承受数组别离设定上右下右边距 itemGap: 10, //主副标题纵向距离，单位px，默认为10 textStyle: { //主题目文本款式{"fontSize": 18,"fontWeight": "bolder","color": "#333"} // fontFamily: 'Arial, Verdana, sans...', fontSize: 30, fontStyle: 'normal', fontWeight: 'bold', color: '#4A4A4A' } }, legend: { show: false, top: 55, // left: 'right', right: 50, icon: 'circle', itemWidth: 10, itemHeight: 7, //批改icon图形大小 bottom: 0, align: 'left', orient: 'vertical' }, grid: { top: '20%', left: '1%', right: '15%', bottom: '5%', containLabel: true }, series: [ { name: '森林面积', type: 'pie', radius: ['60%', '70%'], center: ['30%', '50%'], // 外圆的地位 avoidLabelOverlap: false, label: { show: false, position: 'outside', formatter: '{b}: {d}%', fontSize: 14 }, emphasis: { label: { show: false, fontSize: '40', fontWeight: 'bold' } }, data: [ { value: 20, name: '秦岭天然林面积', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#1FD0A3' // 0% 处的色彩 }, { offset: 1, color: '#0FA7E9' // 100% 处的色彩 } ] } }, labelLine: { show: true } }, { value: 8, name: 'Ⅱ类', itemStyle: { color: "#dedede"}} ] } ]}- 区域折线图
配置：
import * as echarts from 'echarts'//水质达标率export const SZDBL = { tooltip: { trigger: 'axis', formatter:'{c}%' }, color: ['#1FD0A3'], title: { text: '', x: 10, y: 0, textStyle: { fontFamily: 'Microsoft yahei', //字体 fontSize: 15, //大小 color: '#000', opacity: 0.75 } }, grid: { top: '20%', left: '5%', right: '5%', bottom: '5%', containLabel: true }, xAxis: { type: 'category', boundaryGap: true, interval:0, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, yAxis: { type: 'value', name: '%', splitLine: { show: true, lineStyle: { type: 'dashed' } } }, series: [ { areaStyle: { opacity: 0.8 }, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: ' rgba(31, 208, 163, 0.61)' }, { offset: 1, color: 'rgba(31, 208, 163, 0)' } ]) } }, data: [36, 46, 54, 63, 75, 84], type: 'line', areaStyle: {} } ]}日历组件
<template> <a-card title="月度城市蓝天日历预测" style="width: 100%;height: 100%;"> <div class="aCard-content" style="height: 40vh;"> <div class="lengend"> <div v-for="(item,index) in lengend" :key="index" style="margin-right: 10px;"> <span :class="['lengend-circle',item.color]"></span> <span>{{item.name}}</span> </div> </div> <div> <div class="top-title">{{time}}</div> <div style="padding:10px;"> <div class="day-title"> <div v-for="(item,index) in dayTitle" class="day-item" :key="index">{{item}}</div> </div> <div class="day-content"> <div v-for="(item,index) in day" :key="index" :class="['day-item',!item.inval?'color'+item.status:'',item.isCurrent?'today':'']"> <a-tooltip placement="top"> <template slot="title"> <span>{{item|filterStatus}}</span> </template> {{item.name}} </a-tooltip> </div> </div> </div> </div> <!-- <fileCharts /> --> </div> </a-card></template><script> import { getAction } from '@/api/manage' const lengends = [ { key: "1", color: "color1", name: "优Ⅰ" }, { color: "color2", key: "2", name: "良Ⅱ" }, { color: "color3", key: "3", name: "轻度净化Ⅲ" }, { color: "color4", key: "4", name: "重度净化Ⅳ" }, { color: "color5", key: "5", name: "重大净化Ⅴ" }, ]; export default { name: 'MonitoringMeans', data() { return { time: new Date().format("yyyy年MM月"), lengend: lengends, dayTitle: ["一", "二", "三", "四", "五", "六", "日"], day: [], dayStatus: { 1: { status: "1" }, 2: { status: "1" }, 3: { status: "1" }, 4: { status: "1" }, 5: { status: "4" }, 6: { status: "5" }, 7: { status: "1" }, } } }, mounted() { this.getCurrentDays(); }, filters: { 'filterStatus': function (val) { if (val.inval) { return val.name } else { let lengend = lengends.filter(item => item.key == val.status); return lengend && lengend[0] && ("空气质量：" + lengend[0].name) } } }, methods: { getCurrentDays() { var date = new Date();//以后日期 var year = date.getFullYear();//当年 var month = date.getMonth() + 1;//当月 var firstDayOfMonth = (new Date(`${year}/${month}/01`)).getDay();//判断当月1号的星期值 var currentMonthDays = (new Date(year, month, 0)).getDate();//当月天数 var beforeMonthDays = (new Date(year, month - 1, 0)).getDate();//上月天数 var currentDay = date.getDate();//以后日期 var preDay = (firstDayOfMonth - 1 + 7) % 7;//右边补充的天数 var beforeDay = []//true代表有效 for (let i = 1; i <= preDay; i++) { beforeDay.push({ name: beforeMonthDays - preDay + i, inval: true }) } var afterDay = [], currentDays = []; for (let i = 0; i < 42 - currentMonthDays - preDay; i++) { afterDay.push({ name: i + 1, inval: true }) } //天气 for (let i = 0; i < currentMonthDays; i++) { currentDays.push({ name: i + 1, // inval: preDay >= i + 1 ? false : true, inval: currentDay+5 >= i + 1 ? false : true, isCurrent: currentDay == i + 1, status: (this.dayStatus[i] && this.dayStatus[i].status) || "1" }) } this.day = beforeDay.concat(currentDays).concat(afterDay) //设置空气质量 const that = this; getAction("/data/airAqi/aqiRecodeMonth",{month:new Date().format("yyyy-MM")}).then((res) => { if(res.success){ res.result.forEach(aqiItem => { that.day = that.day.map(item => { if(Number(item.name)===Number(aqiItem.dayTime.substr(8,2)) && item.inval===false){ item.status = aqiItem.weatherData } return item; }) }); } }) } } }</script><style scoped> .top-title { height: 32px; background: #FFFFFF; border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; text-align: center; font-size: 14px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 900; color: rgba(0, 0, 0, 0.85); line-height: 32px; margin-bottom: 10px; } .aCard-content { padding: 16px; /* border: 1px solid #e8e8e8; */ } .lengend { display: grid; grid-template-columns: 60px 60px 100px 100px 100px; margin: 0px 10px 10px 10px; } .lengend div:nth-child(5) { width: 100px; } .card-title { display: flex; flex: 1; } .peoblem-title { height: 50px; width: 110px; margin: 0px 5px; padding: 2px 0 0 10px; border-radius: 4px; } .lengend-circle { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 8px; } .color1 { background-color: #1FD0A3; color: #fff; } .color2 { background-color: #0FA7E9; color: #fff; } .color3 { background-color: #FFC929; color: #fff; } .color4 { background-color: #F2775A; color: #fff; } .color5 { background-color: #EF5350; color: #fff; } .day-title { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 10px; justify-items: center; grid-gap: 10px; } .day-content { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); text-align: center; grid-gap: 10px; justify-items: center; } .day-item { width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; } .today { border: 2px solid #F2775A; }</style>