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