gengx
This commit is contained in:
@@ -26,7 +26,7 @@
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-card class="box-card" style="border: none">
|
||||
<div id="Echart_1">
|
||||
<div ref="echart1" style="width:300px;height:300px">
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -155,12 +155,18 @@
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- eChart 图-->
|
||||
<div style="margin-top: 23px;margin-left: 40px">
|
||||
<el-card style="border: none">
|
||||
<div id="echart_2" style="width: 20vw;height: 30vh">
|
||||
<div style="margin-top: 23px;margin-left: 40px;">
|
||||
<el-card style="border: none;height:450px">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="日期统计" name="first">日期统计</el-tab-pane>
|
||||
<el-tab-pane label="月度统计" name="second">月度统计</el-tab-pane>
|
||||
<el-tab-pane label="年度统计" name="third">年度统计</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div ref="echart2" style="width: 20vw;height: 30vh">
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
<el-button @click="test()"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -177,6 +183,10 @@ Vue.prototype.$echarts = echarts;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
Myechart1:'',
|
||||
Myechart2:'',
|
||||
Myoption1:{},
|
||||
Myoption2:{},
|
||||
userTotal:null,
|
||||
projectTotal:null,
|
||||
loginTime:'',
|
||||
@@ -184,6 +194,18 @@ export default {
|
||||
CategoryTotal:'',
|
||||
CommentTotal:'',
|
||||
AdminTotal:'',
|
||||
// 日期目录：
|
||||
datecate:[],
|
||||
// 月份目录:
|
||||
Moncate:[],
|
||||
// 年份目录：
|
||||
Yearcate:[],
|
||||
// 日期折线单元：
|
||||
dateLine:[],
|
||||
// 月份折线单元：
|
||||
monLine:[],
|
||||
// 年份折线单元：
|
||||
yearLine:[],
|
||||
date:[],
|
||||
Month:[],
|
||||
Year:[],
|
||||
@@ -191,6 +213,14 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initEchart(){
|
||||
// var that = this;
|
||||
// that.Myechart1 = that.$echarts.init(that.$refs.echart1);
|
||||
// that.Myechart2 = that.$echarts.init(that.$refs.echart2);
|
||||
},
|
||||
test(){
|
||||
this.getProjectByTime();
|
||||
},
|
||||
getAdminLoginTime(){
|
||||
var that=this;
|
||||
axios({
|
||||
@@ -229,6 +259,7 @@ export default {
|
||||
}
|
||||
}).then((res)=>{
|
||||
that.projectTotal=res.data;
|
||||
console.log(that.projectTotal);
|
||||
});
|
||||
},
|
||||
getArticleTotal(){
|
||||
@@ -297,200 +328,101 @@ export default {
|
||||
that.date=res.data.Date;
|
||||
that.Month=res.data.Month;
|
||||
that.Year=res.data.Year;
|
||||
console.log(that.date)
|
||||
Object.keys(that.date).forEach(key=>{
|
||||
that.datecate.push(that.date[key]['date']);
|
||||
let num = parseInt(that.date[key]['num']);
|
||||
let datefac = {"value":num,"date":that.date[key]['date'],"type":"line"};
|
||||
console.log(datefac);
|
||||
that.dateLine.push(datefac);
|
||||
})
|
||||
console.log(that.dateLine);
|
||||
console.log(that.datecate);
|
||||
});
|
||||
},
|
||||
eChartPic1(){
|
||||
var myChart =this.$echarts.init(document.getElementById('echart_2'));
|
||||
const cols = ['#3BDBDB', '#6CEBEB', '#C2FFFF', '#FFFFFF']
|
||||
var data = this.date;
|
||||
var data2 = this.Month;
|
||||
var data3 = this.Year;
|
||||
var xData = [],
|
||||
yData = [], xData2 = [],
|
||||
yData2 = [], xData3 = [],
|
||||
yData3 = [];
|
||||
data.map(function (a) {
|
||||
xData.push(a.date);
|
||||
yData.push(a.num);
|
||||
});
|
||||
data2.map(function (a) {
|
||||
xData2.push(a.date);
|
||||
yData2.push(a.num);
|
||||
});
|
||||
data3.map(function (a) {
|
||||
xData3.push(a.date);
|
||||
yData3.push(a.num);
|
||||
});
|
||||
|
||||
let unit = '个'
|
||||
var option = {
|
||||
// backgroundColor: '#FFF',
|
||||
animation: false,
|
||||
// 按日期折线图：
|
||||
var that = this;
|
||||
that.Myoption1 = {
|
||||
//dataZoom-inside 内置型数据区域缩放组件 所谓内置 1平移：在坐标系中滑动拖拽进行数据区域平移。2缩放：PC端：鼠标在坐标系范围内滚轮滚动（MAC触控板类同;移动端：在移动端触屏上，支持两指滑动缩放。
|
||||
dataZoom: [{
|
||||
type: 'inside', //1平移 缩放
|
||||
throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
|
||||
minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
|
||||
start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
|
||||
end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
|
||||
zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
|
||||
}],
|
||||
// 主要用来控制图表四周留白
|
||||
grid: {
|
||||
top: '4%',
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true,
|
||||
left: '15%',
|
||||
top: '10%',
|
||||
},
|
||||
// 提示框组件
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: '#FFF',
|
||||
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
|
||||
backgroundColor: '#377CFF', //提示框浮层的背景颜色。
|
||||
axisPointer: { //去掉移动的指示线
|
||||
type: 'none'
|
||||
},
|
||||
// 自定义提示框内容
|
||||
formatter: function (params) {
|
||||
var text = params[0].data.date + ': ' + params[0].data.value
|
||||
return text;
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
},
|
||||
//直角坐标系 grid 中的 x 轴，
|
||||
xAxis: {
|
||||
type: 'category', //'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
|
||||
// 坐标轴轴线相关设置
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#8c8c8c',
|
||||
color: '#E5E5E5', // 坐标轴线线的颜色。
|
||||
}
|
||||
},
|
||||
// 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置
|
||||
axisLabel: {
|
||||
// 是否显示坐标刻度标签(这了指是否显示x轴上的月份)
|
||||
show: true,
|
||||
// 标签文字的颜色
|
||||
color: '#999'
|
||||
},
|
||||
//x轴刻度线设置
|
||||
axisTick: {
|
||||
show: false,
|
||||
alignWithLabel: true,
|
||||
"show": false
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
data: xData,
|
||||
// 类目数据，在类目轴（type: 'category'）中有效。
|
||||
data: that.datecate,
|
||||
},
|
||||
],
|
||||
yAxis: [{
|
||||
name: '数量(' + unit + ')',
|
||||
type: 'value',
|
||||
// max: this.setCeil(this.tz_filetransfer_dTotal),
|
||||
// interval: this.setCeil(this.tz_filetransfer_dTotal)/10,//间隔
|
||||
// min: 0,
|
||||
//直角坐标系 grid 中的 y 轴，
|
||||
yAxis: {
|
||||
type: 'value', //'value' 数值轴，适用于连续数据。
|
||||
// 坐标轴轴线相关设置
|
||||
axisLine: {
|
||||
show: false //y轴线消失
|
||||
},
|
||||
// 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: 'rgba(255, 255, 255,.8)',
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#8c8c8c',
|
||||
}
|
||||
// 标签文字的颜色
|
||||
color: '#999'
|
||||
},
|
||||
//y轴刻度线设置
|
||||
axisTick: {
|
||||
show: false,
|
||||
alignWithLabel: true,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#888888',
|
||||
},
|
||||
"show": false
|
||||
},
|
||||
splitNumber: 5, //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整.在类目轴中无效。
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside', //无滑动条内置缩放 type: 'slider', //缩放滑动条
|
||||
show: true, //开启
|
||||
// yAxisIndex: [0], //Y轴滑动
|
||||
// xAxisIndex: [0],//X轴滑动
|
||||
start: 1, //初始化时，滑动条宽度开始标度
|
||||
end: 10, //初始化时，滑动条宽度结束标度
|
||||
},
|
||||
],
|
||||
series: [{
|
||||
name: '数量',
|
||||
type: 'line',
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: cols[1],
|
||||
},
|
||||
itemStyle: {
|
||||
color: cols[1],
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||
offset: 0.4,
|
||||
color: 'rgba(194, 255, 255,0.1)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(108, 235, 235,0.9)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
series: that.dateLine,
|
||||
};
|
||||
that.Myechart1.setOption(that.Myoption1,true);
|
||||
// 图表大小变动从新渲染，动态自适应
|
||||
},
|
||||
eChartPic2(){
|
||||
|
||||
},
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
}
|
||||
myChart.setOption(option);
|
||||
//图表大小变动从新渲染，动态自适应
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
myChart.resize({
|
||||
width: 647,
|
||||
height: 147
|
||||
});
|
||||
let lastdiff = 0
|
||||
myChart.on('dataZoom', function (params) {
|
||||
let start = params.batch[0].start
|
||||
let end = params.batch[0].end
|
||||
let diff = end - start
|
||||
// mircodiff > 1，说明是放大而不是拖拽
|
||||
let mircodiff = Math.abs(diff - lastdiff)
|
||||
if (diff < 30 && mircodiff > 1) {
|
||||
// 放大之后的操作
|
||||
let option = myChart.getOption()
|
||||
|
||||
// option.xAxis[0].axisLabel.rotate = 0 // 当缩放程度小于40的时候让字体倾斜为0
|
||||
|
||||
option.xAxis[0].data = xData;
|
||||
|
||||
option.series[0].data = yData;
|
||||
|
||||
myChart.clear()
|
||||
myChart.setOption(option, true)
|
||||
|
||||
} else if (diff > 50 && mircodiff > 1) {
|
||||
// 放大之后的操作
|
||||
let option = myChart.getOption()
|
||||
|
||||
// option.xAxis[0].axisLabel.rotate = 0 // 当缩放程度小于40的时候让字体倾斜为0
|
||||
|
||||
option.xAxis[0].data = xData2;
|
||||
|
||||
option.series[0].data = yData2;
|
||||
|
||||
myChart.clear()
|
||||
myChart.setOption(option, true)
|
||||
}
|
||||
if (diff >= 80 && mircodiff > 1) {
|
||||
// 缩小回去的操作
|
||||
let option = myChart.getOption()
|
||||
// option.xAxis[0].axisLabel.rotate = 50 // 当缩放程度大于40的时候让字体开始倾斜
|
||||
|
||||
option.xAxis[0].data = xData3;
|
||||
|
||||
option.series[0].data = yData3;
|
||||
|
||||
myChart.clear()
|
||||
myChart.setOption(option, true)
|
||||
}
|
||||
lastdiff = diff;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 初始化Echart
|
||||
|
||||
mounted() {
|
||||
this.getUserTotal();
|
||||
this.getProjectTotal();
|
||||
@@ -500,8 +432,9 @@ export default {
|
||||
this.getAdminTotal();
|
||||
this.getCategoryTotal();
|
||||
this.getProjectByTime();
|
||||
this.Myechart1 = this.$echarts.init(this.$refs.echart1);
|
||||
this.Myechart2 = this.$echarts.init(this.$refs.echart2);
|
||||
this.eChartPic1();
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user