Skip to content

D
dsk-cr20g
Commit 58c194b1 authored by danfuman's avatar danfuman
Browse files
Options

修改

parent fa04e11f
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 285 deletions
dsk-operate-ui/src/layout/components/AppMain.vue
View file @ 58c194b1
...@@ -43,7 +43,7 @@ export default { ...@@ -43,7 +43,7 @@ export default {
.app-main { .app-main {
/* 84 = navbar + tags-view = 50 + 34 */ /* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 68px); min-height: calc(100vh - 68px);
min-width:1440px; min-width:1240px;
background: #F5F5F5; background: #F5F5F5;
overflow: initial; overflow: initial;
} }
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/jzqyfx.vue
View file @ 58c194b1
...@@ -225,10 +225,7 @@ ...@@ -225,10 +225,7 @@
} }
}, },
created() { created() {
setTimeout(() => { this.getAreaGroupByProvince()
this.isSkeleton=false;
this.getData()
}, 1000);
var date = new Date() var date = new Date()
var year = date.getFullYear() var year = date.getFullYear()
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth()+ 1 var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth()+ 1
...@@ -274,9 +271,13 @@ ...@@ -274,9 +271,13 @@
total=total+this.jzglData[i].count total=total+this.jzglData[i].count
} }
this.total=total; this.total=total;
this.$nextTick(() => {
this.initChart()
})
this.initChart()
}) })
},
getCertGroupByMajorProvinceLevel(){
certGroupByMajorProvinceLevel().then(res => { certGroupByMajorProvinceLevel().then(res => {
this.dqData=res.data; this.dqData=res.data;
let data=this.dqData[0].province; let data=this.dqData[0].province;
...@@ -305,9 +306,15 @@ ...@@ -305,9 +306,15 @@
list.push(item) list.push(item)
} }
this.jzdqData=list this.jzdqData=list
this.initChart1() this.$nextTick(() => {
this.initChart1()
})
}) })
},
getAreaGroupByProvince(){
areaGroupByProvince().then(res => { areaGroupByProvince().then(res => {
this.isSkeleton=false;
this.zbData=res.data; this.zbData=res.data;
//定义一个变量 保存数据 因为sort方法排序会改变原数组 使用JSON方法深拷贝 将原数值暂存 //定义一个变量 保存数据 因为sort方法排序会改变原数组 使用JSON方法深拷贝 将原数值暂存
// let dataArr = JSON.parse(JSON.stringify(res.data)) // let dataArr = JSON.parse(JSON.stringify(res.data))
...@@ -321,300 +328,311 @@ ...@@ -321,300 +328,311 @@
this.rankList=data; this.rankList=data;
//将原数组数据赋值回去 保持数据不变 //将原数组数据赋值回去 保持数据不变
// this.zbData = JSON.parse(JSON.stringify(dataArr)) // this.zbData = JSON.parse(JSON.stringify(dataArr))
this.initChart2() this.$nextTick(() => {
this.initChart2()
})
this.getData()
this.getCertGroupByMajorProvinceLevel()
}) })
}, },
initChart() { initChart() {
let myChart = echarts.init(document.getElementById("gl-echarts")) this.$nextTick(() => {
let option ={ let myChart = echarts.init(document.getElementById("gl-echarts"))
tooltip: { let option ={
// show:false tooltip: {
}, // show:false
xAxis: { },
type: 'category', xAxis: {
boundaryGap: false, type: 'category',
data: this.jzglData.map(item => item.levelValue), boundaryGap: false,
}, data: this.jzglData.map(item => item.levelValue),
yAxis: { },
type: 'value', yAxis: {
}, type: 'value',
grid: { },
top:40, grid: {
left:70, top:40,
right:40, left:70,
bottom:40, right:40,
}, bottom:40,
series: [ },
{ series: [
data: this.jzglData.map(item => item.count), {
type: 'line', data: this.jzglData.map(item => item.count),
smooth: true, type: 'line',
emphasis: { smooth: true,
disabled: true, emphasis: {
focus: 'none' disabled: true,
}, focus: 'none'
//设置折线颜色和粗细 },
lineStyle: { //设置折线颜色和粗细
width: 1, lineStyle: {
color: "#0081FF", width: 1,
}, color: "#0081FF",
itemStyle:{ },
color: "#4E8EFF", itemStyle:{
}, color: "#4E8EFF",
//设置面积区域为渐变效果 },
areaStyle: { //设置面积区域为渐变效果
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [ areaStyle: {
{ color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
offset: 0.2, {
color: "#DFEAFF", offset: 0.2,
}, color: "#DFEAFF",
{ },
offset: 1, {
color: "#5895FF", offset: 1,
}, color: "#5895FF",
]), },
}, ]),
} },
] }
} ]
myChart.clear(); //图表清除 }
myChart.setOption(option); myChart.clear(); //图表清除
window.addEventListener("resize", function () { myChart.setOption(option);
myChart.resize();//图表跟随页面大小变化宽度 window.addEventListener("resize", function () {
}); myChart.resize();//图表跟随页面大小变化宽度
});
})
}, },
initChart1() { initChart1() {
let myChart = echarts.init(document.getElementById("jzqy-echarts")) this.$nextTick(() => {
let option ={ let myChart = echarts.init(document.getElementById("jzqy-echarts"))
legend: { let option ={
x:'right', legend: {
padding:[0,30,0,0], x:'right',
}, padding:[0,30,0,0],
tooltip: { },
trigger: 'axis', tooltip: {
axisPointer: { trigger: 'axis',
type: 'line', axisPointer: {
label: { type: 'line',
backgroundColor: '#FFFFFF' label: {
backgroundColor: '#FFFFFF'
}
} }
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.jzdqData.map(item => item.province),
},
yAxis: {
type: 'value',
},
grid: {
top:35,
left:60,
right:30,
bottom:20,
},
series: [
{
data: this.jzdqData.map(item => item.tjCount),
name:'特级',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#0081FF",
},
itemStyle:{
color: "#4E8EFF",
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#DFEAFF",
},
{
offset: 1,
color: "#5895FF",
},
]),
},
}, },
{ xAxis: {
data: this.jzdqData.map(item => item.oneCount), type: 'category',
name:'一级', boundaryGap: false,
type: 'line', data: this.jzdqData.map(item => item.province),
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#FA6C6C",
},
itemStyle:{
color: "#FA6C6C",
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.1,
color: "#FDF8F5",
},
{
offset: 1,
color: "#FCD7C8",
},
]),
},
}, },
{ yAxis: {
data: this.jzdqData.map(item => item.twoCount), type: 'value',
name:'二级',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#8077F2",
},
itemStyle:{
color: "#8077F2",
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.1,
color: "#ECE8FF",
},
{
offset: 1,
color: "#BCC0FF",
},
]),
},
}, },
{ grid: {
data: this.jzdqData.map(item => item.threeCount), top:35,
name:'三级', left:60,
type: 'line', right:30,
smooth: true, bottom:20,
emphasis: { },
disabled: true, series: [
focus: 'none' {
data: this.jzdqData.map(item => item.tjCount),
name:'特级',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#0081FF",
},
itemStyle:{
color: "#4E8EFF",
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#DFEAFF",
},
{
offset: 1,
color: "#5895FF",
},
]),
},
}, },
//设置折线颜色和粗细 {
lineStyle: { data: this.jzdqData.map(item => item.oneCount),
width: 2, name:'一级',
color: "#FA936C", type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#FA6C6C",
},
itemStyle:{
color: "#FA6C6C",
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.1,
color: "#FDF8F5",
},
{
offset: 1,
color: "#FCD7C8",
},
]),
},
}, },
itemStyle:{ {
color: "#FA936C", data: this.jzdqData.map(item => item.twoCount),
name:'二级',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#8077F2",
},
itemStyle:{
color: "#8077F2",
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.1,
color: "#ECE8FF",
},
{
offset: 1,
color: "#BCC0FF",
},
]),
},
}, },
//设置面积区域为渐变效果 {
areaStyle: { data: this.jzdqData.map(item => item.threeCount),
opacity:0.8, name:'三级',
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ type: 'line',
{ smooth: true,
offset: 0.1, emphasis: {
color: "#FEFBFA", disabled: true,
}, focus: 'none'
{ },
offset: 1, //设置折线颜色和粗细
color: "#FCD7C8", lineStyle: {
}, width: 2,
]), color: "#FA936C",
},
itemStyle:{
color: "#FA936C",
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.1,
color: "#FEFBFA",
},
{
offset: 1,
color: "#FCD7C8",
},
]),
},
}, },
}, ]
] }
} myChart.clear();
myChart.clear(); myChart.setOption(option);
myChart.setOption(option); window.addEventListener("resize", function () {
window.addEventListener("resize", function () { myChart.resize();//图表跟随页面大小变化宽度
myChart.resize();//图表跟随页面大小变化宽度 });
}); })
}, },
initChart2() { initChart2() {
let myChart = echarts.init(document.getElementById("ba-echarts")) this.$nextTick(() => {
let option ={ let myChart = echarts.init(document.getElementById("ba-echarts"))
tooltip: { let option ={
// show:false tooltip: {
}, // show:false
legend:{}, },
xAxis: { legend:{},
type: 'category', xAxis: {
boundaryGap: false, type: 'category',
data: this.zbData.map(item => item.province), boundaryGap: false,
}, data: this.zbData.map(item => item.province),
yAxis: { },
type: 'value', yAxis: {
}, type: 'value',
grid: { },
top:20, grid: {
left:65, top:20,
right:50, left:65,
bottom:20, right:50,
}, bottom:20,
series: [ },
{ series: [
data: this.zbData.map(item => item.count), {
type: 'line', data: this.zbData.map(item => item.count),
smooth: true, type: 'line',
emphasis: { smooth: true,
disabled: true, emphasis: {
focus: 'none' disabled: true,
}, focus: 'none'
//设置折线颜色和粗细 },
lineStyle: { //设置折线颜色和粗细
width: 1, lineStyle: {
color: "#FFAB44", width: 1,
}, color: "#FFAB44",
itemStyle:{ },
color: "#FFAB44", itemStyle:{
normal: { color: "#FFAB44",
label : {show: true}, normal: {
color:"#FFAB44", label : {show: true},
lineStyle: { color:"#FFAB44",
color: "#FFAB44" lineStyle: {
color: "#FFAB44"
}
} }
} },
}, //设置面积区域为渐变效果
//设置面积区域为渐变效果 areaStyle: {
areaStyle: { color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [ {
{ offset: 0.2,
offset: 0.2, color: "#FFEDD0",
color: "#FFEDD0", },
}, {
{ offset: 1,
offset: 1, color: "#FFC671",
color: "#FFC671", },
}, ]),
]), },
}, }
} ]
] }
} myChart.setOption(option);
myChart.setOption(option); window.addEventListener("resize", function () {
window.addEventListener("resize", function () { myChart.resize();//图表跟随页面大小变化宽度
myChart.resize();//图表跟随页面大小变化宽度 });
}); })
}, },
handleClick(type,index){ handleClick(type,index){
if(type === 1){ if(type === 1){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment