Skip to content

D
dsk-cr20g
Commit 9ea13f0e authored by danfuman's avatar danfuman
Browse files
Options

修改

parent a3f35339
Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 177 deletions
dsk-operate-ui/src/views/custom/overview/index.vue
View file @ 9ea13f0e
...@@ -207,11 +207,7 @@ ...@@ -207,11 +207,7 @@
hzqkList:[], hzqkList:[],
creditLevel:[], creditLevel:[],
chartDom: '', chartDom: '',
myChart: '',
option: '',
chartDom1: '', chartDom1: '',
myChart1: '',
option1: '',
pageNum:1, pageNum:1,
pageSize:10, pageSize:10,
recordlist:[], recordlist:[],
...@@ -234,19 +230,7 @@ ...@@ -234,19 +230,7 @@
this.getFollowList() this.getFollowList()
}, },
mounted(){ mounted(){
this.$nextTick(()=>{
this.chartDom = document.getElementById("hzqk-echarts")
this.myChart = echarts.init(this.chartDom)
this.chartDom1 = document.getElementById("zxpj-echarts")
this.myChart1 = echarts.init(this.chartDom1)
})
window.addEventListener("resize", this.resizeEcharts);
},
beforeDestroy(){
window.removeEventListener("resize", this. resizeEcharts);
},
activated() {
this.resizeEcharts()
}, },
methods: { methods: {
getData(){ getData(){
...@@ -285,7 +269,6 @@ ...@@ -285,7 +269,6 @@
pageNum:this.pageNum,//页码 pageNum:this.pageNum,//页码
pageSize:this.pageSize, pageSize:this.pageSize,
} }
console.log(this.params)
if(this.params.startTime){ if(this.params.startTime){
param.startTime=this.params.startTime param.startTime=this.params.startTime
} }
...@@ -302,13 +285,6 @@ ...@@ -302,13 +285,6 @@
}) })
}) })
}, },
resizeEcharts (){
const self = this
setTimeout(function(){ //图表跟随页面大小变化宽度
self.myChart.resize()
self.myChart1.resize()
}, 10)
},
initChart(list){ initChart(list){
let data=[] let data=[]
if(list.length > 10){ if(list.length > 10){
...@@ -318,178 +294,196 @@ ...@@ -318,178 +294,196 @@
}else { }else {
data=list data=list
} }
//业主单位合作情况 this.$nextTick(()=>{
this.option ={ let myChart = echarts.init(document.getElementById("hzqk-echarts"))
tooltip: { //业主单位合作情况
trigger: 'axis', let option ={
axisPointer: { tooltip: {
type: 'cross' trigger: 'axis',
} axisPointer: {
}, type: 'cross'
xAxis: {
type: 'category',
axisLabel: { //坐标轴刻度标签的相关设置
margin: 15, //刻度标签与轴线之间的距离
color:"#666666"
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data.map(item => item.companyName),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：次',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -60], // 四个数字分别为上右下左与原位置距离
color: '#666666',
} }
}, },
{ xAxis: {
type: 'value', type: 'category',
axisLabel: { //坐标轴刻度标签的相关设置 axisLabel: { //坐标轴刻度标签的相关设置
margin: 15, //刻度标签与轴线之间的距离
color:"#666666" color:"#666666"
}, },
name: '单位：万元', axisTick: false, //坐标轴刻度
nameLocation: 'end', axisPointer: {
nameTextStyle: { type: 'shadow'
padding: [0, 0, 0, 100], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}, },
splitLine: { data: data.map(item => item.companyName),
show: true, },
lineStyle: { yAxis: [
type: 'dashed', {
color: ['#FFFFFF'] type: 'value',
} axisLabel: { //坐标轴刻度标签的相关设置
} color:"#666666"
} },
], name: '单位：次',
grid: { nameLocation: 'end',
top:30, nameTextStyle: {
left:80, padding: [0, 10, 0, -60], // 四个数字分别为上右下左与原位置距离
right:90, color: '#666666',
bottom:30,
},
series: [
{
name:'合作金额（万元）',
smooth: false, //平滑
type:"line",
symbolSize: 6,
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + '万元'
} }
}, },
itemStyle: { {
normal:{ type: 'value',
color: '#67B3FD', axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：万元',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 0, 0, 100], // 四个数字分别为上右下左与原位置距离
color: '#666666',
},
splitLine: {
show: true,
lineStyle: { lineStyle: {
width:3 type: 'dashed',
}, color: ['#FFFFFF']
}
} }
}, }
data:data.map(item => item.totalAmount), ],
grid: {
top:30,
left:80,
right:90,
bottom:30,
}, },
{ series: [
name:'合作次数（次）', {
type: 'bar', name:'合作金额（万元）',
barWidth: 20, smooth: false, //平滑
tooltip: { type:"line",
valueFormatter: function (value) { symbolSize: 6,
return value + '次'; yAxisIndex: 1,
} tooltip: {
}, valueFormatter: function (value) {
itemStyle: { return value + '万元'
normal:{ }
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ },
offset: 0, itemStyle: {
color: '#56A5FF' normal:{
}, { color: '#67B3FD',
offset: 1, lineStyle: {
color: '#1B8EFF' width:3
}]), },
barBorderRadius:[20,20, 0, 0] }
} },
data:data.map(item => item.totalAmount),
}, },
data:data.map(item => item.businessCount), {
} name:'合作次数（次）',
] type: 'bar',
} barWidth: 20,
this.option && this.myChart.setOption(this.option) tooltip: {
valueFormatter: function (value) {
return value + '次';
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#56A5FF'
}, {
offset: 1,
color: '#1B8EFF'
}]),
barBorderRadius:[20,20, 0, 0]
}
},
data:data.map(item => item.businessCount),
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
}, },
initChart1(data){ initChart1(data){
//客户资信评级 this.$nextTick(()=>{
this.option1 = { let myChart = echarts.init(document.getElementById("zxpj-echarts"))
tooltip: { //客户资信评级
trigger: 'axis', let option = {
axisPointer: { tooltip: {
type: 'shadow' trigger: 'axis',
} axisPointer: {
}, type: 'shadow'
grid: {
left: '3%',
top:30,
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: data.map(item => item.creditLevel),
axisTick: {
alignWithLabel: true,
show: false
}
}
],
yAxis: [
{
type: 'value',
splitLine : { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
} }
} },
], grid: {
series: [ left: '3%',
{ top:30,
name: '', right: '4%',
type: 'bar', bottom: '3%',
barWidth: '18px', containLabel: true
data: data.map(item => item.customerCount), },
tooltip: { xAxis: [
valueFormatter: function (value) { {
return '客户数量 '+value type: 'category',
data: data.map(item => item.creditLevel),
axisTick: {
alignWithLabel: true,
show: false
} }
}, }
itemStyle:{ ],
normal: { yAxis: [
barBorderRadius: [9, 9, 0, 0], {
color: '#165DFF' type: 'value',
splitLine : { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
} }
} }
} ],
], series: [
{
name: '',
type: 'bar',
barWidth: '18px',
data: data.map(item => item.customerCount),
tooltip: {
valueFormatter: function (value) {
return '客户数量 '+value
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#56A5FF'
}, {
offset: 1,
color: '#1B8EFF'
}]),
barBorderRadius:[20,20, 0, 0]
}
},
}
],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
// 高亮时点的颜色。 // 高亮时点的颜色。
color: 'rgb(90,146,247)' color: 'rgb(90,146,247)'
}, },
}
} }
} myChart.setOption(option);
this.option1 && this.myChart1.setOption(this.option1) window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.pageNum=1; this.pageNum=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