- 饼状图扩大图例
配置代码
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>