先看效果图
上代码
数值是我瞎写了一点,不要在意,自己改改就好,总体是这么个效果
<template>
<div>
<!-- 图表 -->
<div style="height:400px;margin-top:70px">
<div ref="topechart" style="height:100%;width:100%"></div>
</div>
</div>
</template>
<script>
//引入mixins文件
import mymixins from "@/utils/mixins/mixins.js"
export default {
data(){
return{
//开始和结束时间
aa:"2020-09-07",
bb:"2020-09-19"
}
},
//混入mixins文件。调用getAll方法
mixins:[mymixins],
mounted(){
//把起始结束日期放进去,计算出中间所有日期
let timearr = this.getAll(this.aa,this.bb)
//参数传给echarts图渲染出来X轴
let box=["jul-20","Aug-20","sep-20","Oct-20","Nov-20","Dec-20","jan-21","Feb-21","Mar-21","Apr-21","May-21","Jun-21","jul-21"]
//需要后面的动态生成,前面的数据固定,所以我把日期添加进去box数组,然后把box当参数传给图表渲染X轴刻度信息
box.push(...timearr)
//挂载后直接渲染图表,并传递参数。
this.topGraph(box)
},
methods:{
//柱状图
topGraph(timearr) {
var myChart = this.$echarts.init(this.$refs["topechart"]);
var option = {
//柱状图颜色三个对应颜色
color:['#d48265', '#91c7ae','#749f83'],
title: {
//title
text: "同吋口检测对比",
//title的位置
padding: [5,30,50,150],
},
//鼠标经过显示的小提示
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
//选项
legend: {
data: ['7#检测数量', '8#检测数量', '9#检测数量','7#Upper', '8#Upper', '9#Upper']
},
xAxis: [
{
//类目轴
type: 'category',
//X轴刻度信息,用的变量
data: timearr,
//X轴文字倾斜角度
axisLabel: {
interale: 0, //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签
rotate: -90, //设置日期显示样式(倾斜度) 90度是竖着的
},
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{ //左边Y轴数字
type: 'value',
min: 0,
max: 300,
interval: 50,
axisLabel: {
formatter: '{value} '
}
},
{ //右边Y轴数字
type: 'value',
//最小0开始,最大到300
min: 0,
max: 300,
interval: 50,
axisLabel: {
formatter: '{value} '
}
}
],
series: [
{ //柱状图三个 type:bar意思是柱状图
name: '7#检测数量',
type: 'bar',
//图的数据
data: [0,0,0,0,0,0,0,0,0,127,128,122,124,216,313,134,153,161,114,22,45,62,71]
},
{
name: '8#检测数量',
type: 'bar',
data: [0,0,0,0,0,0,0,0,0,113,224,125,126,121,122,125,126,127,128,122]
},
{
name: '9#检测数量',
type: 'bar',
data: [0,0,0,0,0,0,0,0,0,113,224,125,126,121,122,125,126,127,128,122]
},
{ //线性图三个 type:line意思是线型图
name: '7#Upper',
type: 'line',
yAxisIndex: 1,
data: [113,224,25,126,21,122,125,126,27,28,12,12,216,313,134,153,11,14,22,45,62,71,84,22,42,61]
},
{
name: '8#Upper',
type: 'line',
yAxisIndex: 1,
data: [113,224,125,126,121,12,125,126,127,128,122,124,26,33,134,13,161,114,22,5,62,71,84,22,42,61]
},
{
name: '9#Upper',
type: 'line',
yAxisIndex: 1,
data: [113,224,125,126,121,122,125,16,127,128,22,124,26,3,134,153,161,114,22,145,62,1,84,22,42,61]
}
]
};
//初始化表格
myChart.setOption(option);
//监听,根据视口变化动态从新渲染表格
window.addEventListener("resize", function () {
myChart.resize();
});
},
}
}
</script>
<style>
</style>
那echarts如何让一个日期区间能自动排开,把每天的日期自动放到X轴上呢
我是封装成了mixins文件。混入进去的,因为很多的图表都要用到的。这样方便。
上代码:只需要创建mixins.js文件。然后看上面的代码,按照我这样引入调用就行。
调用方法简单:
let timearr = this.getAll("2020-09-07","2020-09-19")
//当然这个括号内你可以放开始和结束日期的变量。这样timearr可以log看一下,他就是日期区间的每天日期了。然后你可以用这个timearr当参数传给echarts图表,用来当作X轴的data参数用,就可以自动生成区间了。
export const mymixins={
//用于echarts表日期区间自动排列开每天
methods:{
getAll(begin, end) {
let arr1 = begin.split("-"); //这里可以换成/ 就2020/01/1 这种
let arr2 = end.split("-");
let arr1_ = new Date();
let arrTime = [];
arr1_.setUTCFullYear(arr1[0], arr1[1] - 1, arr1[2]);
let arr2_ = new Date();
arr2_.setUTCFullYear(arr2[0], arr2[1] - 1, arr2[2]);
let unixDb = arr1_.getTime();
let unixDe = arr2_.getTime();
for (let k = unixDb; k <= unixDe;) {
arrTime.push(this.datetimeparse(k, 'YY-MM-DD'));
k = k + 24 * 60 * 60 * 1000;
}
return arrTime;
},
// 时间格式处理
datetimeparse(timestamp, format, prefix) {
if (typeof timestamp == 'string') {
timestamp = Number(timestamp)
};
//转换时区
let currentZoneTime = new Date(timestamp);
let currentTimestamp = currentZoneTime.getTime();
let offsetZone = currentZoneTime.getTimezoneOffset() / 60; //如果offsetZone>0是西区,西区晚
let offset = null;
//客户端时间与服务器时间保持一致,固定北京时间东八区。
offset = offsetZone + 8;
currentTimestamp = currentTimestamp + offset * 3600 * 1000
let newtimestamp = null;
if (currentTimestamp) {
if (currentTimestamp.toString().length === 13) {
newtimestamp = currentTimestamp.toString()
} else if (currentTimestamp.toString().length === 10) {
newtimestamp = currentTimestamp + '000'
} else {
newtimestamp = null
}
} else {
newtimestamp = null
};
let dateobj = newtimestamp ? new Date(parseInt(newtimestamp)) : new Date()
let YYYY = dateobj.getFullYear()
let MM = dateobj.getMonth() > 8 ? dateobj.getMonth() + 1 : '0' + (dateobj.getMonth() + 1)
let DD = dateobj.getDate() > 9 ? dateobj.getDate() : '0' + dateobj.getDate()
let HH = dateobj.getHours() > 9 ? dateobj.getHours() : '0' + dateobj.getHours()
let mm = dateobj.getMinutes() > 9 ? dateobj.getMinutes() : '0' + dateobj.getMinutes()
let ss = dateobj.getSeconds() > 9 ? dateobj.getSeconds() : '0' + dateobj.getSeconds()
let output = '';
let separator = '/'
if (format) {
separator = format.match(/-/) ? '-' : '/'
output += format.match(/yy/i) ? YYYY : ''
output += format.match(/MM/) ? (output.length ? separator : '') + MM : ''
output += format.match(/dd/i) ? (output.length ? separator : '') + DD : ''
output += format.match(/hh/i) ? (output.length ? ' ' : '') + HH : ''
output += format.match(/mm/) ? (output.length ? ':' : '') + mm : ''
output += format.match(/ss/i) ? (output.length ? ':' : '') + ss : ''
} else {
output += YYYY + separator + MM + separator + DD
}
output = prefix ? (prefix + output) : output
return newtimestamp ? output : ''
}
}
}
export default mymixins