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