vue:2.6; "echarts": "^5.2.0",
<template>
<div :class="className" :style="{height:height,width:width}" id="myChartZyzfwsc" />
</template>
<script>
import * as echarts from 'echarts';
import resize from '@/utils/resize.js'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '24vw'
},
height: {
type: String,
default: '28vh'
},
chartData: {
type: Array,
required: true
}
},
data() {
return {
timer: 0,
date: '',
weekList: [],
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOption(val)
}
},
},
mounted() {
this.initChart();
},
beforeDestroy() {
},
methods: {
initChart() {
//获取一周日期
this.getWeekDataList();
var myChart = echarts.init(document.getElementById('myChartZyzfwsc'));
var option = {
animation: false,
tooltip: {
trigger: 'item',
formatter: '{b}:{c}'
},
grid: {
left: 40,
right: 15,
botom: 10,
top: 35
},
legend: {
show: false,
},
xAxis: {
type: 'category',
boundaryGap: ['0', '5%'],
// boundaryGap: false,
splitLine: {
show: false
},
axisLabel: {
color: "#8590A4",
textStyle: {
fontSize: 12,
},
interval: 0, //坐标全部显示
},
/*网格线*/
axisLine: {
// 轴线
show: true,
lineStyle: {
color: "#56678D", //y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
width: 1, //y轴线的宽度
type: "solid" //y轴线为实线
},
// color: '#268C8C',
},
data: this.weekList
},
yAxis: {
type: 'value',
name: '单位/小时',
nameTextStyle: {
color: "#8590A4",
fontSize: 12,
},
boundaryGap: false,
min: 0,
max: 2500,
splitNumber: 5,
axisTick: {
// 轴刻度
show: false,
},
axisLabel: {
color: "#8590A4",
textStyle: {
fontSize: 12,
fontWeight: 400,
},
},
splitLine: {
// 网格线
show: true,
lineStyle: { //分割线
color: "#30436D",
width: 1,
type: "dashed" //dotted:虚线 solid:实线
}
},
axisLine: {
// 轴线
show: false,
lineStyle: {
color: "#fff", //y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
width: 1, //y轴线的宽度
type: "solid" //y轴线为实线
},
},
},
series: [{
name: '志愿者服务时长阴影',
type: 'bar',
data: [2500, 2500, 2500, 2500, 2500, 2500, 2500],
barWidth: '40',
z:"-1",
barGap: '-78%',
itemStyle: {
normal: {
opacity: 0.8,
// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,分别表示右,下,左,上。例如(0,0,0,1)表示从正上开始向下渐变;如果是(1,0,0,0),则是从正右开始向左渐变。
// 相当于在图形包围盒中的百分比,如果最后一个参数传 true,则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 255, 255, 0.1)' //指0%处的颜色
}, {
offset: 1,
color: 'rgba(255, 255, 255, 0.1)' //指100%处的颜色
}], false)
}
},
},
{
name: '志愿者服务时长',
type: 'bar',
data: [600, 1400, 1600, 1650, 1200, 1100, 1400],
barWidth: '23',
itemStyle: {
normal: {
opacity: 0.8,
// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,分别表示右,下,左,上。例如(0,0,0,1)表示从正上开始向下渐变;如果是(1,0,0,0),则是从正右开始向左渐变。
// 相当于在图形包围盒中的百分比,如果最后一个参数传 true,则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(3, 114, 229)' //指0%处的颜色
}, {
offset: 1,
color: 'rgb(75, 175, 252)' //指100%处的颜色
}], false)
}
},
},
]
};
myChart.setOption(option);
// window.addEventListener('resize', myChart.resize);
window.addEventListener('resize', function() {
myChart.resize()
})
},
//获取当日日期
getNowDate() {
const timeOne = new Date()
const year = timeOne.getFullYear()
let month = timeOne.getMonth() + 1
let day = timeOne.getDate()
month = month < 10 ? '0' + month : month
day = day < 10 ? '0' + day : day
const NOW_MONTHS_AGO = `${year}-${month}-${day}`
return NOW_MONTHS_AGO
},
// 获取当前一周日期
getWeekDataList() {
//获取当前日期
this.getNowDate();
this.date = this.getNowDate();
console.log(this.date, 'currentData')
//根据日期获取本周周一~周日的年-月-日
var weeks = [];
var date = new Date(this.date);
//判断本日期是否为周日,获取本周一日期
if (date.getDay() == "0") {
date.setDate(date.getDate() - 6);
} else {
date.setDate(date.getDate() - date.getDay() + 1);
}
var myDate = date.getDate();
var myMonth = date.getMonth() + 1;
if (date.getDate() < 10) {
myDate = '0' + myDate;
}
if (date.getMonth() + 1 < 10) {
myMonth = '0' + myMonth;
}
// weeks.push(date.getFullYear() + "-" + myMonth + "-" + myDate);
weeks.push(myMonth + "-" + myDate);
// 获取周二以后日期
for (var i = 0; i < 6; i++) {
date.setDate(date.getDate() + 1);
myDate = date.getDate();
myMonth = date.getMonth() + 1;
if (date.getDate() < 10) {
myDate = '0' + myDate;
}
if (date.getMonth() + 1 < 10) {
myMonth = '0' + myMonth;
}
// weeks.push(date.getFullYear() + "-" + myMonth + "-" + myDate);
weeks.push(myMonth + "-" + myDate);
}
this.weekList = weeks;
console.log(this.weekList, 'weekList')
// return weeks
},
}
}
</script>