zyc@123456
2 years ago
40 changed files with 11114 additions and 280 deletions
|
After Width: | Height: | Size: 688 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
@ -0,0 +1,203 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
|
||||
|
const animationDuration = 6000 |
||||
|
const colorList = [ |
||||
|
'#B5C334', |
||||
|
'#FCCE10', |
||||
|
'#E87C25', |
||||
|
'#C1232B', |
||||
|
'#27727B', |
||||
|
'#FE8463', |
||||
|
'#9BCA63', |
||||
|
'#FAD860', |
||||
|
'#F3A43B', |
||||
|
'#60C0DD', |
||||
|
'#D7504B', |
||||
|
'#C6E579', |
||||
|
'#F4E001', |
||||
|
'#F0805A', |
||||
|
'#26C0C0', |
||||
|
] |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart', |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%', |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px', |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
}, |
||||
|
select: () => { |
||||
|
;(o) => |
||||
|
function () { |
||||
|
console.log('出入参数') |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
title: '', |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ legend, xAxis, Data, nextUrl, rotate, unit, params } = {}) { |
||||
|
this.chart.setOption({ |
||||
|
title: { |
||||
|
text: legend[0], |
||||
|
x: 'left', |
||||
|
// bottom: 5, |
||||
|
top: 10, |
||||
|
left: 30, |
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff', |
||||
|
fontWeight: 'bolder', // 字体加粗 |
||||
|
}, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
// 坐标轴指示器，坐标轴触发有效 |
||||
|
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' |
||||
|
}, |
||||
|
formatter: '{b} : {c} ' + unit, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: 60, |
||||
|
left: '20', |
||||
|
right: '20', |
||||
|
bottom: 30, |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
|
axisTick: { |
||||
|
alignWithLabel: true, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1', // 坐标线的宽度 |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#ffffff', |
||||
|
interval: 0, |
||||
|
rotate: rotate, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1', // 坐标线的宽度 |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#ffffff', |
||||
|
show: true, |
||||
|
formatter: '{value}' + unit, |
||||
|
}, |
||||
|
// 网格样式 |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: '#e6fdef', |
||||
|
width: 1, |
||||
|
type: 'solid', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
// legend: { |
||||
|
// data: legend // ['pageA', 'pageB', 'pageC'] |
||||
|
// }, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: legend[0], |
||||
|
type: 'bar', |
||||
|
// stack: 'vistors', |
||||
|
barWidth: '30', |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: function (params) { |
||||
|
return colorList[params.dataIndex] |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'top', |
||||
|
textStyle: { |
||||
|
color: '#ffffff', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data: Data.seriesData, |
||||
|
}, |
||||
|
], |
||||
|
}) |
||||
|
var _this = this |
||||
|
this.chart.on('click', function (param) { |
||||
|
_this.callParents(param.name) |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(name) { |
||||
|
this.$emit('parentFunction', name) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,207 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
import resize from './mixins/resize' |
||||
|
const colorList = [ |
||||
|
'#B5C334', |
||||
|
'#FCCE10', |
||||
|
'#E87C25', |
||||
|
'#C1232B', |
||||
|
'#27727B', |
||||
|
'#FE8463', |
||||
|
'#9BCA63', |
||||
|
'#FAD860', |
||||
|
'#F3A43B', |
||||
|
'#60C0DD', |
||||
|
'#D7504B', |
||||
|
'#C6E579', |
||||
|
'#F4E001', |
||||
|
'#F0805A', |
||||
|
'#26C0C0' |
||||
|
] |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
title: '' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
title, |
||||
|
legend, |
||||
|
xAxis, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
rotate, |
||||
|
unit, |
||||
|
params, |
||||
|
grid, |
||||
|
barWidth |
||||
|
} = {}) { |
||||
|
this.chart.setOption({ |
||||
|
title: title, |
||||
|
// { |
||||
|
// text: legend[0], |
||||
|
// x: "left", |
||||
|
// // bottom: 5, |
||||
|
// top: 0, |
||||
|
// left: 30, |
||||
|
// textStyle: { |
||||
|
// fontSize: 18, |
||||
|
// color: "#000", |
||||
|
// fontWeight: "bolder" // 字体加粗 |
||||
|
// } |
||||
|
// }, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
// 坐标轴指示器，坐标轴触发有效 |
||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
||||
|
}, |
||||
|
formatter: '{b} : {c} ' + unit |
||||
|
}, |
||||
|
grid: grid, |
||||
|
// { |
||||
|
// top: 15, |
||||
|
// left: "20", |
||||
|
// right: "20", |
||||
|
// bottom: 30, |
||||
|
// containLabel: true |
||||
|
// }, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
|
axisTick: { |
||||
|
alignWithLabel: true |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#000', // 左边线的颜色 |
||||
|
width: '1' // 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#000', |
||||
|
interval: 0, |
||||
|
rotate: rotate |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#000', // 左边线的颜色 |
||||
|
width: '1' // 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#000', |
||||
|
show: true, |
||||
|
formatter: '{value}' + unit |
||||
|
}, |
||||
|
// 网格样式 |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: '#e6fdef', |
||||
|
width: 1, |
||||
|
type: 'solid' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
// legend: { |
||||
|
// data: legend // ['pageA', 'pageB', 'pageC'] |
||||
|
// }, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: legend[0], |
||||
|
type: 'bar', |
||||
|
// stack: 'vistors', |
||||
|
barWidth: barWidth == null ? '30' : barWidth, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: function(params) { |
||||
|
return colorList[params.dataIndex] |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'top', |
||||
|
textStyle: { |
||||
|
color: '#000' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data: Data.seriesData |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
var _this = this |
||||
|
this.chart.on('click', function(param) { |
||||
|
// console.log('选择：' + JSON.stringify(param)) |
||||
|
_this.callParents(param.name) |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(name) { |
||||
|
this.$emit('parentFunction', name) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,254 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
import resize from './mixins/resize' |
||||
|
// import router from '../../../router' |
||||
|
|
||||
|
const colorList = [ |
||||
|
'#B5C334', |
||||
|
'#FCCE10', |
||||
|
'#E87C25', |
||||
|
'#C1232B', |
||||
|
'#27727B', |
||||
|
'#FE8463', |
||||
|
'#9BCA63', |
||||
|
'#FAD860', |
||||
|
'#F3A43B', |
||||
|
'#60C0DD', |
||||
|
'#D7504B', |
||||
|
'#C6E579', |
||||
|
'#F4E001', |
||||
|
'#F0805A', |
||||
|
'#26C0C0', |
||||
|
'#87cefa', |
||||
|
'#ffd700', |
||||
|
'#6b8e23', |
||||
|
'#ff7f50', |
||||
|
'#da70d6', |
||||
|
'#32cd32', |
||||
|
'#cd5c5c', |
||||
|
'#00fa9a', |
||||
|
'#1e90ff', |
||||
|
'#ba55d3', |
||||
|
'#ff00ff', |
||||
|
'#7b68ee', |
||||
|
'#6495ed', |
||||
|
'#3cb371', |
||||
|
'#b8860b', |
||||
|
'#ff69b4', |
||||
|
'#ff6347', |
||||
|
'#ffa500', |
||||
|
'#40e0d0', |
||||
|
'#30e0e0', |
||||
|
'#C1232B', |
||||
|
'#B5C334', |
||||
|
'#FCCE10', |
||||
|
'#E87C25', |
||||
|
'#27727B', |
||||
|
'#FE8463', |
||||
|
'#9BCA63', |
||||
|
'#FAD860', |
||||
|
'#F3A43B', |
||||
|
'#60C0DD', |
||||
|
'#D7504B', |
||||
|
'#C6E579', |
||||
|
'#F4E001', |
||||
|
'#F0805A', |
||||
|
'#26C0C0', |
||||
|
'#2F9323', |
||||
|
'#D9B63A', |
||||
|
'#2E2AA4', |
||||
|
'#9F2E61', |
||||
|
'#4D670C', |
||||
|
'#BF675F', |
||||
|
'#1F814A', |
||||
|
'#357F88', |
||||
|
'#673509', |
||||
|
'#310937', |
||||
|
'#1B9637', |
||||
|
'#F7393C' |
||||
|
] |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
title: '' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
title, |
||||
|
legend, |
||||
|
xAxis, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
rotate, |
||||
|
unit, |
||||
|
params, |
||||
|
grid |
||||
|
} = {}) { |
||||
|
this.chart.setOption({ |
||||
|
title: title, |
||||
|
// { |
||||
|
// text: legend[0], |
||||
|
// x: "left", |
||||
|
// // bottom: 5, |
||||
|
// top: 0, |
||||
|
// left: 30, |
||||
|
// textStyle: { |
||||
|
// fontSize: 18, |
||||
|
// color: "#000", |
||||
|
// fontWeight: "bolder" // 字体加粗 |
||||
|
// } |
||||
|
// }, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
// 坐标轴指示器，坐标轴触发有效 |
||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
||||
|
}, |
||||
|
formatter: '{b} : {c} ' + unit |
||||
|
}, |
||||
|
grid: grid, |
||||
|
// { |
||||
|
// top: 15, |
||||
|
// left: "20", |
||||
|
// right: "20", |
||||
|
// bottom: 30, |
||||
|
// containLabel: true |
||||
|
// }, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
|
axisTick: { |
||||
|
alignWithLabel: true |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#000', // 左边线的颜色 |
||||
|
width: '1' // 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#000', |
||||
|
interval: 0, |
||||
|
rotate: rotate |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#000', // 左边线的颜色 |
||||
|
width: '1' // 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#000', |
||||
|
show: true, |
||||
|
formatter: '{value}' + unit |
||||
|
}, |
||||
|
// 网格样式 |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: '#e6fdef', |
||||
|
width: 1, |
||||
|
type: 'solid' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
// legend: { |
||||
|
// data: legend // ['pageA', 'pageB', 'pageC'] |
||||
|
// }, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: legend[0], |
||||
|
type: 'bar', |
||||
|
// stack: 'vistors', |
||||
|
// barWidth: barWidth == null ? "30" : barWidth, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: function(params) { |
||||
|
return colorList[params.dataIndex] |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'top', |
||||
|
textStyle: { |
||||
|
color: '#000' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data: Data.seriesData |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
var _this = this |
||||
|
this.chart.on('click', function(param) { |
||||
|
_this.callParents(param.name) |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(name) { |
||||
|
this.$emit('parentFunction', name) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,265 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
// import router from '../../../router' |
||||
|
|
||||
|
// const animationDuration = 6000 |
||||
|
// const colorList = [ |
||||
|
// '#C1232B', |
||||
|
// '#B5C334', |
||||
|
// '#FCCE10', |
||||
|
// '#E87C25', |
||||
|
// '#27727B', |
||||
|
// '#FE8463', |
||||
|
// '#9BCA63', |
||||
|
// '#FAD860', |
||||
|
// '#F3A43B', |
||||
|
// '#60C0DD', |
||||
|
// '#D7504B', |
||||
|
// '#C6E579', |
||||
|
// '#F4E001', |
||||
|
// '#F0805A', |
||||
|
// '#26C0C0' |
||||
|
// ] |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
seriesName, |
||||
|
legend, |
||||
|
xAxis, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
rotate, |
||||
|
unit, |
||||
|
params, |
||||
|
max |
||||
|
} = {}) { |
||||
|
var option = { |
||||
|
title: { |
||||
|
text: seriesName, |
||||
|
// x: "left", |
||||
|
// bottom: 5, |
||||
|
top: 5, |
||||
|
left: 30, |
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff', |
||||
|
fontWeight: 'bolder' // 字体加粗 |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
top: 80, |
||||
|
left: '20', |
||||
|
right: '20', |
||||
|
bottom: 35, |
||||
|
containLabel: true |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'line', |
||||
|
crossStyle: { |
||||
|
// color: "#999" |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// toolbox: { |
||||
|
// feature: { |
||||
|
// dataView: { show: true, readOnly: false }, |
||||
|
// magicType: { show: true, type: ["line", "bar"] }, |
||||
|
// restore: { show: true }, |
||||
|
// saveAsImage: { show: true } |
||||
|
// } |
||||
|
// }, |
||||
|
legend: { |
||||
|
data: legend, |
||||
|
bottom: 20, |
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff' |
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
} |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: xAxis, |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1' // 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#fff', |
||||
|
interval: 0, |
||||
|
rotate: rotate |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '营房数量', |
||||
|
top: 10, |
||||
|
min: 0, |
||||
|
max: max, |
||||
|
interval: 10, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} 栋' |
||||
|
}, // 网格样式 |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1' // 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: '#e6fdef', |
||||
|
width: 1, |
||||
|
type: 'solid' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '电气火灾报警次数', |
||||
|
top: 10, |
||||
|
min: -1, |
||||
|
max: 5, |
||||
|
interval: 1, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} 次' |
||||
|
}, // 网格样式 |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1' // 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: '#e6fdef', |
||||
|
width: 1, |
||||
|
type: 'solid' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: Data[0].name, |
||||
|
type: 'bar', |
||||
|
barWidth: '30', |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
// 好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了， |
||||
|
// color: function(params) { |
||||
|
// return colorList[params.dataIndex]; |
||||
|
// }, //以下为是否显示，显示位置和显示格式的设置了 |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'top', |
||||
|
formatter: '{c}', |
||||
|
// formatter: "{b}\n{c}" |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data: Data[0].data |
||||
|
}, |
||||
|
{ |
||||
|
name: Data[1].name, |
||||
|
type: 'line', |
||||
|
barWidth: '30', |
||||
|
yAxisIndex: 1, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
// 好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了， |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
data: Data[1].data |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
this.chart.setOption(option) |
||||
|
var _this = this |
||||
|
this.chart.on('click', function(param) { |
||||
|
_this.callParents(param.name) |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(name) { |
||||
|
this.$emit('mixedFunction', name) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,239 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
// import router from '../../../router' |
||||
|
|
||||
|
// const animationDuration = 6000 |
||||
|
const colorList = [ |
||||
|
'#87cefa', |
||||
|
'#ffd700', |
||||
|
'#6b8e23', |
||||
|
'#ff7f50', |
||||
|
'#da70d6', |
||||
|
'#32cd32', |
||||
|
'#cd5c5c', |
||||
|
'#00fa9a', |
||||
|
'#1e90ff', |
||||
|
'#ba55d3', |
||||
|
'#ff00ff', |
||||
|
'#7b68ee', |
||||
|
'#6495ed', |
||||
|
'#3cb371', |
||||
|
'#b8860b', |
||||
|
'#ff69b4', |
||||
|
'#ff6347', |
||||
|
'#ffa500', |
||||
|
'#40e0d0', |
||||
|
'#30e0e0' |
||||
|
] |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
barname, |
||||
|
legend, |
||||
|
xAxis, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
rotate, |
||||
|
unit, |
||||
|
params |
||||
|
} = {}) { |
||||
|
const list = [] |
||||
|
for (var i = 0; i < legend.length; i++) { |
||||
|
const item = { |
||||
|
name: legend[i], |
||||
|
type: 'bar', |
||||
|
barGap: 0, |
||||
|
// stack: 'vistors', |
||||
|
// barWidth: '30', |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'top', |
||||
|
textStyle: { |
||||
|
color: colorList[i] // '#1e90ff' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data: Data.seriesData && Data.seriesData.length > 0 ? Data.seriesData[i].value : null |
||||
|
// animationDuration |
||||
|
} |
||||
|
list.push(item) |
||||
|
} |
||||
|
|
||||
|
this.chart.setOption({ |
||||
|
// title: { |
||||
|
// text: barname, |
||||
|
// // subtext: '纯属虚构', |
||||
|
// x: "center", |
||||
|
// bottom: 10, |
||||
|
// // top: 0, |
||||
|
// textStyle: { |
||||
|
// fontSize: 18 |
||||
|
// } |
||||
|
// }, |
||||
|
title: { |
||||
|
text: barname, |
||||
|
x: 'center', |
||||
|
// bottom: 10, |
||||
|
top: 2, |
||||
|
textStyle: { |
||||
|
fontSize: 18, |
||||
|
color: '#2fd5ff', |
||||
|
fontWeight: 'bolder' // 字体加粗 |
||||
|
} |
||||
|
}, |
||||
|
// title: { |
||||
|
// text: barname, |
||||
|
// x: 'left', |
||||
|
// // bottom: 5, |
||||
|
// top: 10, |
||||
|
// left: 30, |
||||
|
// textStyle: { |
||||
|
// fontSize: 16, |
||||
|
// color: '#fff', |
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
// } |
||||
|
// }, |
||||
|
|
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
// 坐标轴指示器，坐标轴触发有效 |
||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
||||
|
} |
||||
|
// formatter: '{b} : {c}' |
||||
|
}, |
||||
|
grid: { |
||||
|
top: 80, |
||||
|
left: '2%', |
||||
|
right: '2%', |
||||
|
bottom: 5, |
||||
|
containLabel: true |
||||
|
}, |
||||
|
legend: { |
||||
|
data: legend, // ['pageA', 'pageB', 'pageC'] |
||||
|
left: 10, |
||||
|
top: 40, |
||||
|
textStyle: { |
||||
|
color: '#000' |
||||
|
} |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
|
axisTick: { |
||||
|
alignWithLabel: true |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#666', // 左边线的颜色 |
||||
|
width: '1'// 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
interval: 0, |
||||
|
rotate: rotate |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#666', // 左边线的颜色 |
||||
|
width: '1'// 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
formatter: '{value}' + unit |
||||
|
}, |
||||
|
// 网格样式 |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: '#e6fdef', |
||||
|
width: 1, |
||||
|
type: 'solid' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
series: list |
||||
|
}) |
||||
|
var _this = this |
||||
|
this.chart.on('click', function(param) { |
||||
|
_this.callParents(param.name) |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(name) { |
||||
|
this.$emit('charsFunction', name) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,254 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
// import router from '../../../router' |
||||
|
// import { constants } from 'crypto' |
||||
|
|
||||
|
// // const animationDuration = 6000 |
||||
|
// const colorList = [ |
||||
|
// '#87cefa', |
||||
|
// '#ffd700', |
||||
|
// '#6b8e23', |
||||
|
// '#ff7f50', |
||||
|
// '#da70d6', |
||||
|
// '#32cd32', |
||||
|
// '#cd5c5c', |
||||
|
// '#00fa9a', |
||||
|
// '#1e90ff', |
||||
|
// '#ba55d3', |
||||
|
// '#ff00ff', |
||||
|
// '#7b68ee', |
||||
|
// '#6495ed', |
||||
|
// '#3cb371', |
||||
|
// '#b8860b', |
||||
|
// '#ff69b4', |
||||
|
// '#ff6347', |
||||
|
// '#ffa500', |
||||
|
// '#40e0d0', |
||||
|
// '#30e0e0' |
||||
|
// ] |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
barname, |
||||
|
legend, |
||||
|
xAxis, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
rotate, |
||||
|
unit, |
||||
|
params |
||||
|
} = {}) { |
||||
|
const list = [] |
||||
|
var sum = [] |
||||
|
for (var i = 0; i < legend.length; i++) { |
||||
|
const item = { |
||||
|
name: legend[i], |
||||
|
type: 'bar', |
||||
|
stack: 'one', // 在一行 |
||||
|
barGap: 0, |
||||
|
itemStyle: { |
||||
|
// normal: { |
||||
|
// label: { |
||||
|
// show: true, |
||||
|
// position: "top", |
||||
|
// textStyle: { |
||||
|
// color: colorList[i] //'#1e90ff' |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
}, |
||||
|
data: Data.seriesData && Data.seriesData.length > 0 ? Data.seriesData[i].value : null |
||||
|
// animationDuration |
||||
|
} |
||||
|
list.push(item) |
||||
|
|
||||
|
// --计算每个item总数 |
||||
|
var itemNumber = 0 |
||||
|
for (var j = 0; j < Data.seriesData[i].value.length; j++) { |
||||
|
itemNumber += parseInt(Data.seriesData[i].value[j]) |
||||
|
} |
||||
|
sum.push(itemNumber) |
||||
|
} |
||||
|
|
||||
|
// var last = { |
||||
|
// name: "总计", |
||||
|
// type: "bar", |
||||
|
// stack: "one", |
||||
|
// label: { |
||||
|
// normal: { |
||||
|
// show: true, |
||||
|
// position: "top", |
||||
|
// textStyle: { |
||||
|
// color: "#000" |
||||
|
// }, |
||||
|
// formatter: "{c}" |
||||
|
// } |
||||
|
// }, |
||||
|
// data: [1, 0, 0, 0, 0, 0] |
||||
|
// }; |
||||
|
// list.push(last); |
||||
|
|
||||
|
var Option = { |
||||
|
title: { |
||||
|
text: barname, |
||||
|
// // subtext: '纯属虚构', |
||||
|
x: 'left', |
||||
|
// bottom: 10, |
||||
|
top: 10, |
||||
|
left: 30, |
||||
|
textStyle: { |
||||
|
// fontSize: 18 |
||||
|
fontSize: 16, |
||||
|
color: '#fff', |
||||
|
fontWeight: 'bolder' // 字体加粗 |
||||
|
} |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
// 坐标轴指示器，坐标轴触发有效 |
||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
||||
|
} |
||||
|
// formatter: '{b} : {c}' |
||||
|
}, |
||||
|
// legend: { |
||||
|
// data: legend, // ['pageA', 'pageB', 'pageC'] |
||||
|
// x: 'center', |
||||
|
// // left: 0, |
||||
|
// bottom: 10, |
||||
|
// textStyle: { |
||||
|
// color: '#fff' |
||||
|
// // fontSize: 18 |
||||
|
// } |
||||
|
// }, |
||||
|
grid: { |
||||
|
top: 60, |
||||
|
left: 20, |
||||
|
right: 20, |
||||
|
bottom: 20, |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
|
axisTick: { |
||||
|
alignWithLabel: true |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1' // 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
interval: 0, |
||||
|
rotate: rotate |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1' // 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
formatter: '{value}' + unit |
||||
|
}, |
||||
|
// 网格样式 |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: '#e6fdef', |
||||
|
width: 1, |
||||
|
type: 'solid' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
series: list |
||||
|
} |
||||
|
|
||||
|
// //加载页面时候替换最后一个series的formatter |
||||
|
// var series = Option["series"]; |
||||
|
// //加载页 |
||||
|
// series[series.length - 1]["label"]["normal"]["formatter"] = ""; |
||||
|
|
||||
|
this.chart.setOption(Option) |
||||
|
var _this = this |
||||
|
this.chart.on('click', function(param) { |
||||
|
_this.callParents(param.name) |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(name) { |
||||
|
this.$emit('barCharsOneFunction', name) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,282 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
|
||||
|
// const animationDuration = 6000 |
||||
|
const colorList = [ |
||||
|
['#00CCFF', '#2953B4'], |
||||
|
['#8e80fe', '#310796'], |
||||
|
['#FFA783', '#8D3510'], |
||||
|
['#FFE899', '#7F610F'], |
||||
|
['#8D104B', '#FF83D8'], |
||||
|
['#651180', '#D099FF'], |
||||
|
['#7F610F', '#FFE899'], |
||||
|
['#FF5B79', '#BC3535'], |
||||
|
// '#87cefa', |
||||
|
// '#ffd700', |
||||
|
// '#6b8e23', |
||||
|
// '#ff7f50', |
||||
|
// '#da70d6', |
||||
|
// '#32cd32', |
||||
|
// '#cd5c5c', |
||||
|
// '#00fa9a', |
||||
|
// '#1e90ff', |
||||
|
// '#ba55d3', |
||||
|
// '#ff00ff', |
||||
|
// '#7b68ee', |
||||
|
// '#6495ed', |
||||
|
// '#3cb371', |
||||
|
// '#b8860b', |
||||
|
// '#ff69b4', |
||||
|
// '#ff6347', |
||||
|
// '#ffa500', |
||||
|
// '#40e0d0', |
||||
|
// '#30e0e0' |
||||
|
] |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart', |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%', |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px', |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
barname, |
||||
|
legend, |
||||
|
xAxis, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
rotate, |
||||
|
unit, |
||||
|
params, |
||||
|
colorList, |
||||
|
} = {}) { |
||||
|
const list = [] |
||||
|
for (var i = 0; i < legend.length; i++) { |
||||
|
const item = { |
||||
|
name: legend[i], |
||||
|
type: 'bar', |
||||
|
barGap: 0, |
||||
|
// stack: 'vistors', |
||||
|
barWidth: '20', |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
barBorderRadius: 0, |
||||
|
color: function (params) { |
||||
|
var colorItem = colorList[params.dataIndex] |
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: colorItem[0], |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colorItem[1], |
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
) |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, // 开启显示 |
||||
|
position: 'top', // 在上方显示 |
||||
|
textStyle: { |
||||
|
// 数值样式 |
||||
|
color: '#56d4fa', |
||||
|
fontSize: 16, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
// itemStyle: { |
||||
|
// color: colorList[i], |
||||
|
|
||||
|
// }, |
||||
|
data: |
||||
|
Data.seriesData && Data.seriesData.length > 0 |
||||
|
? Data.seriesData[i].value |
||||
|
: null, |
||||
|
// animationDuration |
||||
|
} |
||||
|
list.push(item) |
||||
|
} |
||||
|
|
||||
|
this.chart.setOption({ |
||||
|
title: { |
||||
|
text: barname, |
||||
|
x: 'center', |
||||
|
// bottom: 0, |
||||
|
top: 10, |
||||
|
textStyle: { |
||||
|
fontSize: 18, |
||||
|
color: '#b7d8fa', |
||||
|
fontWeight: 'bolder', // 字体加粗 |
||||
|
}, |
||||
|
}, |
||||
|
// title: { |
||||
|
// text: barname, |
||||
|
// x: 'left', |
||||
|
// // bottom: 5, |
||||
|
// top: 10, |
||||
|
// left: 30, |
||||
|
// textStyle: { |
||||
|
// fontSize: 14, |
||||
|
// color: '#fff', |
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
// } |
||||
|
// }, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#8006fc', |
||||
|
}, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
// 坐标轴指示器，坐标轴触发有效 |
||||
|
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' |
||||
|
}, |
||||
|
formatter: '{b} : {c} ' + unit, |
||||
|
// formatter: '{b} : {c}' |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 10, |
||||
|
top: 30, |
||||
|
// top: 50, |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
// legend: { |
||||
|
// data: legend, // ['pageA', 'pageB', 'pageC'] |
||||
|
// left: 10, |
||||
|
// top: 20, |
||||
|
// textStyle: { |
||||
|
// color: '#000' |
||||
|
// } |
||||
|
// }, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
|
axisTick: { |
||||
|
alignWithLabel: true, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1', // 坐标线的宽度 |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
fontSize: '14', |
||||
|
}, |
||||
|
interval: 0, |
||||
|
rotate: rotate, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
axisTick: { |
||||
|
show: true, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1', // 坐标线的宽度 |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
fontSize: '14', |
||||
|
}, |
||||
|
show: true, |
||||
|
formatter: '{value}' + unit, |
||||
|
}, |
||||
|
// 网格样式 |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: '#e6fdef', |
||||
|
width: 1, |
||||
|
type: 'solid', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
series: list, |
||||
|
}) |
||||
|
var _this = this |
||||
|
this.chart.on('click', function (param) { |
||||
|
_this.callParents(param.name) |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(name) { |
||||
|
this.$emit('charsFunction', name) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,282 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
|
||||
|
// const animationDuration = 6000 |
||||
|
const colorList = [ |
||||
|
['#00CCFF', '#2953B4'], |
||||
|
['#8e80fe', '#310796'], |
||||
|
['#FFA783', '#8D3510'], |
||||
|
['#FFE899', '#7F610F'], |
||||
|
['#8D104B', '#FF83D8'], |
||||
|
['#651180', '#D099FF'], |
||||
|
['#7F610F', '#FFE899'], |
||||
|
['#FF5B79', '#BC3535'], |
||||
|
// '#87cefa', |
||||
|
// '#ffd700', |
||||
|
// '#6b8e23', |
||||
|
// '#ff7f50', |
||||
|
// '#da70d6', |
||||
|
// '#32cd32', |
||||
|
// '#cd5c5c', |
||||
|
// '#00fa9a', |
||||
|
// '#1e90ff', |
||||
|
// '#ba55d3', |
||||
|
// '#ff00ff', |
||||
|
// '#7b68ee', |
||||
|
// '#6495ed', |
||||
|
// '#3cb371', |
||||
|
// '#b8860b', |
||||
|
// '#ff69b4', |
||||
|
// '#ff6347', |
||||
|
// '#ffa500', |
||||
|
// '#40e0d0', |
||||
|
// '#30e0e0' |
||||
|
] |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart', |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%', |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px', |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
barname, |
||||
|
legend, |
||||
|
xAxis, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
rotate, |
||||
|
unit, |
||||
|
params, |
||||
|
colorList, |
||||
|
} = {}) { |
||||
|
const list = [] |
||||
|
for (var i = 0; i < legend.length; i++) { |
||||
|
const item = { |
||||
|
name: legend[i], |
||||
|
type: 'bar', |
||||
|
barGap: 0, |
||||
|
// stack: 'vistors', |
||||
|
barWidth: '20', |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
barBorderRadius: 0, |
||||
|
color: function (params) { |
||||
|
var colorItem = colorList[params.dataIndex] |
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: colorItem[0], |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colorItem[1], |
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
) |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, // 开启显示 |
||||
|
position: 'top', // 在上方显示 |
||||
|
textStyle: { |
||||
|
// 数值样式 |
||||
|
color: '#56d4fa', |
||||
|
fontSize: 16, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
// itemStyle: { |
||||
|
// color: colorList[i], |
||||
|
|
||||
|
// }, |
||||
|
data: |
||||
|
Data.seriesData && Data.seriesData.length > 0 |
||||
|
? Data.seriesData[i].value |
||||
|
: null, |
||||
|
// animationDuration |
||||
|
} |
||||
|
list.push(item) |
||||
|
} |
||||
|
|
||||
|
this.chart.setOption({ |
||||
|
title: { |
||||
|
text: barname, |
||||
|
x: 'center', |
||||
|
// bottom: 0, |
||||
|
top: 10, |
||||
|
textStyle: { |
||||
|
fontSize: 18, |
||||
|
color: '#b7d8fa', |
||||
|
fontWeight: 'bolder', // 字体加粗 |
||||
|
}, |
||||
|
}, |
||||
|
// title: { |
||||
|
// text: barname, |
||||
|
// x: 'left', |
||||
|
// // bottom: 5, |
||||
|
// top: 10, |
||||
|
// left: 30, |
||||
|
// textStyle: { |
||||
|
// fontSize: 14, |
||||
|
// color: '#fff', |
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
// } |
||||
|
// }, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#8006fc', |
||||
|
}, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
// 坐标轴指示器，坐标轴触发有效 |
||||
|
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' |
||||
|
}, |
||||
|
formatter: '{b} : {c} ' + unit, |
||||
|
// formatter: '{b} : {c}' |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 10, |
||||
|
top: 30, |
||||
|
// top: 50, |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
// legend: { |
||||
|
// data: legend, // ['pageA', 'pageB', 'pageC'] |
||||
|
// left: 10, |
||||
|
// top: 20, |
||||
|
// textStyle: { |
||||
|
// color: '#000' |
||||
|
// } |
||||
|
// }, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
|
axisTick: { |
||||
|
alignWithLabel: true, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1', // 坐标线的宽度 |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
fontSize: '14', |
||||
|
}, |
||||
|
interval: 0, |
||||
|
rotate: rotate, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
axisTick: { |
||||
|
show: true, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1', // 坐标线的宽度 |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
fontSize: '14', |
||||
|
}, |
||||
|
show: true, |
||||
|
formatter: '{value}' + unit, |
||||
|
}, |
||||
|
// 网格样式 |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: '#e6fdef', |
||||
|
width: 1, |
||||
|
type: 'solid', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
series: list, |
||||
|
}) |
||||
|
var _this = this |
||||
|
this.chart.on('click', function (param) { |
||||
|
_this.callParents(param.name) |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(name) { |
||||
|
this.$emit('charsFunction', name) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,272 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
// import router from '../../../router' |
||||
|
|
||||
|
// const animationDuration = 6000 |
||||
|
const colorList = [ |
||||
|
['#00CCFF', '#2953B4'], |
||||
|
['#8e80fe', '#310796'], |
||||
|
['#FFA783', '#8D3510'], |
||||
|
['#FFE899', '#7F610F'], |
||||
|
['#8D104B', '#FF83D8'], |
||||
|
['#651180', '#D099FF'], |
||||
|
['#7F610F', '#FFE899'], |
||||
|
['#FF5B79', '#BC3535'] |
||||
|
// '#87cefa', |
||||
|
// '#ffd700', |
||||
|
// '#6b8e23', |
||||
|
// '#ff7f50', |
||||
|
// '#da70d6', |
||||
|
// '#32cd32', |
||||
|
// '#cd5c5c', |
||||
|
// '#00fa9a', |
||||
|
// '#1e90ff', |
||||
|
// '#ba55d3', |
||||
|
// '#ff00ff', |
||||
|
// '#7b68ee', |
||||
|
// '#6495ed', |
||||
|
// '#3cb371', |
||||
|
// '#b8860b', |
||||
|
// '#ff69b4', |
||||
|
// '#ff6347', |
||||
|
// '#ffa500', |
||||
|
// '#40e0d0', |
||||
|
// '#30e0e0' |
||||
|
] |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
barname, |
||||
|
legend, |
||||
|
xAxis, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
rotate, |
||||
|
unit, |
||||
|
params, colorList |
||||
|
} = {}) { |
||||
|
const list = [] |
||||
|
for (var i = 0; i < legend.length; i++) { |
||||
|
const item = { |
||||
|
name: legend[i], |
||||
|
type: 'bar', |
||||
|
barGap: 0, |
||||
|
// stack: 'vistors', |
||||
|
barWidth: '10', |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
barBorderRadius: 0, |
||||
|
color: function(params) { |
||||
|
var colorItem = colorList[params.dataIndex] |
||||
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: colorItem[0] |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colorItem[1] |
||||
|
} |
||||
|
], false) |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'top', |
||||
|
textStyle: { |
||||
|
color: '#56d4fa', |
||||
|
fontSize: 18 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
// itemStyle: { |
||||
|
// color: colorList[i], |
||||
|
|
||||
|
// }, |
||||
|
data: Data.seriesData && Data.seriesData.length > 0 ? Data.seriesData[i].value : null |
||||
|
// animationDuration |
||||
|
} |
||||
|
list.push(item) |
||||
|
} |
||||
|
|
||||
|
this.chart.setOption({ |
||||
|
title: { |
||||
|
text: barname, |
||||
|
x: 'center', |
||||
|
// bottom: 0, |
||||
|
top: 10, |
||||
|
textStyle: { |
||||
|
fontSize: 18, |
||||
|
color: '#b7d8fa', |
||||
|
fontWeight: 'bolder' // 字体加粗 |
||||
|
} |
||||
|
}, |
||||
|
// title: { |
||||
|
// text: barname, |
||||
|
// x: 'left', |
||||
|
// // bottom: 5, |
||||
|
// top: 10, |
||||
|
// left: 30, |
||||
|
// textStyle: { |
||||
|
// fontSize: 16, |
||||
|
// color: '#fff', |
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
// } |
||||
|
// }, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#8006fc' |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
// 坐标轴指示器，坐标轴触发有效 |
||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
||||
|
}, |
||||
|
formatter: '{b} : {c} ' + unit |
||||
|
// formatter: '{b} : {c}' |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 10, |
||||
|
top: 30, |
||||
|
// top: 50, |
||||
|
containLabel: true |
||||
|
}, |
||||
|
// legend: { |
||||
|
// data: legend, // ['pageA', 'pageB', 'pageC'] |
||||
|
// left: 10, |
||||
|
// top: 20, |
||||
|
// textStyle: { |
||||
|
// color: '#000' |
||||
|
// } |
||||
|
// }, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
|
axisTick: { |
||||
|
alignWithLabel: true |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1'// 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
fontSize: '14' |
||||
|
}, |
||||
|
interval: 0, |
||||
|
rotate: rotate |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
|
||||
|
type: 'value', |
||||
|
axisTick: { |
||||
|
show: true |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1'// 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
fontSize: '14' |
||||
|
}, |
||||
|
show: true, |
||||
|
formatter: '{value}' + unit |
||||
|
}, |
||||
|
// 网格样式 |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: '#e6fdef', |
||||
|
width: 1, |
||||
|
type: 'solid' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
series: list |
||||
|
}) |
||||
|
var _this = this |
||||
|
this.chart.on('click', function(param) { |
||||
|
_this.callParents(param.name) |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(name) { |
||||
|
this.$emit('charsFunction', name) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,277 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
// import router from '../../../router' |
||||
|
|
||||
|
// const animationDuration = 6000 |
||||
|
const colorList = [ |
||||
|
['#00CCFF', '#2953B4'], |
||||
|
['#8e80fe', '#310796'], |
||||
|
['#FFA783', '#8D3510'], |
||||
|
['#FFE899', '#7F610F'], |
||||
|
['#8D104B', '#FF83D8'], |
||||
|
['#651180', '#D099FF'], |
||||
|
['#7F610F', '#FFE899'], |
||||
|
['#FF5B79', '#BC3535'] |
||||
|
// '#87cefa', |
||||
|
// '#ffd700', |
||||
|
// '#6b8e23', |
||||
|
// '#ff7f50', |
||||
|
// '#da70d6', |
||||
|
// '#32cd32', |
||||
|
// '#cd5c5c', |
||||
|
// '#00fa9a', |
||||
|
// '#1e90ff', |
||||
|
// '#ba55d3', |
||||
|
// '#ff00ff', |
||||
|
// '#7b68ee', |
||||
|
// '#6495ed', |
||||
|
// '#3cb371', |
||||
|
// '#b8860b', |
||||
|
// '#ff69b4', |
||||
|
// '#ff6347', |
||||
|
// '#ffa500', |
||||
|
// '#40e0d0', |
||||
|
// '#30e0e0' |
||||
|
] |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
barname, |
||||
|
legend, |
||||
|
xAxis, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
rotate, |
||||
|
unit, |
||||
|
params, colorList |
||||
|
} = {}) { |
||||
|
const list = [] |
||||
|
for (var i = 0; i < legend.length; i++) { |
||||
|
const item = { |
||||
|
name: legend[i], |
||||
|
type: 'bar', |
||||
|
barGap: 0, |
||||
|
// stack: 'vistors', |
||||
|
barWidth: '10', |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
barBorderRadius: 0, |
||||
|
color: function(params) { |
||||
|
var colorItem = colorList[params.dataIndex] |
||||
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: colorItem[0] |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colorItem[1] |
||||
|
} |
||||
|
], false) |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'top', |
||||
|
textStyle: { |
||||
|
color: '#56d4fa', |
||||
|
fontSize: 16 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
// itemStyle: { |
||||
|
// color: colorList[i], |
||||
|
|
||||
|
// }, |
||||
|
data: Data.seriesData && Data.seriesData.length > 0 ? Data.seriesData[i].value : null |
||||
|
// animationDuration |
||||
|
} |
||||
|
list.push(item) |
||||
|
} |
||||
|
|
||||
|
this.chart.setOption({ |
||||
|
title: { |
||||
|
text: barname, |
||||
|
x: 'center', |
||||
|
// bottom: 0, |
||||
|
top: 10, |
||||
|
textStyle: { |
||||
|
fontSize: 18, |
||||
|
color: '#b7d8fa', |
||||
|
fontWeight: 'bolder' // 字体加粗 |
||||
|
} |
||||
|
}, |
||||
|
// title: { |
||||
|
// text: barname, |
||||
|
// x: 'left', |
||||
|
// // bottom: 5, |
||||
|
// top: 10, |
||||
|
// left: 30, |
||||
|
// textStyle: { |
||||
|
// fontSize: 16, |
||||
|
// color: '#fff', |
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
// } |
||||
|
// }, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#8006fc' |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
// 坐标轴指示器，坐标轴触发有效 |
||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
||||
|
}, |
||||
|
textStyle: { |
||||
|
fontSize: 14,color:'#ffffff', |
||||
|
}, |
||||
|
backgroundColor: '#242429cc', |
||||
|
borderColor: '#0c1d71', |
||||
|
formatter: '{b} : {c} ' + unit |
||||
|
// formatter: '{b} : {c}' |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 10, |
||||
|
top: 30, |
||||
|
// top: 50, |
||||
|
containLabel: true |
||||
|
}, |
||||
|
// legend: { |
||||
|
// data: legend, // ['pageA', 'pageB', 'pageC'] |
||||
|
// left: 10, |
||||
|
// top: 20, |
||||
|
// textStyle: { |
||||
|
// color: '#000' |
||||
|
// } |
||||
|
// }, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
|
axisTick: { |
||||
|
alignWithLabel: true |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1'// 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
fontSize: '12' |
||||
|
}, |
||||
|
interval: 0, |
||||
|
rotate: rotate |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
|
||||
|
type: 'value', |
||||
|
axisTick: { |
||||
|
show: true |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1'// 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
fontSize: '14' |
||||
|
}, |
||||
|
show: true, |
||||
|
formatter: '{value}' + unit |
||||
|
}, |
||||
|
// 网格样式 |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: '#e6fdef', |
||||
|
width: 1, |
||||
|
type: 'solid' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
series: list |
||||
|
}) |
||||
|
var _this = this |
||||
|
this.chart.on('click', function(param) { |
||||
|
_this.callParents(param.name) |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(name) { |
||||
|
this.$emit('charsFunction', name) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,103 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
// import router from '../../../router' |
||||
|
|
||||
|
// const animationDuration = 6000 |
||||
|
const colorList = [ |
||||
|
['#00CCFF', '#2953B4'], |
||||
|
['#8e80fe', '#310796'], |
||||
|
['#FFA783', '#8D3510'], |
||||
|
['#FFE899', '#7F610F'], |
||||
|
['#8D104B', '#FF83D8'], |
||||
|
['#651180', '#D099FF'], |
||||
|
['#7F610F', '#FFE899'], |
||||
|
['#FF5B79', '#BC3535'] |
||||
|
// '#87cefa', |
||||
|
// '#ffd700', |
||||
|
// '#6b8e23', |
||||
|
// '#ff7f50', |
||||
|
// '#da70d6', |
||||
|
// '#32cd32', |
||||
|
// '#cd5c5c', |
||||
|
// '#00fa9a', |
||||
|
// '#1e90ff', |
||||
|
// '#ba55d3', |
||||
|
// '#ff00ff', |
||||
|
// '#7b68ee', |
||||
|
// '#6495ed', |
||||
|
// '#3cb371', |
||||
|
// '#b8860b', |
||||
|
// '#ff69b4', |
||||
|
// '#ff6347', |
||||
|
// '#ffa500', |
||||
|
// '#40e0d0', |
||||
|
// '#30e0e0' |
||||
|
] |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
// default: '350px' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.chart.setOption(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.chart.setOption(this.chartData) |
||||
|
var _this = this |
||||
|
this.chart.on('click', function(param) { |
||||
|
_this.callParents(param.name) |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(name) { |
||||
|
this.$emit('charsFunction', name) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,494 @@ |
|||||
|
<template> |
||||
|
<div ref="myEchart" class="content" :style="{ height: '100%', width: '100%', margin: '0px 10px 10px 10px' }"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
// import { |
||||
|
// raiseOldWholeData, |
||||
|
// exceptionSituation, |
||||
|
// raiseOldmanSituation, |
||||
|
// weekDayCompare, |
||||
|
// getMapDataTongji, |
||||
|
// bindFuWuLiang |
||||
|
// } from '@/api/tongji/kanBanJuJiaYangLao' |
||||
|
import * as echarts from 'echarts' |
||||
|
require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import xt_data from '@/assets/河北省/邢台市/geojson.json' |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
data() { |
||||
|
return { |
||||
|
chartDatas2: [], |
||||
|
chart: null, |
||||
|
startCharts: null, |
||||
|
charPie3currentIndex: 0, |
||||
|
dataLen: 0 |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
if (this.startCharts) { |
||||
|
clearInterval(this.startCharts) |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
// getMapDataTongji().then(response => { |
||||
|
// if (response.code === 20000) { |
||||
|
// if ( |
||||
|
// response.data !== null && |
||||
|
// response.data !== '' && |
||||
|
// response.data !== undefined |
||||
|
// ) { |
||||
|
// this.countyData = [] |
||||
|
// for (var i = 0; i < response.data.length; i++) { |
||||
|
// var county = response.data[i] |
||||
|
// this.countyData.push({ |
||||
|
// name: county.title, |
||||
|
// value: county.departmentCount, |
||||
|
// county: county |
||||
|
// }) |
||||
|
// console.log('chartDatas2', this.chartDatas2) |
||||
|
// if (county.title === '邢东新区') { |
||||
|
// this.chartDatas2.push({ |
||||
|
// name: '邢东新区', |
||||
|
// value: [ |
||||
|
// 114.597268, |
||||
|
// 37.096124, |
||||
|
// county.departmentCount, |
||||
|
// county.personCount |
||||
|
// ] |
||||
|
// }) |
||||
|
// } |
||||
|
// if (county.title === '经济开发区') { |
||||
|
// this.chartDatas2.push({ |
||||
|
// name: '经济开发区', |
||||
|
// value: [ |
||||
|
// 114.565733, |
||||
|
// 37.06169, |
||||
|
// county.departmentCount, |
||||
|
// county.personCount |
||||
|
// ] |
||||
|
// }) |
||||
|
// } |
||||
|
// } |
||||
|
// console.log('chartDatas2aaaa', this.chartDatas2) |
||||
|
var _self = this |
||||
|
const myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置 |
||||
|
this.chart = myChart |
||||
|
window.onresize = myChart.resize |
||||
|
myChart.showLoading() |
||||
|
var option = {} |
||||
|
console.log(JSON.stringify(this.countyData)) |
||||
|
this.countyData = [ |
||||
|
{ 'name': '襄都区', 'value': '48', 'county': { 'title': '襄都区', 'jwd': '114.492019,37.061614', 'personCount': '22831', 'departmentCount': '48', 'areaCode': '130502' }}, |
||||
|
{ 'name': '信都区', 'value': '131', 'county': { 'title': '信都区', 'jwd': '114.468435,37.059882', 'personCount': '12487', 'departmentCount': '131', 'areaCode': '130503' }}, |
||||
|
{ 'name': '任泽区', 'value': '67', 'county': { 'title': '任泽区', 'jwd': '114.671936,37.120983', 'personCount': '10179', 'departmentCount': '67', 'areaCode': '130505' }}, |
||||
|
{ 'name': '南和区', 'value': '16', 'county': { 'title': '南和区', 'jwd': '114.683762,37.005041', 'personCount': '3909', 'departmentCount': '16', 'areaCode': '130506' }}, |
||||
|
{ 'name': '临城县', 'value': '30', 'county': { 'title': '临城县', 'jwd': '114.506873,37.444009', 'personCount': '4023', 'departmentCount': '18', 'areaCode': '130522' }}, |
||||
|
{ 'name': '内丘县', 'value': '29', 'county': { 'title': '内丘县', 'jwd': '114.511523,37.287663', 'personCount': '6724', 'departmentCount': '19', 'areaCode': '130523' }}, |
||||
|
{ 'name': '柏乡县', 'value': '70', 'county': { 'title': '柏乡县', 'jwd': '114.693382,37.483596', 'personCount': '1625', 'departmentCount': '7', 'areaCode': '130524' }}, |
||||
|
{ 'name': '隆尧县', 'value': '10', 'county': { 'title': '隆尧县', 'jwd': '114.776348,37.350925', 'personCount': '44038', 'departmentCount': '10', 'areaCode': '130525' }}, |
||||
|
{ 'name': '宁晋县', 'value': '71', 'county': { 'title': '宁晋县', 'jwd': '114.921027,37.618956', 'personCount': '13381', 'departmentCount': '71', 'areaCode': '130528' }}, |
||||
|
{ 'name': '巨鹿县', 'value': '55', 'county': { 'title': '巨鹿县', 'jwd': '115.038782,37.21768', 'personCount': '8627', 'departmentCount': '55', 'areaCode': '130529' }}, |
||||
|
{ 'name': '新河县', 'value': '8', 'county': { 'title': '新河县', 'jwd': '115.247537,37.526216', 'personCount': '212', 'departmentCount': '8', 'areaCode': '130530' }}, |
||||
|
{ 'name': '广宗县', 'value': '27', 'county': { 'title': '广宗县', 'jwd': '115.142797,37.075548', 'personCount': '4903', 'departmentCount': '27', 'areaCode': '130531' }}, |
||||
|
{ 'name': '平乡县', 'value': '39', 'county': { 'title': '平乡县', 'jwd': '115.029218,37.069404', 'personCount': '1884', 'departmentCount': '39', 'areaCode': '130532' }}, |
||||
|
{ 'name': '威县', 'value': '14', 'county': { 'title': '威县', 'jwd': '115.272749,36.983272', 'personCount': '4831', 'departmentCount': '14', 'areaCode': '130533' }}, |
||||
|
{ 'name': '清河县', 'value': '25', 'county': { 'title': '清河县', 'jwd': '115.668999,37.059991', 'personCount': '6240', 'departmentCount': '25', 'areaCode': '130534' }}, |
||||
|
{ 'name': '临西县', 'value': '7', 'county': { 'title': '临西县', 'jwd': '115.498684,36.8642', 'personCount': '1903', 'departmentCount': '7', 'areaCode': '130535' }}, |
||||
|
{ 'name': '经济开发区', 'value': '22', 'county': { 'title': '经济开发区', 'jwd': '114.565733,37.061690', 'personCount': '24184', 'departmentCount': '22', 'areaCode': '130571' }}, |
||||
|
{ 'name': '南宫市', 'value': '24', 'county': { 'title': '南宫市', 'jwd': '115.398102,37.359668', 'personCount': '8200', 'departmentCount': '24', 'areaCode': '130581' }}, |
||||
|
{ 'name': '沙河市', 'value': '23', 'county': { 'title': '沙河市', 'jwd': '114.504902,36.861903', 'personCount': '4745', 'departmentCount': '23', 'areaCode': '130582' }}, |
||||
|
{ 'name': '邢东新区', 'value': '4', 'county': { 'title': '邢东新区', 'jwd': '114.597268,37.096124', 'personCount': '806', 'departmentCount': '4', 'areaCode': '130591' }}] |
||||
|
echarts.registerMap('xingtai', xt_data, {}) |
||||
|
option = { |
||||
|
title: { |
||||
|
text: '邢台市', |
||||
|
// subtext: 'Data from www.census.gov', |
||||
|
left: 'center', |
||||
|
textStyle: { |
||||
|
fontSize: 24, |
||||
|
color: '#fff' |
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
}, |
||||
|
show: false |
||||
|
}, |
||||
|
tooltip: { |
||||
|
alwaysShowContent: true, |
||||
|
textStyle: { |
||||
|
fontSize: 12, |
||||
|
color: '#ccc' |
||||
|
}, |
||||
|
trigger: 'item', |
||||
|
backgroundColor: '#242429cc', |
||||
|
formatter: function(params) { |
||||
|
const value = (params.value + '').split('.') |
||||
|
var valueStr = value[0].replace( |
||||
|
/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, |
||||
|
'$1,' |
||||
|
) |
||||
|
var personCount = 0 |
||||
|
if (params.componentSubType === 'scatter') { |
||||
|
// debugger |
||||
|
valueStr = params.data.value[2] |
||||
|
personCount = params.data.value[3] |
||||
|
} else { |
||||
|
personCount = params.data.county.personCount |
||||
|
} |
||||
|
return ( |
||||
|
params.name + |
||||
|
'<br/>老人数量: ' + |
||||
|
personCount + |
||||
|
'人<br/>' + |
||||
|
'机构数量：' + |
||||
|
valueStr + |
||||
|
'个' |
||||
|
) |
||||
|
} |
||||
|
}, |
||||
|
// geo: { |
||||
|
// map: 'xingtai', |
||||
|
// aspectScale: 0.75, |
||||
|
// layoutCenter: ['50%', '50.5%'], |
||||
|
// layoutSize: '102%', |
||||
|
// silent: true, |
||||
|
// roam: false, |
||||
|
// z: 0, |
||||
|
// itemStyle: { |
||||
|
// normal: { |
||||
|
// areaColor: '#9db8d2', |
||||
|
// shadowColor: 'rgba(0, 0, 0, 1)', |
||||
|
// shadowBlur: 0, |
||||
|
// shadowOffsetX: 0, |
||||
|
// shadowOffsetY: 10, |
||||
|
// borderColor: 'rgba(0, 0, 0, 0.7)', |
||||
|
// borderWidth: 0.5 |
||||
|
// }, |
||||
|
// emphasis: { |
||||
|
// areaColor: '#2AB8FF', |
||||
|
// borderWidth: 1, |
||||
|
// color: 'green', |
||||
|
// label: { |
||||
|
// show: false |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// }, |
||||
|
geo: { |
||||
|
show: true, |
||||
|
map: 'xingtai', |
||||
|
roam: false, |
||||
|
label: { |
||||
|
normal: { |
||||
|
show: false |
||||
|
}, |
||||
|
emphasis: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
areaColor: '#3c8dbc', // 没有值得时候颜色 |
||||
|
borderColor: '#097bba' |
||||
|
}, |
||||
|
emphasis: { |
||||
|
areaColor: '#fbd456' // 鼠标滑过选中的颜色 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
visualMap: { |
||||
|
show: false, |
||||
|
left: 'right', |
||||
|
bottom: 20, |
||||
|
min: 0, |
||||
|
max: 100, |
||||
|
text: ['高', '低'], |
||||
|
calculable: true, |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
}, |
||||
|
inRange: { |
||||
|
color: ['#f37b1d', '#1e6ff0', '#6e41c7', '#34b157'], |
||||
|
symbolSize: [30, 100] |
||||
|
} |
||||
|
}, |
||||
|
toolbox: { |
||||
|
show: false, |
||||
|
// orient: 'vertical', |
||||
|
left: 'left', |
||||
|
top: 'top', |
||||
|
feature: { |
||||
|
dataView: { readOnly: false }, |
||||
|
restore: {}, |
||||
|
saveAsImage: {} |
||||
|
} |
||||
|
}, |
||||
|
textStyle: { |
||||
|
fontSize: 16 |
||||
|
}, |
||||
|
series: [ |
||||
|
// { |
||||
|
// name: '机构数量', |
||||
|
// type: 'map', |
||||
|
// roam: true, |
||||
|
// map: 'xingtai', |
||||
|
// emphasis: { |
||||
|
// label: { |
||||
|
// show: true, |
||||
|
// }, |
||||
|
// }, |
||||
|
// label: { |
||||
|
// show: true, |
||||
|
// // formatter: '{b}:{@score}人' |
||||
|
// }, |
||||
|
// data: this.countyData, |
||||
|
// }, |
||||
|
{ |
||||
|
name: '机构数量', |
||||
|
type: 'map', |
||||
|
roam: false, |
||||
|
map: 'xingtai', |
||||
|
label: { |
||||
|
show: false |
||||
|
// formatter: '{b}:{@score}人' |
||||
|
}, |
||||
|
data: this.countyData, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: 20, |
||||
|
fontWeight: 'bolder' |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
// borderType: 'solid', |
||||
|
// borderWidth: 3, |
||||
|
// borderColor: '#e83e11', |
||||
|
shadowBlur: 20, |
||||
|
shadowOffsetX: 5, |
||||
|
shadowOffsetY: 5 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// { |
||||
|
// // 小图标圆圈 |
||||
|
// symbol: 'circle', |
||||
|
// symbolSize: 20, |
||||
|
// label: { |
||||
|
// normal: { |
||||
|
// formatter: '{b}', |
||||
|
// position: 'right', |
||||
|
// show: true |
||||
|
// // textStyle: { |
||||
|
// // color: '#f00', |
||||
|
// // fontSize: 12 |
||||
|
// // }, |
||||
|
// }, |
||||
|
// emphasis: { |
||||
|
// show: true |
||||
|
// } |
||||
|
// }, |
||||
|
// itemStyle: { |
||||
|
// color: '#fa3008', |
||||
|
// opacity: 1, |
||||
|
// borderColor: '#9603ea', |
||||
|
// borderWidth: 1 |
||||
|
|
||||
|
// // normal: { |
||||
|
// // opacity : 1, |
||||
|
// // borderColor: '#fa3008', |
||||
|
// // borderWidth: 1, |
||||
|
// // color: '#ff' |
||||
|
// // } |
||||
|
// }, |
||||
|
// name: 'light', |
||||
|
// type: 'scatter', |
||||
|
// coordinateSystem: 'geo', |
||||
|
// data: this.chartDatas2 |
||||
|
// }, |
||||
|
// { |
||||
|
// // 小图标老人数量 |
||||
|
// name: 'Top 5', |
||||
|
// type: 'scatter', |
||||
|
// coordinateSystem: 'geo', |
||||
|
// // symbol: 'pin', |
||||
|
// // symbolSize: [50, 50], |
||||
|
// symbolOffset: [0, -12], |
||||
|
// symbol: 'image://home/markertu3.png', |
||||
|
// symbolSize: [30, 30], |
||||
|
// label: { |
||||
|
// normal: { |
||||
|
// show: false, |
||||
|
// textStyle: { |
||||
|
// color: '#ff0', |
||||
|
// fontSize: 12 |
||||
|
// }, |
||||
|
// formatter(value) { |
||||
|
// return value.data.value[2] // |
||||
|
// // return value.data.areaCount// |
||||
|
// } |
||||
|
// } |
||||
|
// }, |
||||
|
// itemStyle: { |
||||
|
// normal: { |
||||
|
// opacity: 1, |
||||
|
// borderColor: '#fa3008', |
||||
|
// borderWidth: 1, |
||||
|
// color: '#d800ff' |
||||
|
// // color: '#D8BC37' // 标志颜色 |
||||
|
// } |
||||
|
// }, |
||||
|
// data: this.chartDatas2, |
||||
|
// showEffectOn: 'render', |
||||
|
// rippleEffect: { |
||||
|
// brushType: 'stroke' |
||||
|
// }, |
||||
|
// hoverAnimation: true, |
||||
|
// zlevel: 1 |
||||
|
// } |
||||
|
// { |
||||
|
// data: [ |
||||
|
// { name: '宁晋县', value: [114.921027, 37.618956, 56] }, |
||||
|
// { name: '襄都区', value: 0 }, |
||||
|
// { name: '信都区', value: 0 }, |
||||
|
// { name: '任泽区', value: 0 }, |
||||
|
// { name: '南和区', value: 0 }, |
||||
|
// { name: '临城县', value: 0 }, |
||||
|
// { name: '内丘县', value: 0 }, |
||||
|
// { name: '柏乡县', value: 0 }, |
||||
|
// { name: '隆尧县', value: 0 }, |
||||
|
// { name: '巨鹿县', value: 0 }, |
||||
|
// { name: '新河县', value: 0 }, |
||||
|
// { name: '广宗县', value: 0 }, |
||||
|
// { name: '平乡县', value: 0 }, |
||||
|
// { name: '威县', value: 0 }, |
||||
|
// { name: '清河县', value: 0 }, |
||||
|
// { name: '临西县', value: 0 }, |
||||
|
// { name: '南宫市', value: 0 }, |
||||
|
// { name: '沙河市', value: 0 } |
||||
|
// ], |
||||
|
// name: '点', |
||||
|
// type: 'effectScatter', |
||||
|
// coordinateSystem: 'geo', |
||||
|
// // symbol: 'pin', // 气泡 |
||||
|
// symbolSize: 20, |
||||
|
// label: { |
||||
|
// normal: { |
||||
|
// show: true, |
||||
|
// formatter: function(params) { |
||||
|
// return params.data.value[2] |
||||
|
// }, |
||||
|
// textStyle: { |
||||
|
// color: '#fff', |
||||
|
// fontSize: 9 |
||||
|
// } |
||||
|
// } |
||||
|
// }, |
||||
|
// itemStyle: { |
||||
|
// normal: { |
||||
|
// color: '#F62157' // 标志颜色'#F62157' |
||||
|
// } |
||||
|
// }, |
||||
|
// zlevel: 6 |
||||
|
// } |
||||
|
], |
||||
|
animation: true |
||||
|
} |
||||
|
myChart.setOption(option) |
||||
|
myChart.hideLoading() |
||||
|
myChart.on('click', function(params) { |
||||
|
var areaCode = params.data.county.areaCode |
||||
|
var name = params.name |
||||
|
var jwd = params.data.county.jwd |
||||
|
_self.$router.push({ |
||||
|
path: '/kanban/jujiayanglao2', |
||||
|
query: { name: name, areaCode: areaCode, jwd: jwd } |
||||
|
}) |
||||
|
}) |
||||
|
setTimeout(() => { |
||||
|
myChart.resize() |
||||
|
// alert('ok') |
||||
|
}, 800) |
||||
|
|
||||
|
var _this = this |
||||
|
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 |
||||
|
_this.charPie3currentIndex = 0 |
||||
|
// 2、鼠标移动上去的时候的高亮动画 |
||||
|
this.chart.on('mouseover', function(param) { |
||||
|
isSet = false |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0 |
||||
|
// dataIndex: _this.charPie3currentIndex |
||||
|
}) |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex |
||||
|
}) |
||||
|
}) |
||||
|
// 3、自动高亮展示 |
||||
|
var chartHover = function() { |
||||
|
_this.dataLen = option.series[0].data.length |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0 |
||||
|
// dataIndex: _this.charPie3currentIndex |
||||
|
}) |
||||
|
_this.charPie3currentIndex = |
||||
|
(_this.charPie3currentIndex + 1) % _this.dataLen |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: _this.charPie3currentIndex |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: _this.charPie3currentIndex |
||||
|
}) |
||||
|
} |
||||
|
clearInterval(_this.startCharts) |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
// 4、鼠标移出之后，恢复自动高亮 |
||||
|
this.chart.on('mouseout', function(param) { |
||||
|
if (!isSet) { |
||||
|
clearInterval(_this.startCharts) |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
isSet = true |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,185 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart', |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%', |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px', |
||||
|
}, |
||||
|
autoResize: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
}, |
||||
|
nextUrl: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ legend, xAxis, Data, nextUrl, params } = {}) { |
||||
|
this.chart.setOption({ |
||||
|
title: { |
||||
|
text: legend[0], |
||||
|
// subtext: '纯属虚构', |
||||
|
x: 'center', |
||||
|
// bottom: 10 |
||||
|
textStyle: { |
||||
|
fontSize: 18, |
||||
|
}, |
||||
|
bottom: 10, |
||||
|
// top: 0 |
||||
|
}, |
||||
|
// backgroundColor: '#F7F7F7', |
||||
|
xAxis: { |
||||
|
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
||||
|
boundaryGap: false, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 40, |
||||
|
top: 10, |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'cross', |
||||
|
}, |
||||
|
padding: [5, 10], |
||||
|
}, |
||||
|
yAxis: { |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
// legend: { |
||||
|
// data: legend //["name1","name2"] |
||||
|
// }, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: legend[0], // "name1" |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#FF005A', |
||||
|
lineStyle: { |
||||
|
color: '#FF005A', |
||||
|
width: 2, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
smooth: true, |
||||
|
type: 'line', |
||||
|
data: Data.seriesData, |
||||
|
animationDuration: 2800, |
||||
|
animationEasing: 'cubicInOut', |
||||
|
}, |
||||
|
// ,{ |
||||
|
// name: 'actual', // "name2" |
||||
|
// smooth: true, |
||||
|
// type: 'line', |
||||
|
// itemStyle: { |
||||
|
// normal: { |
||||
|
// color: '#3888fa', |
||||
|
// lineStyle: { |
||||
|
// color: '#3888fa', |
||||
|
// width: 2 |
||||
|
// }, |
||||
|
// areaStyle: { |
||||
|
// color: '#f3f8ff' |
||||
|
// } |
||||
|
// } |
||||
|
// }, |
||||
|
// data: actualData, |
||||
|
// animationDuration: 2800, |
||||
|
// animationEasing: 'quadraticOut' |
||||
|
// } |
||||
|
], |
||||
|
}) |
||||
|
this.chart.on('click', function (param) { |
||||
|
if (nextUrl.length > 0) { |
||||
|
// 判断 nexurl数与那个列 |
||||
|
var url = '' |
||||
|
for (var i = 0; i < nextUrl.length; i++) { |
||||
|
if (nextUrl[i].name === param.name) { |
||||
|
url = nextUrl[i].url |
||||
|
} |
||||
|
} |
||||
|
// --在当前路径新窗口打开 |
||||
|
router.push({ |
||||
|
path: url, |
||||
|
query: { |
||||
|
id: param.name, |
||||
|
start: params.start, |
||||
|
end: params.end, |
||||
|
}, |
||||
|
}) |
||||
|
// --在最外层新窗口打开 |
||||
|
// let routeUrl = router.resolve({ |
||||
|
// path: './situationMapZhiDui', |
||||
|
// query: { id: 96 } |
||||
|
// }) |
||||
|
// window.open(routeUrl.href, '_blank') |
||||
|
|
||||
|
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
||||
|
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
||||
|
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,234 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart', |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%', |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px', |
||||
|
}, |
||||
|
autoResize: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
}, |
||||
|
nextUrl: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
// debugger |
||||
|
console.log(echarts) |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ title, xAxis, series, name, unit, nextUrl, url } = {}) { |
||||
|
this.chart.setOption({ |
||||
|
title: { |
||||
|
text: title, |
||||
|
x: 'center', |
||||
|
// bottom: 10, |
||||
|
top: 10, |
||||
|
textStyle: { |
||||
|
fontSize: 20, |
||||
|
color: '#8657c8', |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 10, |
||||
|
top: 10, |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1', // 坐标线的宽度 |
||||
|
}, |
||||
|
}, |
||||
|
type: 'category', |
||||
|
boundaryGap: false, |
||||
|
data: xAxis, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
fontSize: '14', |
||||
|
color: '#fff', // 坐标值得具体的颜色 |
||||
|
}, |
||||
|
interval: 0, |
||||
|
rotate: 25, // x文字斜率 |
||||
|
}, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
formatter: '{value}' + unit, |
||||
|
// formatter: '{value} ', |
||||
|
textStyle: { |
||||
|
fontSize: '14', |
||||
|
color: '#fff', // 坐标值得具体的颜色 |
||||
|
}, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: true, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1', // 坐标线的宽度 |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
// yAxis: { |
||||
|
// axisLine: { |
||||
|
// lineStyle: { |
||||
|
// type: 'solid', |
||||
|
// color: '#fff', // 左边线的颜色 |
||||
|
// width: '1'// 坐标线的宽度 |
||||
|
// } |
||||
|
// }, |
||||
|
// type: 'value' |
||||
|
// }, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'cross', |
||||
|
label: { |
||||
|
backgroundColor: '#6a7985', |
||||
|
}, |
||||
|
}, |
||||
|
// formatter: '{b}：{c}' |
||||
|
formatter: '{b} : {c} ' + unit, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
// name:'数据接入增量', |
||||
|
name: name, |
||||
|
type: 'line', |
||||
|
stack: '总量', |
||||
|
// symbol: 'none', // 去掉折线上的圆点 |
||||
|
// itemStyle: { |
||||
|
// color: '#5dd9da' |
||||
|
// }, |
||||
|
lineStyle: { |
||||
|
color: '#5dd9da', |
||||
|
width: 0.5, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#1372fc', // 改变折线点的颜色 |
||||
|
lineStyle: { |
||||
|
color: '#05bde2', // 改变折线颜色 |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
areaStyle: { |
||||
|
// 颜色自上而下渐变// 1代表上面 |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#0b6f80', |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.5, |
||||
|
color: '#14639a', |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#204fa6', |
||||
|
}, |
||||
|
]), |
||||
|
opacity: 0.8, // 填充区域透明度 |
||||
|
}, |
||||
|
data: series[0].data, |
||||
|
// data:[0, 25, 50, 75, 100, 0, 25, 50, 75, 100, 0, 25] |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
// series: series |
||||
|
}) |
||||
|
this.chart.on('click', function (param) { |
||||
|
if (nextUrl.length > 0) { |
||||
|
// 判断 nexurl数与那个列 |
||||
|
var url = '' |
||||
|
for (var i = 0; i < nextUrl.length; i++) { |
||||
|
if (nextUrl[i].name === param.name) { |
||||
|
url = nextUrl[i].url |
||||
|
} |
||||
|
} |
||||
|
// --在当前路径新窗口打开 |
||||
|
router.push({ |
||||
|
path: url, |
||||
|
query: { |
||||
|
id: param.name, |
||||
|
start: params.start, |
||||
|
end: params.end, |
||||
|
}, |
||||
|
}) |
||||
|
// --在最外层新窗口打开 |
||||
|
// let routeUrl = router.resolve({ |
||||
|
// path: './situationMapZhiDui', |
||||
|
// query: { id: 96 } |
||||
|
// }) |
||||
|
// window.open(routeUrl.href, '_blank') |
||||
|
|
||||
|
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
||||
|
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
||||
|
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,235 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
const colorList = [ |
||||
|
'#87cefa', |
||||
|
'#ffd700', |
||||
|
'#6b8e23', |
||||
|
'#ff7f50', |
||||
|
'#da70d6', |
||||
|
'#32cd32', |
||||
|
'#cd5c5c', |
||||
|
'#00fa9a', |
||||
|
'#1e90ff', |
||||
|
'#ba55d3', |
||||
|
'#ff00ff', |
||||
|
'#7b68ee', |
||||
|
'#6495ed', |
||||
|
'#3cb371', |
||||
|
'#b8860b', |
||||
|
'#ff69b4', |
||||
|
'#ff6347', |
||||
|
'#ffa500', |
||||
|
'#40e0d0', |
||||
|
'#30e0e0', |
||||
|
] |
||||
|
// const colorList1 = [ |
||||
|
// '#C1232B', |
||||
|
// '#B5C334', |
||||
|
// '#FCCE10', |
||||
|
// '#E87C25', |
||||
|
// '#27727B', |
||||
|
// '#FE8463', |
||||
|
// '#9BCA63', |
||||
|
// '#FAD860', |
||||
|
// '#F3A43B', |
||||
|
// '#60C0DD', |
||||
|
// '#D7504B', |
||||
|
// '#C6E579', |
||||
|
// '#F4E001', |
||||
|
// '#F0805A', |
||||
|
// '#26C0C0' |
||||
|
// ] |
||||
|
// const colorList2 = [ |
||||
|
// '#2F9323', |
||||
|
// '#D9B63A', |
||||
|
// '#2E2AA4', |
||||
|
// '#9F2E61', |
||||
|
// '#4D670C', |
||||
|
// '#BF675F', |
||||
|
// '#1F814A', |
||||
|
// '#357F88', |
||||
|
// '#673509', |
||||
|
// '#310937', |
||||
|
// '#1B9637', |
||||
|
// '#F7393C' |
||||
|
// ] |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart', |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%', |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '385px', |
||||
|
}, |
||||
|
autoResize: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
}, |
||||
|
nextUrl: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ name, legend, xAxis, Data, nextUrl, unit, params } = {}) { |
||||
|
const list = [] |
||||
|
for (var i = 0; i < legend.length; i++) { |
||||
|
const item = { |
||||
|
name: legend[i], // "name1" |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: colorList[i], |
||||
|
lineStyle: { |
||||
|
color: colorList[i], |
||||
|
width: 2, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
// smooth: true, |
||||
|
type: 'line', |
||||
|
stack: '总量', // 叠加 |
||||
|
areaStyle: {}, // 叠加区域颜色 |
||||
|
data: |
||||
|
Data.seriesData && Data.seriesData.length > 0 |
||||
|
? Data.seriesData[i].value |
||||
|
: null, |
||||
|
animationDuration: 2800, |
||||
|
animationEasing: 'cubicInOut', |
||||
|
} |
||||
|
list.push(item) |
||||
|
} |
||||
|
|
||||
|
this.chart.setOption({ |
||||
|
title: { |
||||
|
text: name, |
||||
|
// subtext: '纯属虚构', |
||||
|
x: 'center', |
||||
|
bottom: 10, |
||||
|
// top: 5, |
||||
|
textStyle: { |
||||
|
fontSize: 18, |
||||
|
}, |
||||
|
}, |
||||
|
// backgroundColor: '#F7F7F7', |
||||
|
xAxis: { |
||||
|
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
||||
|
boundaryGap: false, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
// axisLabel: { |
||||
|
// interval: 0, |
||||
|
// rotate: 40 |
||||
|
// } |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 50, |
||||
|
top: 40, |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'cross', |
||||
|
}, |
||||
|
padding: [5, 10], |
||||
|
// formatter: '{a} {b} : {c} ' + unit |
||||
|
}, |
||||
|
yAxis: { |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
formatter: '{value}' + unit, |
||||
|
}, |
||||
|
}, |
||||
|
legend: { |
||||
|
data: legend, // ["name1","name2"] |
||||
|
}, |
||||
|
series: list, |
||||
|
}) |
||||
|
this.chart.on('click', function (param) { |
||||
|
if (nextUrl.length > 0) { |
||||
|
// 判断 nexurl数与那个列 |
||||
|
var url = '' |
||||
|
for (var i = 0; i < nextUrl.length; i++) { |
||||
|
if (nextUrl[i].name === param.seriesName) { |
||||
|
url = nextUrl[i].url |
||||
|
} |
||||
|
} |
||||
|
// --在当前路径新窗口打开 |
||||
|
router.push({ |
||||
|
path: url, |
||||
|
query: { |
||||
|
id: param.seriesName, |
||||
|
start: params.start, |
||||
|
end: params.end, |
||||
|
}, |
||||
|
}) |
||||
|
// --在最外层新窗口打开 |
||||
|
// let routeUrl = router.resolve({ |
||||
|
// path: './situationMapZhiDui', |
||||
|
// query: { id: 96 } |
||||
|
// }) |
||||
|
// window.open(routeUrl.href, '_blank') |
||||
|
|
||||
|
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
||||
|
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
||||
|
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,132 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px' |
||||
|
}, |
||||
|
autoResize: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
}, |
||||
|
nextUrl: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ title, xAxis, series, nextUrl, url } = {}) { |
||||
|
this.chart.setOption({ |
||||
|
title: { |
||||
|
text: title, |
||||
|
x: 'center', |
||||
|
// bottom: 10, |
||||
|
top: 10, |
||||
|
textStyle: { |
||||
|
fontSize: 20, |
||||
|
color: '#8657c8' |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 10, |
||||
|
top: 10, |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
boundaryGap: false, |
||||
|
data: xAxis |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
}, |
||||
|
series: series |
||||
|
|
||||
|
}) |
||||
|
this.chart.on('click', function(param) { |
||||
|
if (nextUrl.length > 0) { |
||||
|
// 判断 nexurl数与那个列 |
||||
|
var url = '' |
||||
|
for (var i = 0; i < nextUrl.length; i++) { |
||||
|
if (nextUrl[i].name === param.name) { |
||||
|
url = nextUrl[i].url |
||||
|
} |
||||
|
} |
||||
|
// --在当前路径新窗口打开 |
||||
|
router.push({ |
||||
|
path: url, |
||||
|
query: { |
||||
|
id: param.name, |
||||
|
start: params.start, |
||||
|
end: params.end |
||||
|
} |
||||
|
}) |
||||
|
// --在最外层新窗口打开 |
||||
|
// let routeUrl = router.resolve({ |
||||
|
// path: './situationMapZhiDui', |
||||
|
// query: { id: 96 } |
||||
|
// }) |
||||
|
// window.open(routeUrl.href, '_blank') |
||||
|
|
||||
|
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
||||
|
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
||||
|
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,163 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '300px' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
title, |
||||
|
xAxis, |
||||
|
series, |
||||
|
legend, |
||||
|
unit, |
||||
|
rotate |
||||
|
} = {}) { |
||||
|
this.chart.setOption({ |
||||
|
title: { |
||||
|
text: title, |
||||
|
// subtext: '纯属虚构', |
||||
|
x: 'center', |
||||
|
bottom: 10, |
||||
|
// top: 5, |
||||
|
textStyle: { |
||||
|
fontSize: 18 |
||||
|
} |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis' |
||||
|
|
||||
|
}, |
||||
|
legend: { |
||||
|
x: 'center', |
||||
|
bottom: 0, |
||||
|
data: legend, |
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 30, |
||||
|
top: 20, |
||||
|
containLabel: true |
||||
|
}, |
||||
|
// toolbox: { |
||||
|
// show: true, |
||||
|
// feature: { |
||||
|
// dataZoom: { |
||||
|
// yAxisIndex: 'none' |
||||
|
// }, |
||||
|
// dataView: { readOnly: false }, |
||||
|
// magicType: { type: ['line', 'bar'] }, |
||||
|
// restore: {}, |
||||
|
// saveAsImage: {} |
||||
|
// } |
||||
|
// }, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
boundaryGap: false, |
||||
|
data: xAxis, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1' // 坐标线的宽度 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
textStyle: {fontSize: 14, |
||||
|
color: '#fff' // 坐标值得具体的颜色 |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
axisTick: { |
||||
|
show: true |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} ', |
||||
|
textStyle: {fontSize: 14, |
||||
|
color: '#fff' // 坐标值得具体的颜色 |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
axisLine: {show: true, |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
color: '#fff', // 左边线的颜色 |
||||
|
width: '1' // 坐标线的宽度 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
unit: unit, |
||||
|
rotate: rotate, |
||||
|
series: series |
||||
|
}) |
||||
|
this.chart.on('click', function(param) { |
||||
|
this.callParents(param) |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(name) { |
||||
|
this.$emit('pieChartFunction', name) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,263 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart', |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%', |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px', |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
startCharts: null, |
||||
|
dataLen: 0, |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
if (this.startCharts) { |
||||
|
clearInterval(this.startCharts) |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ legend, seriesName, Data, nextUrl, unit, params } = {}) { |
||||
|
var option = { |
||||
|
title: { |
||||
|
text: seriesName, |
||||
|
// subtext: '纯属虚构', |
||||
|
x: 'left', |
||||
|
// bottom: 10, |
||||
|
top: 10, |
||||
|
left: 30, |
||||
|
|
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff', |
||||
|
fontWeight: 'bolder', // 字体加粗 |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 40, |
||||
|
top: 10, |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
formatter: '{b} : {c} ' + unit + ' ({d}%)', |
||||
|
// formatter: '{a} <br/>{b} : {c} ({d}%)' |
||||
|
}, |
||||
|
legend: { |
||||
|
right: '10', |
||||
|
top: '10', |
||||
|
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff', |
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
||||
|
type: 'pie', |
||||
|
// roseType: 'radius', |
||||
|
radius: [35, 55], |
||||
|
center: ['50%', '50%'], |
||||
|
data: Data.seriesData, |
||||
|
// [ |
||||
|
// { value: 320, name: 'Industries' }, |
||||
|
// { value: 240, name: 'Technology' }, |
||||
|
// { value: 149, name: 'Forex' }, |
||||
|
// { value: 100, name: 'Gold' }, |
||||
|
// { value: 59, name: 'Forecasts' } |
||||
|
// ], |
||||
|
|
||||
|
animationEasing: 'cubicInOut', |
||||
|
animationDuration: 2600, |
||||
|
label: { |
||||
|
normal: { |
||||
|
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ', |
||||
|
formatter: '{b|{b}：}{c} ' + unit + ' \n{hr|}\n {per|{d}%} ', |
||||
|
// backgroundColor: '#eee', |
||||
|
// borderColor: '#aaa', |
||||
|
// borderWidth: 1, |
||||
|
// borderRadius: 4, |
||||
|
// shadowBlur:3, |
||||
|
// shadowOffsetX: 2, |
||||
|
// shadowOffsetY: 2, |
||||
|
// shadowColor: '#999', |
||||
|
padding: [0, 7], |
||||
|
rich: { |
||||
|
// a: { |
||||
|
// color: '#999', |
||||
|
// lineHeight: 22, |
||||
|
// align: 'center' |
||||
|
// }, |
||||
|
// abg: { |
||||
|
// backgroundColor: '#333', |
||||
|
// width: '100%', |
||||
|
// align: 'right', |
||||
|
// height: 22, |
||||
|
// borderRadius: [4, 4, 0, 0] |
||||
|
// }, |
||||
|
hr: { |
||||
|
borderColor: '#aaa', |
||||
|
width: '100%', |
||||
|
borderWidth: 0.5, |
||||
|
height: 0, |
||||
|
}, |
||||
|
b: { |
||||
|
fontSize: 14, |
||||
|
lineHeight: 33, |
||||
|
}, |
||||
|
per: { |
||||
|
color: '#eee', |
||||
|
backgroundColor: '#334455', |
||||
|
padding: [2, 4], |
||||
|
borderRadius: 2, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
} |
||||
|
this.chart.setOption(option) |
||||
|
|
||||
|
this.chart.on('click', function (param) { |
||||
|
if (nextUrl.length > 0) { |
||||
|
// 判断 nexurl数与那个列 |
||||
|
var url = '' |
||||
|
for (var i = 0; i < nextUrl.length; i++) { |
||||
|
if (nextUrl[i].name === param.name) { |
||||
|
url = nextUrl[i].url |
||||
|
} |
||||
|
} |
||||
|
// --在当前路径新窗口打开 |
||||
|
router.push({ |
||||
|
path: url, |
||||
|
query: { |
||||
|
id: param.name, |
||||
|
start: params.start, |
||||
|
end: params.end, |
||||
|
}, |
||||
|
}) |
||||
|
// --在最外层新窗口打开 |
||||
|
// let routeUrl = router.resolve({ |
||||
|
// path: './situationMapZhiDui', |
||||
|
// query: { id: 96 } |
||||
|
// }) |
||||
|
// window.open(routeUrl.href, '_blank') |
||||
|
|
||||
|
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
||||
|
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
||||
|
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
||||
|
} |
||||
|
}) |
||||
|
var _this = this |
||||
|
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 |
||||
|
var charPie3currentIndex = 0 |
||||
|
clearInterval(_this.startCharts) |
||||
|
// 2、鼠标移动上去的时候的高亮动画 |
||||
|
this.chart.on('mouseover', function (param) { |
||||
|
isSet = false |
||||
|
clearInterval(_this.startCharts) |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex, |
||||
|
}) |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex, |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex, |
||||
|
}) |
||||
|
}) |
||||
|
// 3、自动高亮展示 |
||||
|
var chartHover = function () { |
||||
|
_this.dataLen = option.series[0].data.length |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex, |
||||
|
}) |
||||
|
charPie3currentIndex = (charPie3currentIndex + 1) % _this.dataLen |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex, |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex, |
||||
|
}) |
||||
|
} |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
// 4、鼠标移出之后，恢复自动高亮 |
||||
|
this.chart.on('mouseout', function (param) { |
||||
|
if (!isSet) { |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
isSet = true |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,237 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
// import router from '../../../router' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
startCharts: null, |
||||
|
dataLen: 0 |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
if (this.startCharts) { |
||||
|
clearInterval(this.startCharts) |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
title, |
||||
|
legend, |
||||
|
seriesName, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
unit, |
||||
|
params |
||||
|
} = {}) { |
||||
|
var option = { |
||||
|
title: title, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 10, |
||||
|
top: 30 |
||||
|
// containLabel: true |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
formatter: '{b} : {c} ' + unit + ' ({d}%)' |
||||
|
// formatter: '{a} <br/>{b} : {c} ({d}%)' |
||||
|
}, |
||||
|
legend: { |
||||
|
right: '10', |
||||
|
top: '10', |
||||
|
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff' |
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
||||
|
type: 'pie', |
||||
|
// roseType: 'radius', |
||||
|
radius: [0, 75], |
||||
|
center: ['50%', '50%'], |
||||
|
data: Data.seriesData, |
||||
|
// [ |
||||
|
// { value: 320, name: 'Industries' }, |
||||
|
// { value: 240, name: 'Technology' }, |
||||
|
// { value: 149, name: 'Forex' }, |
||||
|
// { value: 100, name: 'Gold' }, |
||||
|
// { value: 59, name: 'Forecasts' } |
||||
|
// ], |
||||
|
|
||||
|
animationEasing: 'cubicInOut', |
||||
|
animationDuration: 2600, |
||||
|
label: { |
||||
|
normal: { |
||||
|
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ', |
||||
|
formatter: '{b|{b}：}{c} ' + unit + ' {per|{d}%} ', |
||||
|
// backgroundColor: '#eee', |
||||
|
// borderColor: '#aaa', |
||||
|
// borderWidth: 1, |
||||
|
// borderRadius: 4, |
||||
|
// shadowBlur:3, |
||||
|
// shadowOffsetX: 2, |
||||
|
// shadowOffsetY: 2, |
||||
|
// shadowColor: '#999', |
||||
|
padding: [0, 7], |
||||
|
rich: { |
||||
|
// a: { |
||||
|
// color: '#999', |
||||
|
// lineHeight: 22, |
||||
|
// align: 'center' |
||||
|
// }, |
||||
|
// abg: { |
||||
|
// backgroundColor: '#333', |
||||
|
// width: '100%', |
||||
|
// align: 'right', |
||||
|
// height: 22, |
||||
|
// borderRadius: [4, 4, 0, 0] |
||||
|
// }, |
||||
|
hr: { |
||||
|
borderColor: '#aaa', |
||||
|
width: '100%', |
||||
|
borderWidth: 0.5, |
||||
|
height: 0 |
||||
|
}, |
||||
|
b: { |
||||
|
fontSize: 14, |
||||
|
lineHeight: 33 |
||||
|
}, |
||||
|
per: { |
||||
|
color: '#eee', |
||||
|
backgroundColor: '#334455', |
||||
|
padding: [2, 4], |
||||
|
borderRadius: 2 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
this.chart.setOption(option) |
||||
|
var _this = this |
||||
|
this.chart.on('click', function(param) { |
||||
|
// console.log('选择：' + JSON.stringify(param.data)) |
||||
|
_this.callParents(param.data) |
||||
|
}) |
||||
|
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 |
||||
|
var charPie3currentIndex = 0 |
||||
|
clearInterval(_this.startCharts) |
||||
|
// 2、鼠标移动上去的时候的高亮动画 |
||||
|
this.chart.on('mouseover', function(param) { |
||||
|
isSet = false |
||||
|
clearInterval(_this.startCharts) |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex |
||||
|
}) |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex |
||||
|
}) |
||||
|
}) |
||||
|
// 3、自动高亮展示 |
||||
|
var chartHover = function() { |
||||
|
_this.dataLen = option.series[0].data.length |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex |
||||
|
}) |
||||
|
charPie3currentIndex = (charPie3currentIndex + 1) % _this.dataLen |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex |
||||
|
}) |
||||
|
} |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
// 4、鼠标移出之后，恢复自动高亮 |
||||
|
this.chart.on('mouseout', function(param) { |
||||
|
if (!isSet) { |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
isSet = true |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(data) { |
||||
|
// console.log('调用：' + name) |
||||
|
this.$emit('piecharChildFunction', data) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,264 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
// import router from '../../../router' |
||||
|
|
||||
|
// const animationDuration = 6000 |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
startCharts: null, |
||||
|
dataLen: 0 |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
if (this.startCharts) { |
||||
|
clearInterval(this.startCharts) |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
|
||||
|
setOptions({ |
||||
|
seriesName, |
||||
|
legend, |
||||
|
xAxis, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
rotate, |
||||
|
unit, |
||||
|
params |
||||
|
} = {}) { |
||||
|
// Data:[{name:"name",date:[ { value: 335, name: "直达", selected: true }]},{name:"name",date:[ { value: 335, name: "直达" }]}] |
||||
|
var option = { |
||||
|
title: { |
||||
|
text: seriesName, |
||||
|
x: 'left', |
||||
|
// bottom: 10, |
||||
|
top: 10, |
||||
|
left: 30, |
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff', |
||||
|
fontWeight: 'bolder' // 字体加粗 |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 15, |
||||
|
right: 15, |
||||
|
bottom: 0, |
||||
|
// top: 90, |
||||
|
containLabel: true |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
formatter: '{b} : {c} ' + unit + ' ({d}%)' |
||||
|
// formatter: "{a} <br/>{b}: {c} ({d}%)" |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
// name: Data[0].name, |
||||
|
type: 'pie', |
||||
|
selectedMode: 'single', |
||||
|
radius: [0, '25%'], |
||||
|
|
||||
|
label: { |
||||
|
normal: { |
||||
|
position: 'inner' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
normal: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
data: Data[0].data |
||||
|
// data: [ |
||||
|
// { value: 335, name: "直达", selected: true }, |
||||
|
// { value: 679, name: "营销广告" }, |
||||
|
// { value: 1548, name: "搜索引擎" } |
||||
|
// ] |
||||
|
}, |
||||
|
{ |
||||
|
// name: Data[1].name, |
||||
|
type: 'pie', |
||||
|
radius: ['30%', '45%'], |
||||
|
label: { |
||||
|
normal: { |
||||
|
// formatter: "{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ", |
||||
|
formatter: '{b} \n{hr|}\n {per| {c}' + unit + '({d}%})', |
||||
|
// backgroundColor: "#eee", |
||||
|
// borderColor: "#aaa", |
||||
|
// borderWidth: 1, |
||||
|
// borderRadius: 4, |
||||
|
// shadowBlur:3, |
||||
|
// shadowOffsetX: 2, |
||||
|
// shadowOffsetY: 2, |
||||
|
// shadowColor: '#999', |
||||
|
// padding: [0, 7], |
||||
|
rich: { |
||||
|
// a: { |
||||
|
// color: "#999", |
||||
|
// lineHeight: 22, |
||||
|
// align: "center" |
||||
|
// }, |
||||
|
// // abg: { |
||||
|
// // backgroundColor: '#333', |
||||
|
// // width: '100%', |
||||
|
// // align: 'right', |
||||
|
// // height: 22, |
||||
|
// // borderRadius: [4, 4, 0, 0] |
||||
|
// // }, |
||||
|
hr: { |
||||
|
borderColor: '#aaa', |
||||
|
width: '100%', |
||||
|
borderWidth: 0.5, |
||||
|
height: 0 |
||||
|
}, |
||||
|
// b: { |
||||
|
// fontSize: 18, |
||||
|
// lineHeight: 33 |
||||
|
// }, |
||||
|
per: { |
||||
|
color: '#eee', |
||||
|
backgroundColor: '#334455', |
||||
|
padding: [2, 4], |
||||
|
borderRadius: 2 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
textStyle: { |
||||
|
fontSize: '8px' |
||||
|
} |
||||
|
}, |
||||
|
data: Data[1].data |
||||
|
// data: [ |
||||
|
// { value: 335, name: "直达" }, |
||||
|
// { value: 310, name: "邮件营销" }, |
||||
|
// { value: 234, name: "联盟广告" }, |
||||
|
// { value: 135, name: "视频广告" }, |
||||
|
// { value: 1048, name: "百度" }, |
||||
|
// { value: 251, name: "谷歌" }, |
||||
|
// { value: 147, name: "必应" }, |
||||
|
// { value: 102, name: "其他" } |
||||
|
// ] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
this.chart.setOption(option) |
||||
|
var _this = this |
||||
|
this.chart.on('click', function(param) { |
||||
|
_this.callParents(param.name) |
||||
|
}) |
||||
|
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 |
||||
|
var charPie3currentIndex = 0 |
||||
|
clearInterval(_this.startCharts) |
||||
|
// 2、鼠标移动上去的时候的高亮动画 |
||||
|
this.chart.on('mouseover', function(param) { |
||||
|
isSet = false |
||||
|
clearInterval(_this.startCharts) |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex |
||||
|
}) |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex |
||||
|
}) |
||||
|
}) |
||||
|
// 3、自动高亮展示 |
||||
|
var chartHover = function() { |
||||
|
_this.dataLen = option.series[0].data.length |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex |
||||
|
}) |
||||
|
charPie3currentIndex = (charPie3currentIndex + 1) % _this.dataLen |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex |
||||
|
}) |
||||
|
} |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
// 4、鼠标移出之后，恢复自动高亮 |
||||
|
this.chart.on('mouseout', function(param) { |
||||
|
if (!isSet) { |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
isSet = true |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 调用父组件 |
||||
|
callParents(name) { |
||||
|
this.$emit('piesFunction', name) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,267 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
startCharts: null, |
||||
|
chart: null, |
||||
|
dataLen: 0 |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
if (this.startCharts) { |
||||
|
clearInterval(this.startCharts) |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ legend, seriesName, Data, nextUrl, unit, params } = {}) { |
||||
|
var option = { |
||||
|
title: { |
||||
|
text: seriesName, |
||||
|
// subtext: '纯属虚构', |
||||
|
x: 'center', |
||||
|
bottom: 5, |
||||
|
// top: 5, |
||||
|
|
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff' |
||||
|
// fontWeight: "bolder" //字体加粗 |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 40, |
||||
|
top: 10, |
||||
|
containLabel: true |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
formatter: '{b} : {c} ' + unit + ' ({d}%)', |
||||
|
// formatter: '{a} <br/>{b} : {c} ({d}%)' |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
legend: { |
||||
|
left: 'left', |
||||
|
top: '10', |
||||
|
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
||||
|
type: 'pie', |
||||
|
// roseType: 'radius', |
||||
|
radius: [0, 40], |
||||
|
center: ['50%', '50%'], |
||||
|
data: Data.seriesData, |
||||
|
// [ |
||||
|
// { value: 320, name: 'Industries' }, |
||||
|
// { value: 240, name: 'Technology' }, |
||||
|
// { value: 149, name: 'Forex' }, |
||||
|
// { value: 100, name: 'Gold' }, |
||||
|
// { value: 59, name: 'Forecasts' } |
||||
|
// ], |
||||
|
|
||||
|
animationEasing: 'cubicInOut', |
||||
|
animationDuration: 2600, |
||||
|
label: { |
||||
|
normal: { |
||||
|
show: true, |
||||
|
position: 'inner', |
||||
|
formatter: '{c} ', |
||||
|
// formatter: |
||||
|
// "{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ", |
||||
|
// formatter: "{b|{b}：}{c} " + unit + " \n{hr|}\n {per|{d}%} ", |
||||
|
// backgroundColor: '#eee', |
||||
|
// borderColor: '#aaa', |
||||
|
// borderWidth: 1, |
||||
|
// borderRadius: 4, |
||||
|
// shadowBlur:3, |
||||
|
// shadowOffsetX: 2, |
||||
|
// shadowOffsetY: 2, |
||||
|
// shadowColor: '#999', |
||||
|
padding: [0, 7], |
||||
|
rich: { |
||||
|
// a: { |
||||
|
// color: '#999', |
||||
|
// lineHeight: 22, |
||||
|
// align: 'center' |
||||
|
// }, |
||||
|
// abg: { |
||||
|
// backgroundColor: '#333', |
||||
|
// width: '100%', |
||||
|
// align: 'right', |
||||
|
// height: 22, |
||||
|
// borderRadius: [4, 4, 0, 0] |
||||
|
// }, |
||||
|
hr: { |
||||
|
borderColor: '#aaa', |
||||
|
width: '100%', |
||||
|
borderWidth: 0.5, |
||||
|
height: 0 |
||||
|
}, |
||||
|
b: { |
||||
|
fontSize: 14, |
||||
|
lineHeight: 33 |
||||
|
}, |
||||
|
per: { |
||||
|
color: '#eee', |
||||
|
backgroundColor: '#334455', |
||||
|
padding: [2, 4], |
||||
|
borderRadius: 2 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
this.chart.setOption(option) |
||||
|
this.chart.on('click', function(param) { |
||||
|
if (nextUrl.length > 0) { |
||||
|
// 判断 nexurl数与那个列 |
||||
|
var url = '' |
||||
|
for (var i = 0; i < nextUrl.length; i++) { |
||||
|
if (nextUrl[i].name === param.name) { |
||||
|
url = nextUrl[i].url |
||||
|
} |
||||
|
} |
||||
|
// --在当前路径新窗口打开 |
||||
|
router.push({ |
||||
|
path: url, |
||||
|
query: { |
||||
|
id: param.name, |
||||
|
start: params.start, |
||||
|
end: params.end |
||||
|
} |
||||
|
}) |
||||
|
// --在最外层新窗口打开 |
||||
|
// let routeUrl = router.resolve({ |
||||
|
// path: './situationMapZhiDui', |
||||
|
// query: { id: 96 } |
||||
|
// }) |
||||
|
// window.open(routeUrl.href, '_blank') |
||||
|
|
||||
|
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
||||
|
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
||||
|
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
||||
|
} |
||||
|
}) |
||||
|
var _this = this |
||||
|
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 |
||||
|
var charPie3currentIndex = 0 |
||||
|
clearInterval(_this.startCharts) |
||||
|
// 2、鼠标移动上去的时候的高亮动画 |
||||
|
this.chart.on('mouseover', function(param) { |
||||
|
isSet = false |
||||
|
clearInterval(_this.startCharts) |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex |
||||
|
}) |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex |
||||
|
}) |
||||
|
}) |
||||
|
// 3、自动高亮展示 |
||||
|
var chartHover = function() { |
||||
|
_this.dataLen = option.series[0].data.length |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex |
||||
|
}) |
||||
|
charPie3currentIndex = (charPie3currentIndex + 1) % _this.dataLen |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex |
||||
|
}) |
||||
|
} |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
// 4、鼠标移出之后，恢复自动高亮 |
||||
|
this.chart.on('mouseout', function(param) { |
||||
|
if (!isSet) { |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
isSet = true |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,391 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{ height: height, width: width }" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from "./mixins/resize"; |
||||
|
import router from "../../../router/index"; |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: "chart", |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: "100%", |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: "100%", |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
startCharts: null, |
||||
|
charPie3currentIndex: 0, |
||||
|
dataLen: 0, |
||||
|
timer: null, |
||||
|
xzTimer:null |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
// mounted() { |
||||
|
// this.$nextTick(() => { |
||||
|
// this.initChart() |
||||
|
// }) |
||||
|
// }, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart(); |
||||
|
}); |
||||
|
// 加的自适应 |
||||
|
// this.init(); // 初始化图表 |
||||
|
let _this = this; |
||||
|
window.addEventListener("resize", function () { |
||||
|
if (_this.resizeTimer) clearTimeout(_this.resizeTimer); |
||||
|
_this.resizeTimer = setTimeout(function () { |
||||
|
_this.chart.resize(); |
||||
|
}, 100); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return; |
||||
|
} |
||||
|
if (this.timer) { |
||||
|
clearInterval(this.timer); |
||||
|
} |
||||
|
if (this.xzTimer) { |
||||
|
clearInterval(this.xzTimer); |
||||
|
} |
||||
|
this.chart.dispose(); |
||||
|
this.chart = null; |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, "macarons"); |
||||
|
this.setOptions(this.chartData); |
||||
|
}, |
||||
|
setOptions({ |
||||
|
legend, |
||||
|
seriesName, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
unit, |
||||
|
params, |
||||
|
color, |
||||
|
itemStyle, |
||||
|
} = {}) { |
||||
|
// |
||||
|
this.chart.on("mouseover", function (params) { |
||||
|
this.stopTimer() |
||||
|
}) |
||||
|
|
||||
|
this.chart.on("mouseout", function (params) { |
||||
|
this.startTimer() |
||||
|
}) |
||||
|
|
||||
|
setTimeout(this.startTimer, 500) |
||||
|
console.log("Data:" + JSON.stringify(Data)); |
||||
|
var option = { |
||||
|
// backgroundColor: "#0B1837", |
||||
|
color: [ |
||||
|
"#EAEA26", |
||||
|
"#906BF9", |
||||
|
"#FE5656", |
||||
|
"#01E17E", |
||||
|
"#3DD1F9", |
||||
|
"#FFAD05", |
||||
|
], |
||||
|
// title: { |
||||
|
// text: '网络/安全设备', |
||||
|
// top: 0, |
||||
|
// x: 'center', |
||||
|
// textAlign: 'center', |
||||
|
// textStyle: { |
||||
|
// color: '#fff', |
||||
|
// fontSize: 18, |
||||
|
// fontWeight: 2 |
||||
|
// } |
||||
|
// }, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
top: 10, |
||||
|
bottom: 10, |
||||
|
right: 10, |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
formatter: "{b} : {c} ({d}%)", |
||||
|
backgroundColor: '#242429cc', |
||||
|
|
||||
|
}, |
||||
|
legend: { |
||||
|
show:false, |
||||
|
type: "scroll", |
||||
|
orient: "vartical", |
||||
|
// x: "right", |
||||
|
top: "center", |
||||
|
right: "15", |
||||
|
// bottom: "0%", |
||||
|
itemWidth: 16, |
||||
|
itemHeight: 8, |
||||
|
itemGap: 16, |
||||
|
textStyle: { |
||||
|
color: "#A3E2F4", |
||||
|
fontSize: 12, |
||||
|
fontWeight: 0, |
||||
|
}, |
||||
|
data: ["IDS", "VPN", "交换机", "防火墙", "WAF", "堡垒机3333"], |
||||
|
}, |
||||
|
polar: {}, |
||||
|
angleAxis: { |
||||
|
interval: 1, |
||||
|
type: "category", |
||||
|
data: [], |
||||
|
z: 10, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: "#0B4A6B", |
||||
|
width: 1, |
||||
|
type: "solid", |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
interval: 0, |
||||
|
show: true, |
||||
|
color: "#0B4A6B", |
||||
|
margin: 8, |
||||
|
fontSize: 16, |
||||
|
}, |
||||
|
}, |
||||
|
radiusAxis: { |
||||
|
min: 40, |
||||
|
max: 120, |
||||
|
interval: 20, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: "#0B3E5E", |
||||
|
width: 1, |
||||
|
type: "solid", |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
formatter: "{value} %", |
||||
|
show: false, |
||||
|
padding: [0, 0, 20, 0], |
||||
|
color: "#0B3E5E", |
||||
|
fontSize: 16, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
color: "#0B3E5E", |
||||
|
width: 0, |
||||
|
type: "solid", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
calculable: true, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: ["5%", "10%"], |
||||
|
hoverAnimation: false, |
||||
|
labelLine: { |
||||
|
normal: { |
||||
|
show: false, |
||||
|
length: 30, |
||||
|
length2: 55, |
||||
|
}, |
||||
|
emphasis: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
data: [ |
||||
|
{ |
||||
|
name: "", |
||||
|
value: 0, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: "#0B4A6B", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
type: "pie", |
||||
|
// zlevel: 2, |
||||
|
silent: true, |
||||
|
radius: ["80%", "78%"], |
||||
|
label: { |
||||
|
normal: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
normal: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
data: this._pie3(), |
||||
|
}, |
||||
|
{ |
||||
|
type: "pie", |
||||
|
// zlevel: 2, |
||||
|
silent: true, |
||||
|
radius: ["63%", "61%"], |
||||
|
label: { |
||||
|
normal: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
normal: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
data: this._pie3(), |
||||
|
}, |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: ["90%", "95%"], |
||||
|
hoverAnimation: false, |
||||
|
labelLine: { |
||||
|
normal: { |
||||
|
show: false, |
||||
|
length: 30, |
||||
|
length2: 55, |
||||
|
}, |
||||
|
emphasis: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
name: "", |
||||
|
data: [ |
||||
|
{ |
||||
|
name: "", |
||||
|
value: 0, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: "#0B4A6B", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
stack: "a", |
||||
|
type: "pie", |
||||
|
radius: ["20%", "80%"], |
||||
|
roseType: "area", |
||||
|
zlevel: 10, |
||||
|
label: { |
||||
|
normal: { |
||||
|
show: true, |
||||
|
formatter: '{b}\n{c}万人', |
||||
|
textStyle: { |
||||
|
fontSize: 12, |
||||
|
color: '#87cefa' |
||||
|
}, |
||||
|
position: "outside", |
||||
|
}, |
||||
|
emphasis: { |
||||
|
show: true, |
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
normal: { |
||||
|
show: true, |
||||
|
length: 20, |
||||
|
length2: 22, |
||||
|
}, |
||||
|
emphasis: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
data:Data |
||||
|
// data: [ |
||||
|
// { |
||||
|
// value: 47, |
||||
|
// name: "周岁", |
||||
|
// }, |
||||
|
|
||||
|
// ], |
||||
|
}, |
||||
|
], |
||||
|
} |
||||
|
|
||||
|
console.log("开始加载"); |
||||
|
this.chart.setOption(option); |
||||
|
}, |
||||
|
stopTimer() { |
||||
|
clearInterval(this.timer); |
||||
|
|
||||
|
this.xzTimer = null; |
||||
|
}, |
||||
|
doing() { |
||||
|
let option = this.chart.getOption() |
||||
|
option.series[1].startAngle = option.series[1].startAngle - 1; |
||||
|
option.series[2].startAngle = option.series[2].startAngle + 1; |
||||
|
// option.series[6].data[0].value = option.series[6].data[0].value + 1; |
||||
|
this.chart.setOption(option) |
||||
|
}, |
||||
|
startTimer() { |
||||
|
this.timer = setInterval(this.doing, 300); |
||||
|
}, |
||||
|
_pie3() { |
||||
|
let dataArr = []; |
||||
|
for (var i = 0; i < 100; i++) { |
||||
|
if (i % 2 === 0) { |
||||
|
dataArr.push({ |
||||
|
name: (i + 1).toString(), |
||||
|
value: 25, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: "rgb(126,190,255)", |
||||
|
borderWidth: 0, |
||||
|
borderColor: "rgba(0,0,0,0)", |
||||
|
}, |
||||
|
}, |
||||
|
}) |
||||
|
} else { |
||||
|
dataArr.push({ |
||||
|
name: (i + 1).toString(), |
||||
|
value: 20, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: "rgba(0,0,0,0)", |
||||
|
borderWidth: 0, |
||||
|
borderColor: "rgba(0,0,0,0)", |
||||
|
}, |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
return dataArr; |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,301 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{ height: height, width: width }" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
startCharts: null, |
||||
|
charPie3currentIndex: 0, |
||||
|
dataLen: 0 |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
if (this.startCharts) { |
||||
|
clearInterval(this.startCharts) |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
legend, |
||||
|
seriesName, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
unit, |
||||
|
params, |
||||
|
color |
||||
|
} = {}) { |
||||
|
var option = { |
||||
|
title: { |
||||
|
text: seriesName, |
||||
|
// subtext: '纯属虚构', |
||||
|
x: 'center', |
||||
|
// bottom: 0, |
||||
|
top: 0, |
||||
|
// left: 30, |
||||
|
|
||||
|
textStyle: { |
||||
|
// fontSize: 20, |
||||
|
color: '#b7d8fa', |
||||
|
fontSize: 0 |
||||
|
|
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 10, |
||||
|
top: 0, |
||||
|
containLabel: true |
||||
|
}, |
||||
|
tooltip: { |
||||
|
show: false, |
||||
|
trigger: 'item', |
||||
|
formatter: '{b} : {c} ' + unit + ' ({d}%)' |
||||
|
// formatter: '{a} <br/>{b} : {c} ({d}%)' |
||||
|
}, |
||||
|
legend: { |
||||
|
// right: '10', |
||||
|
bottom: '0', |
||||
|
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
||||
|
textStyle: { |
||||
|
fontSize: 14, |
||||
|
color: '#b7d8fa' |
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
||||
|
type: 'pie', |
||||
|
color: color, |
||||
|
// color:[ 'green','blue'], |
||||
|
// roseType: 'radius', |
||||
|
radius: [40, 60], |
||||
|
center: ['50%', '45%'], |
||||
|
data: Data.seriesData, |
||||
|
// roseType: 'area', |
||||
|
// [ |
||||
|
// { value: 320, name: 'Industries' }, |
||||
|
// { value: 240, name: 'Technology' }, |
||||
|
// { value: 149, name: 'Forex' }, |
||||
|
// { value: 100, name: 'Gold' }, |
||||
|
// { value: 59, name: 'Forecasts' } |
||||
|
// ], |
||||
|
// itemStyle: { |
||||
|
// borderRadius: 3 |
||||
|
// borderColor: '#091243', |
||||
|
// borderWidth: 2 |
||||
|
// }, |
||||
|
animationEasing: 'cubicInOut', |
||||
|
animationDuration: 2600, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
label: { |
||||
|
show: false, |
||||
|
formatter: '{b}:\n{c} ' + unit, |
||||
|
position: 'center', |
||||
|
emphasis: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
fontSize: '14', |
||||
|
color: '#b7d8fa' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
label22: { |
||||
|
normal: { |
||||
|
show: false, |
||||
|
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ', |
||||
|
formatter: '{b|{b}：}{c} ' + unit + ' \n{hr|}\n {per|{d}%} ', |
||||
|
// backgroundColor: '#eee', |
||||
|
// borderColor: '#aaa', |
||||
|
// borderWidth: 1, |
||||
|
// borderRadius: 4, |
||||
|
// shadowBlur:3, |
||||
|
// shadowOffsetX: 2, |
||||
|
// shadowOffsetY: 2, |
||||
|
// shadowColor: '#999', |
||||
|
padding: [0, 7], |
||||
|
rich: { |
||||
|
// a: { |
||||
|
// color: '#999', |
||||
|
// lineHeight: 22, |
||||
|
// align: 'center' |
||||
|
// }, |
||||
|
// abg: { |
||||
|
// backgroundColor: '#333', |
||||
|
// width: '100%', |
||||
|
// align: 'right', |
||||
|
// height: 22, |
||||
|
// borderRadius: [4, 4, 0, 0] |
||||
|
// }, |
||||
|
hr: { |
||||
|
borderColor: '#aaa', |
||||
|
width: '100%', |
||||
|
borderWidth: 0.5, |
||||
|
height: 0 |
||||
|
}, |
||||
|
b: { |
||||
|
fontSize: 14, |
||||
|
lineHeight: 33 |
||||
|
}, |
||||
|
per: { |
||||
|
color: '#eee', |
||||
|
backgroundColor: '#334455', |
||||
|
padding: [2, 4], |
||||
|
borderRadius: 2 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
this.chart.setOption(option) |
||||
|
this.chart.on('click', function(param) { |
||||
|
if (nextUrl != null && nextUrl.length > 0) { |
||||
|
// 判断 nexurl数与那个列 |
||||
|
var url = '' |
||||
|
for (var i = 0; i < nextUrl.length; i++) { |
||||
|
if (nextUrl[i].name === param.name) { |
||||
|
url = nextUrl[i].url |
||||
|
} |
||||
|
} |
||||
|
// --在当前路径新窗口打开 |
||||
|
router.push({ |
||||
|
path: url, |
||||
|
query: { |
||||
|
id: param.name, |
||||
|
start: params.start, |
||||
|
end: params.end |
||||
|
} |
||||
|
}) |
||||
|
// --在最外层新窗口打开 |
||||
|
// let routeUrl = router.resolve({ |
||||
|
// path: './situationMapZhiDui', |
||||
|
// query: { id: 96 } |
||||
|
// }) |
||||
|
// window.open(routeUrl.href, '_blank') |
||||
|
|
||||
|
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
||||
|
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
||||
|
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
var _this = this |
||||
|
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 |
||||
|
_this.charPie3currentIndex = 0 |
||||
|
// 2、鼠标移动上去的时候的高亮动画 |
||||
|
this.chart.on('mouseover', function(param) { |
||||
|
isSet = false |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0 |
||||
|
// dataIndex: _this.charPie3currentIndex |
||||
|
}) |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
// _this.chart.dispatchAction({ |
||||
|
// type: "showTip", |
||||
|
// seriesIndex: 0, |
||||
|
// dataIndex: param.dataIndex, |
||||
|
// }); |
||||
|
}) |
||||
|
// 3、自动高亮展示 |
||||
|
var chartHover = function() { |
||||
|
_this.dataLen = option.series[0].data.length |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0 |
||||
|
// dataIndex: _this.charPie3currentIndex |
||||
|
}) |
||||
|
_this.charPie3currentIndex = |
||||
|
(_this.charPie3currentIndex + 1) % _this.dataLen |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: _this.charPie3currentIndex |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
// _this.chart.dispatchAction({ |
||||
|
// type: "showTip", |
||||
|
// seriesIndex: 0, |
||||
|
// dataIndex: _this.charPie3currentIndex, |
||||
|
// }); |
||||
|
} |
||||
|
clearInterval(_this.startCharts) |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
// 4、鼠标移出之后，恢复自动高亮 |
||||
|
this.chart.on('mouseout', function(param) { |
||||
|
if (!isSet) { |
||||
|
clearInterval(_this.startCharts) |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
isSet = true |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,299 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{ height: height, width: width }" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
startCharts: null, |
||||
|
charPie3currentIndex: 0, |
||||
|
dataLen: 0 |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
if (this.startCharts) { |
||||
|
clearInterval(this.startCharts) |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
legend, |
||||
|
seriesName, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
unit, |
||||
|
params, |
||||
|
color |
||||
|
} = {}) { |
||||
|
var option = { |
||||
|
title: { |
||||
|
text: seriesName, |
||||
|
x: 'center', |
||||
|
top: 0, |
||||
|
// left: 30, |
||||
|
textStyle: { |
||||
|
// fontSize: 20, |
||||
|
color: '#b7d8fa', |
||||
|
fontSize: 0 |
||||
|
|
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 10, |
||||
|
top: 0, |
||||
|
containLabel: true |
||||
|
}, |
||||
|
tooltip: { |
||||
|
show: false, |
||||
|
trigger: 'item', |
||||
|
formatter: '{b} : {c} ' + unit + ' ({d}%)' |
||||
|
// formatter: '{a} <br/>{b} : {c} ({d}%)' |
||||
|
}, |
||||
|
legend: { |
||||
|
show: false, |
||||
|
// right: '10', |
||||
|
bottom: '0', |
||||
|
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
||||
|
textStyle: { |
||||
|
fontSize: 14, |
||||
|
color: '#b7d8fa' |
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
||||
|
type: 'pie', |
||||
|
clockWise: false, |
||||
|
// roseType: 'radius', |
||||
|
radius: [50, 55], |
||||
|
center: ['50%', '45%'], |
||||
|
hoverAnimation: false, |
||||
|
data: Data.seriesData, |
||||
|
// roseType: 'area', |
||||
|
// [ |
||||
|
// { value: 320, name: 'Industries' }, |
||||
|
// { value: 240, name: 'Technology' }, |
||||
|
// { value: 149, name: 'Forex' }, |
||||
|
// { value: 100, name: 'Gold' }, |
||||
|
// { value: 59, name: 'Forecasts' } |
||||
|
// ], |
||||
|
// itemStyle: { |
||||
|
// borderRadius: 3, |
||||
|
// borderColor: '#091243', |
||||
|
// borderWidth: 2 |
||||
|
// }, |
||||
|
// animationEasing: 'cubicInOut', |
||||
|
// animationDuration: 2600, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
label: { |
||||
|
show: false, |
||||
|
formatter: '{b}\n{c} ' + unit, |
||||
|
position: 'center', |
||||
|
emphasis: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
fontSize: '14', |
||||
|
color: '#fceb04' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
label22: { |
||||
|
normal: { |
||||
|
show: false, |
||||
|
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ', |
||||
|
formatter: '{b|{b}：}{c} ' + unit + ' \n{hr|}\n {per|{d}%} ', |
||||
|
// backgroundColor: '#eee', |
||||
|
// borderColor: '#aaa', |
||||
|
// borderWidth: 1, |
||||
|
// borderRadius: 4, |
||||
|
// shadowBlur:3, |
||||
|
// shadowOffsetX: 2, |
||||
|
// shadowOffsetY: 2, |
||||
|
// shadowColor: '#999', |
||||
|
padding: [0, 7], |
||||
|
rich: { |
||||
|
// a: { |
||||
|
// color: '#999', |
||||
|
// lineHeight: 22, |
||||
|
// align: 'center' |
||||
|
// }, |
||||
|
// abg: { |
||||
|
// backgroundColor: '#333', |
||||
|
// width: '100%', |
||||
|
// align: 'right', |
||||
|
// height: 22, |
||||
|
// borderRadius: [4, 4, 0, 0] |
||||
|
// }, |
||||
|
hr: { |
||||
|
borderColor: '#aaa', |
||||
|
width: '100%', |
||||
|
borderWidth: 0.5, |
||||
|
height: 0 |
||||
|
}, |
||||
|
b: { |
||||
|
fontSize: 14, |
||||
|
lineHeight: 33 |
||||
|
}, |
||||
|
per: { |
||||
|
color: '#eee', |
||||
|
backgroundColor: '#334455', |
||||
|
padding: [2, 4], |
||||
|
borderRadius: 2 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
this.chart.setOption(option) |
||||
|
this.chart.on('click', function(param) { |
||||
|
if (nextUrl != null && nextUrl.length > 0) { |
||||
|
// 判断 nexurl数与那个列 |
||||
|
var url = '' |
||||
|
for (var i = 0; i < nextUrl.length; i++) { |
||||
|
if (nextUrl[i].name === param.name) { |
||||
|
url = nextUrl[i].url |
||||
|
} |
||||
|
} |
||||
|
// --在当前路径新窗口打开 |
||||
|
router.push({ |
||||
|
path: url, |
||||
|
query: { |
||||
|
id: param.name, |
||||
|
start: params.start, |
||||
|
end: params.end |
||||
|
} |
||||
|
}) |
||||
|
// --在最外层新窗口打开 |
||||
|
// let routeUrl = router.resolve({ |
||||
|
// path: './situationMapZhiDui', |
||||
|
// query: { id: 96 } |
||||
|
// }) |
||||
|
// window.open(routeUrl.href, '_blank') |
||||
|
|
||||
|
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
||||
|
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
||||
|
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
var _this = this |
||||
|
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 |
||||
|
_this.charPie3currentIndex = 0 |
||||
|
// 2、鼠标移动上去的时候的高亮动画 |
||||
|
this.chart.on('mouseover', function(param) { |
||||
|
isSet = false |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0 |
||||
|
// dataIndex: _this.charPie3currentIndex |
||||
|
}) |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
// _this.chart.dispatchAction({ |
||||
|
// type: "showTip", |
||||
|
// seriesIndex: 0, |
||||
|
// dataIndex: param.dataIndex, |
||||
|
// }); |
||||
|
}) |
||||
|
// 3、自动高亮展示 |
||||
|
var chartHover = function() { |
||||
|
_this.dataLen = option.series[0].data.length |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0 |
||||
|
// dataIndex: _this.charPie3currentIndex |
||||
|
}) |
||||
|
_this.charPie3currentIndex = |
||||
|
(_this.charPie3currentIndex + 1) % _this.dataLen |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: _this.charPie3currentIndex |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
// _this.chart.dispatchAction({ |
||||
|
// type: "showTip", |
||||
|
// seriesIndex: 0, |
||||
|
// dataIndex: _this.charPie3currentIndex, |
||||
|
// }); |
||||
|
} |
||||
|
clearInterval(_this.startCharts) |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
// 4、鼠标移出之后，恢复自动高亮 |
||||
|
this.chart.on('mouseout', function(param) { |
||||
|
if (!isSet) { |
||||
|
clearInterval(_this.startCharts) |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
isSet = true |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,316 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{ height: height, width: width }" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart', |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%', |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '100%', |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
startCharts: null, |
||||
|
charPie3currentIndex: 0, |
||||
|
dataLen: 0, |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
// mounted() { |
||||
|
// this.$nextTick(() => { |
||||
|
// this.initChart() |
||||
|
// }) |
||||
|
// }, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
// 加的自适应 |
||||
|
// this.init(); // 初始化图表 |
||||
|
let _this = this |
||||
|
window.addEventListener('resize', function () { |
||||
|
if (_this.resizeTimer) clearTimeout(_this.resizeTimer) |
||||
|
_this.resizeTimer = setTimeout(function () { |
||||
|
_this.chart.resize() |
||||
|
}, 100) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
if (this.startCharts) { |
||||
|
clearInterval(this.startCharts) |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
legend, |
||||
|
seriesName, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
unit, |
||||
|
params, |
||||
|
color, |
||||
|
} = {}) { |
||||
|
var option = { |
||||
|
title: { |
||||
|
text: seriesName, |
||||
|
// subtext: '纯属虚构', |
||||
|
x: 'center', |
||||
|
// bottom: 0, |
||||
|
top: 0, |
||||
|
// left: 30, |
||||
|
|
||||
|
textStyle: { |
||||
|
// fontSize: 20, |
||||
|
color: '#b7d8fa', |
||||
|
fontSize: 0, |
||||
|
|
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 10, |
||||
|
top: 0, |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
show: false, |
||||
|
trigger: 'item', |
||||
|
formatter: '{b} : {c} ' + unit + ' ({d}%)', |
||||
|
// formatter: '{a} <br/>{b} : {c} ({d}%)' |
||||
|
}, |
||||
|
legend: { |
||||
|
// right: '10', |
||||
|
bottom: '0', |
||||
|
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
||||
|
textStyle: { |
||||
|
fontSize: 14, |
||||
|
color: '#b7d8fa', |
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
||||
|
type: 'pie', |
||||
|
color: color, |
||||
|
// color:[ 'green','blue'], |
||||
|
// roseType: 'radius', |
||||
|
radius: [40, 60], |
||||
|
center: ['50%', '35%'], |
||||
|
data: Data.seriesData, |
||||
|
// roseType: 'area', |
||||
|
// [ |
||||
|
// { value: 320, name: 'Industries' }, |
||||
|
// { value: 240, name: 'Technology' }, |
||||
|
// { value: 149, name: 'Forex' }, |
||||
|
// { value: 100, name: 'Gold' }, |
||||
|
// { value: 59, name: 'Forecasts' } |
||||
|
// ], |
||||
|
// itemStyle: { |
||||
|
// borderRadius: 3 |
||||
|
// borderColor: '#091243', |
||||
|
// borderWidth: 2 |
||||
|
// }, |
||||
|
animationEasing: 'cubicInOut', |
||||
|
animationDuration: 2600, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
label: { |
||||
|
show: false, |
||||
|
formatter: '{b}:\n{c} ' + unit, |
||||
|
position: 'center', |
||||
|
emphasis: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
fontSize: '14', |
||||
|
color: '#b7d8fa', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
label22: { |
||||
|
normal: { |
||||
|
show: false, |
||||
|
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ', |
||||
|
formatter: '{b|{b}：}{c} ' + unit + ' \n{hr|}\n {per|{d}%} ', |
||||
|
// backgroundColor: '#eee', |
||||
|
// borderColor: '#aaa', |
||||
|
// borderWidth: 1, |
||||
|
// borderRadius: 4, |
||||
|
// shadowBlur:3, |
||||
|
// shadowOffsetX: 2, |
||||
|
// shadowOffsetY: 2, |
||||
|
// shadowColor: '#999', |
||||
|
padding: [0, 7], |
||||
|
rich: { |
||||
|
// a: { |
||||
|
// color: '#999', |
||||
|
// lineHeight: 22, |
||||
|
// align: 'center' |
||||
|
// }, |
||||
|
// abg: { |
||||
|
// backgroundColor: '#333', |
||||
|
// width: '100%', |
||||
|
// align: 'right', |
||||
|
// height: 22, |
||||
|
// borderRadius: [4, 4, 0, 0] |
||||
|
// }, |
||||
|
hr: { |
||||
|
borderColor: '#aaa', |
||||
|
width: '100%', |
||||
|
borderWidth: 0.5, |
||||
|
height: 0, |
||||
|
}, |
||||
|
b: { |
||||
|
fontSize: 14, |
||||
|
lineHeight: 33, |
||||
|
}, |
||||
|
per: { |
||||
|
color: '#eee', |
||||
|
backgroundColor: '#334455', |
||||
|
padding: [2, 4], |
||||
|
borderRadius: 2, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
} |
||||
|
this.chart.setOption(option) |
||||
|
this.chart.on('click', function (param) { |
||||
|
if (nextUrl != null && nextUrl.length > 0) { |
||||
|
// 判断 nexurl数与那个列 |
||||
|
var url = '' |
||||
|
for (var i = 0; i < nextUrl.length; i++) { |
||||
|
if (nextUrl[i].name === param.name) { |
||||
|
url = nextUrl[i].url |
||||
|
} |
||||
|
} |
||||
|
// --在当前路径新窗口打开 |
||||
|
router.push({ |
||||
|
path: url, |
||||
|
query: { |
||||
|
id: param.name, |
||||
|
start: params.start, |
||||
|
end: params.end, |
||||
|
}, |
||||
|
}) |
||||
|
// --在最外层新窗口打开 |
||||
|
// let routeUrl = router.resolve({ |
||||
|
// path: './situationMapZhiDui', |
||||
|
// query: { id: 96 } |
||||
|
// }) |
||||
|
// window.open(routeUrl.href, '_blank') |
||||
|
|
||||
|
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
||||
|
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
||||
|
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
var _this = this |
||||
|
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 |
||||
|
_this.charPie3currentIndex = 0 |
||||
|
// 2、鼠标移动上去的时候的高亮动画 |
||||
|
this.chart.on('mouseover', function (param) { |
||||
|
isSet = false |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
// dataIndex: _this.charPie3currentIndex |
||||
|
}) |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex, |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
// _this.chart.dispatchAction({ |
||||
|
// type: "showTip", |
||||
|
// seriesIndex: 0, |
||||
|
// dataIndex: param.dataIndex, |
||||
|
// }); |
||||
|
}) |
||||
|
// 3、自动高亮展示 |
||||
|
var chartHover = function () { |
||||
|
_this.dataLen = option.series[0].data.length |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
// dataIndex: _this.charPie3currentIndex |
||||
|
}) |
||||
|
_this.charPie3currentIndex = |
||||
|
(_this.charPie3currentIndex + 1) % _this.dataLen |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: _this.charPie3currentIndex, |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
// _this.chart.dispatchAction({ |
||||
|
// type: "showTip", |
||||
|
// seriesIndex: 0, |
||||
|
// dataIndex: _this.charPie3currentIndex, |
||||
|
// }); |
||||
|
} |
||||
|
clearInterval(_this.startCharts) |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
// 4、鼠标移出之后，恢复自动高亮 |
||||
|
this.chart.on('mouseout', function (param) { |
||||
|
if (!isSet) { |
||||
|
clearInterval(_this.startCharts) |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
isSet = true |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,275 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{ height: height, width: width }" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from "./mixins/resize"; |
||||
|
import router from "../../../router/index"; |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: "chart", |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: "100%", |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: "100%", |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
startCharts: null, |
||||
|
charPie3currentIndex: 0, |
||||
|
dataLen: 0, |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
// mounted() { |
||||
|
// this.$nextTick(() => { |
||||
|
// this.initChart() |
||||
|
// }) |
||||
|
// }, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart(); |
||||
|
}); |
||||
|
// 加的自适应 |
||||
|
// this.init(); // 初始化图表 |
||||
|
let _this = this; |
||||
|
window.addEventListener("resize", function () { |
||||
|
if (_this.resizeTimer) clearTimeout(_this.resizeTimer); |
||||
|
_this.resizeTimer = setTimeout(function () { |
||||
|
_this.chart.resize(); |
||||
|
}, 100); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return; |
||||
|
} |
||||
|
if (this.startCharts) { |
||||
|
clearInterval(this.startCharts); |
||||
|
} |
||||
|
this.chart.dispose(); |
||||
|
this.chart = null; |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, "macarons"); |
||||
|
this.setOptions(this.chartData); |
||||
|
}, |
||||
|
setOptions({ |
||||
|
legend, |
||||
|
seriesName, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
unit, |
||||
|
params, |
||||
|
color, |
||||
|
itemStyle, |
||||
|
} = {}) { |
||||
|
// 老人类别图 |
||||
|
var placeHolderStyle = { |
||||
|
normal: { |
||||
|
color: "rgba(0,0,0,0)", |
||||
|
label: { |
||||
|
show: false, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
emphasis: { |
||||
|
color: "rgba(0,0,0,0)", |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
// var labelShow = { |
||||
|
// show: true, |
||||
|
// color: "#fff", |
||||
|
// fontSize: 15, |
||||
|
// formatter: ["{d| {d}% }", "{b| {b} }"].join("\n"), |
||||
|
// rich: { |
||||
|
// d: { |
||||
|
// fontSize: 15, |
||||
|
// color: "#fff", |
||||
|
// }, |
||||
|
// b: { |
||||
|
// fontSize: 18, |
||||
|
// color: "#fff", |
||||
|
// }, |
||||
|
// }, |
||||
|
// }; |
||||
|
|
||||
|
// var dataStyle = { |
||||
|
// normal: { |
||||
|
// label: { |
||||
|
// show: true, |
||||
|
// color: '#fff', |
||||
|
// fontSize: 18, |
||||
|
// }, |
||||
|
// labelLine: { |
||||
|
// smooth: 0.1, |
||||
|
// length: 40, |
||||
|
// length2: 40 |
||||
|
// }, |
||||
|
// } |
||||
|
// }; |
||||
|
|
||||
|
console.log('Data:'+JSON.stringify(Data)) |
||||
|
|
||||
|
var option = { |
||||
|
// backgroundColor: '#0b1545', |
||||
|
// backgroundColor: 'transparent', |
||||
|
// color: ['#FF9966', '#FFFFCC', '#0099CC', '#99CC33', '#99CCCC'], |
||||
|
color: ['#4d83fe', '#57d4b7', '#ffe86c', '#00c5e7', '#ff8857', '#69c26a', '#f75b72', '#b47bf4', '#ed7988', '#ffb957'], |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
// formatter: "{a} <br/>{b} : {c}$ ({d}%)", |
||||
|
formatter: "{b} : {c}人 ({d}%)", |
||||
|
textStyle: { |
||||
|
fontSize: 14,color:'#ffffff', |
||||
|
}, |
||||
|
backgroundColor: '#242429cc', |
||||
|
}, |
||||
|
|
||||
|
// legend: { |
||||
|
// data: ['A', 'B', 'C', 'D', 'E'], |
||||
|
// orient: 'vertical', |
||||
|
// right: '5%', |
||||
|
// top: '13%', |
||||
|
// top: 'center', |
||||
|
// itemWidth: 20, |
||||
|
// itemHeight: 20, |
||||
|
// itemGap: 30, |
||||
|
// textStyle: { |
||||
|
// color: '#', |
||||
|
// fontSize: 16, |
||||
|
// }, |
||||
|
// }, |
||||
|
|
||||
|
series: [{ |
||||
|
name: 'TITLE', |
||||
|
type: 'pie', |
||||
|
clockwise: false, |
||||
|
startAngle: 90, |
||||
|
radius: '47%', |
||||
|
// center: ['40%', '45%'], |
||||
|
center: ['40%', '45%'], |
||||
|
hoverAnimation: false, |
||||
|
roseType: 'radius', //area |
||||
|
data: Data, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
// borderColor: '#273454', |
||||
|
// borderWidth: '5', |
||||
|
borderColor: '#273454', |
||||
|
borderWidth: '0', |
||||
|
}, |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'outside', |
||||
|
// formatter: '{b}\n{c}人', |
||||
|
formatter: '{b}\n{d}%', |
||||
|
color: '#87cefa', |
||||
|
fontSize: 14, |
||||
|
// formatter: '{a|{b}：{d}%}\n{hr|}', |
||||
|
rich: { |
||||
|
// hr: { |
||||
|
// backgroundColor: 't', |
||||
|
// borderRadius: 20, |
||||
|
// width: 0, |
||||
|
// height: 10, |
||||
|
// padding: [3, 3, 0, 16], |
||||
|
// shadowColor: '#1c1b3a', |
||||
|
// shadowBlur: 1, |
||||
|
// shadowOffsetX: '0', |
||||
|
// shadowOffsetY: '0', |
||||
|
// }, |
||||
|
// a: { |
||||
|
// padding: [35, 15, 20, 5], |
||||
|
// }, |
||||
|
hr: { |
||||
|
borderColor: '#aaa', |
||||
|
width: '0', |
||||
|
borderWidth: 0.1, |
||||
|
height: 0 |
||||
|
}, |
||||
|
b: { |
||||
|
fontSize: 12, color: '#fceb04' |
||||
|
// lineHeight: 33 |
||||
|
}, |
||||
|
// hr: { |
||||
|
// backgroundColor: 't', |
||||
|
// borderRadius: 100, |
||||
|
// width: 0, |
||||
|
// height: 10, |
||||
|
// padding: [3, 3, 0, -16], |
||||
|
// shadowColor: '#1c1b3a', |
||||
|
// shadowBlur: 1, |
||||
|
// shadowOffsetX: '0', |
||||
|
// shadowOffsetY: '0', |
||||
|
// }, |
||||
|
// a: { |
||||
|
// padding: [-35, 15, -20, 5], |
||||
|
// } |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
normal: { |
||||
|
length: 5, |
||||
|
length2: 10, |
||||
|
lineStyle: { |
||||
|
width: 1, |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// label: { |
||||
|
// normal: { |
||||
|
// show: true, |
||||
|
// position: 'inside', |
||||
|
// formatter: '{d}%', |
||||
|
// formatter: function(data){ |
||||
|
// return data.percent.toFixed(0)+"%"; |
||||
|
// }, |
||||
|
// textStyle : { |
||||
|
// align : 'center', |
||||
|
// baseline : 'middle', |
||||
|
// fontFamily : '微软雅黑', |
||||
|
// fontSize : 15, |
||||
|
// fontWeight : 'bolder' |
||||
|
// } |
||||
|
// }, |
||||
|
// }, |
||||
|
}], |
||||
|
} |
||||
|
console.log('开始加载') |
||||
|
this.chart.setOption(option) |
||||
|
|
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,276 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart', |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%', |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '100%', |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
startCharts: null, |
||||
|
dataLen: 0, |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
if (this.startCharts) { |
||||
|
clearInterval(this.startCharts) |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ |
||||
|
legend, |
||||
|
seriesName, |
||||
|
Data, |
||||
|
nextUrl, |
||||
|
unit, |
||||
|
params, |
||||
|
color, |
||||
|
} = {}) { |
||||
|
var option = { |
||||
|
title: { |
||||
|
text: seriesName, |
||||
|
// subtext: '纯属虚构', |
||||
|
x: 'center', |
||||
|
// bottom: 0, |
||||
|
top: 0, |
||||
|
// left: 30, |
||||
|
|
||||
|
textStyle: { |
||||
|
// fontSize: 20, |
||||
|
color: '#b7d8fa', |
||||
|
fontSize: 0, |
||||
|
|
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 10, |
||||
|
right: 10, |
||||
|
bottom: 10, |
||||
|
top: 0, |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
formatter: '{b} : {c} ' + unit + ' ({d}%)', |
||||
|
// formatter: '{a} <br/>{b} : {c} ({d}%)' |
||||
|
}, |
||||
|
legend: { |
||||
|
// right: '10', |
||||
|
bottom: '0', |
||||
|
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#b7d8fa', |
||||
|
// fontWeight: 'bolder' // 字体加粗 |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
||||
|
type: 'pie', |
||||
|
color: color, |
||||
|
// color:[ 'green','blue'], |
||||
|
// roseType: 'radius', |
||||
|
radius: [40, 60], |
||||
|
center: ['50%', '30%'], |
||||
|
data: Data.seriesData, |
||||
|
// [ |
||||
|
// { value: 320, name: 'Industries' }, |
||||
|
// { value: 240, name: 'Technology' }, |
||||
|
// { value: 149, name: 'Forex' }, |
||||
|
// { value: 100, name: 'Gold' }, |
||||
|
// { value: 59, name: 'Forecasts' } |
||||
|
// ], |
||||
|
|
||||
|
animationEasing: 'cubicInOut', |
||||
|
animationDuration: 2600, |
||||
|
label: { |
||||
|
normal: { |
||||
|
show: false, |
||||
|
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ', |
||||
|
formatter: '{b|{b}：}{c} ' + unit + ' \n{hr|}\n {per|{d}%} ', |
||||
|
// backgroundColor: '#eee', |
||||
|
// borderColor: '#aaa', |
||||
|
// borderWidth: 1, |
||||
|
// borderRadius: 4, |
||||
|
// shadowBlur:3, |
||||
|
// shadowOffsetX: 2, |
||||
|
// shadowOffsetY: 2, |
||||
|
// shadowColor: '#999', |
||||
|
padding: [0, 7], |
||||
|
rich: { |
||||
|
// a: { |
||||
|
// color: '#999', |
||||
|
// lineHeight: 22, |
||||
|
// align: 'center' |
||||
|
// }, |
||||
|
// abg: { |
||||
|
// backgroundColor: '#333', |
||||
|
// width: '100%', |
||||
|
// align: 'right', |
||||
|
// height: 22, |
||||
|
// borderRadius: [4, 4, 0, 0] |
||||
|
// }, |
||||
|
hr: { |
||||
|
borderColor: '#aaa', |
||||
|
width: '100%', |
||||
|
borderWidth: 0.5, |
||||
|
height: 0, |
||||
|
}, |
||||
|
b: { |
||||
|
fontSize: 14, |
||||
|
lineHeight: 33, |
||||
|
}, |
||||
|
per: { |
||||
|
color: '#eee', |
||||
|
backgroundColor: '#334455', |
||||
|
padding: [2, 4], |
||||
|
borderRadius: 2, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
} |
||||
|
this.chart.setOption(option) |
||||
|
this.chart.on('click', function (param) { |
||||
|
if (nextUrl.length > 0) { |
||||
|
// 判断 nexurl数与那个列 |
||||
|
var url = '' |
||||
|
for (var i = 0; i < nextUrl.length; i++) { |
||||
|
if (nextUrl[i].name === param.name) { |
||||
|
url = nextUrl[i].url |
||||
|
} |
||||
|
} |
||||
|
// --在当前路径新窗口打开 |
||||
|
router.push({ |
||||
|
path: url, |
||||
|
query: { |
||||
|
id: param.name, |
||||
|
start: params.start, |
||||
|
end: params.end, |
||||
|
}, |
||||
|
}) |
||||
|
// --在最外层新窗口打开 |
||||
|
// let routeUrl = router.resolve({ |
||||
|
// path: './situationMapZhiDui', |
||||
|
// query: { id: 96 } |
||||
|
// }) |
||||
|
// window.open(routeUrl.href, '_blank') |
||||
|
|
||||
|
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
||||
|
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
||||
|
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
||||
|
|
||||
|
var _this = this |
||||
|
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 |
||||
|
var charPie3currentIndex = 0 |
||||
|
clearInterval(_this.startCharts) |
||||
|
// 2、鼠标移动上去的时候的高亮动画 |
||||
|
this.chart.on('mouseover', function (param) { |
||||
|
isSet = false |
||||
|
clearInterval(_this.startCharts) |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex, |
||||
|
}) |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex, |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex, |
||||
|
}) |
||||
|
}) |
||||
|
// 3、自动高亮展示 |
||||
|
var chartHover = function () { |
||||
|
_this.dataLen = option.series[0].data.length |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex, |
||||
|
}) |
||||
|
charPie3currentIndex = (charPie3currentIndex + 1) % _this.dataLen |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex, |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex, |
||||
|
}) |
||||
|
} |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
// 4、鼠标移出之后，恢复自动高亮 |
||||
|
this.chart.on('mouseout', function (param) { |
||||
|
if (!isSet) { |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
isSet = true |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,181 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
// require('echarts/theme/macarons') // echarts theme |
||||
|
import resize from './mixins/resize' |
||||
|
import router from '../../../router/index' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart', |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%', |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '350px', |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
startCharts: null, |
||||
|
dataLen: 0, |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
if (this.startCharts) { |
||||
|
clearInterval(this.startCharts) |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ tooltip, series } = {}) { |
||||
|
var option = { |
||||
|
tooltip: { |
||||
|
formatter: '{a} <br/>{b} : {c}%', |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: series[0].name, |
||||
|
type: 'gauge', |
||||
|
radius: '90%', |
||||
|
center: ['50%', '50%'], |
||||
|
detail: { |
||||
|
formatter: '{value}', |
||||
|
}, |
||||
|
data: series[0].data, |
||||
|
// data: [{ |
||||
|
// value: 200, |
||||
|
// name: 'SCORE' |
||||
|
// }] |
||||
|
}, |
||||
|
], |
||||
|
} |
||||
|
this.chart.setOption(option) |
||||
|
this.chart.on('click', function (param) { |
||||
|
if (nextUrl.length > 0) { |
||||
|
// 判断 nexurl数与那个列 |
||||
|
var url = '' |
||||
|
for (var i = 0; i < nextUrl.length; i++) { |
||||
|
if (nextUrl[i].name === param.name) { |
||||
|
url = nextUrl[i].url |
||||
|
} |
||||
|
} |
||||
|
// --在当前路径新窗口打开 |
||||
|
router.push({ |
||||
|
path: url, |
||||
|
query: { |
||||
|
id: param.name, |
||||
|
start: params.start, |
||||
|
end: params.end, |
||||
|
}, |
||||
|
}) |
||||
|
// --在最外层新窗口打开 |
||||
|
// let routeUrl = router.resolve({ |
||||
|
// path: './situationMapZhiDui', |
||||
|
// query: { id: 96 } |
||||
|
// }) |
||||
|
// window.open(routeUrl.href, '_blank') |
||||
|
|
||||
|
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
||||
|
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
||||
|
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
var _this = this |
||||
|
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 |
||||
|
var charPie3currentIndex = 0 |
||||
|
clearInterval(_this.startCharts) |
||||
|
// 2、鼠标移动上去的时候的高亮动画 |
||||
|
this.chart.on('mouseover', function (param) { |
||||
|
isSet = false |
||||
|
clearInterval(_this.startCharts) |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex, |
||||
|
}) |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex, |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: param.dataIndex, |
||||
|
}) |
||||
|
}) |
||||
|
// 3、自动高亮展示 |
||||
|
var chartHover = function () { |
||||
|
_this.dataLen = option.series[0].data.length |
||||
|
// 取消之前高亮的图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex, |
||||
|
}) |
||||
|
charPie3currentIndex = (charPie3currentIndex + 1) % _this.dataLen |
||||
|
// 高亮当前图形 |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex, |
||||
|
}) |
||||
|
// 显示 tooltip |
||||
|
_this.chart.dispatchAction({ |
||||
|
type: 'showTip', |
||||
|
seriesIndex: 0, |
||||
|
dataIndex: charPie3currentIndex, |
||||
|
}) |
||||
|
} |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
// 4、鼠标移出之后，恢复自动高亮 |
||||
|
this.chart.on('mouseout', function (param) { |
||||
|
if (!isSet) { |
||||
|
_this.startCharts = setInterval(chartHover, 2000) |
||||
|
isSet = true |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,56 @@ |
|||||
|
import { debounce } from '@/utils' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
$_sidebarElm: null |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$_initResizeEvent() |
||||
|
this.$_initSidebarResizeEvent() |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
this.$_destroyResizeEvent() |
||||
|
this.$_destroySidebarResizeEvent() |
||||
|
}, |
||||
|
// to fixed bug when cached by keep-alive
|
||||
|
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
|
activated() { |
||||
|
this.$_initResizeEvent() |
||||
|
this.$_initSidebarResizeEvent() |
||||
|
}, |
||||
|
deactivated() { |
||||
|
this.$_destroyResizeEvent() |
||||
|
this.$_destroySidebarResizeEvent() |
||||
|
}, |
||||
|
methods: { |
||||
|
// use $_ for mixins properties
|
||||
|
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
|
$_resizeHandler() { |
||||
|
return debounce(() => { |
||||
|
if (this.chart) { |
||||
|
this.chart.resize() |
||||
|
} |
||||
|
}, 100)() |
||||
|
}, |
||||
|
$_initResizeEvent() { |
||||
|
window.addEventListener('resize', this.$_resizeHandler) |
||||
|
}, |
||||
|
$_destroyResizeEvent() { |
||||
|
window.removeEventListener('resize', this.$_resizeHandler) |
||||
|
}, |
||||
|
$_sidebarResizeHandler(e) { |
||||
|
if (e.propertyName === 'width') { |
||||
|
this.$_resizeHandler() |
||||
|
} |
||||
|
}, |
||||
|
$_initSidebarResizeEvent() { |
||||
|
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] |
||||
|
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) |
||||
|
}, |
||||
|
$_destroySidebarResizeEvent() { |
||||
|
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,58 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
111111物业看板页面 |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import 'echarts-gl' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { fileUrl } from '@/api/sys/index' |
||||
|
import { parseDate } from '@/utils' |
||||
|
import Pagination from '@/components/Pagination' // secondary package based on el-pagination |
||||
|
import * as echarts from 'echarts' |
||||
|
|
||||
|
export default { |
||||
|
// name: "Dashboard", |
||||
|
components: { Pagination }, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'id', |
||||
|
'departmentCode', |
||||
|
'department', |
||||
|
'departmentLevel', |
||||
|
'departmentType', |
||||
|
'token' |
||||
|
]) |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
tableKey: 0, |
||||
|
list: null, |
||||
|
total: 0, |
||||
|
listLoading: true, |
||||
|
listQuery: { |
||||
|
pageNumber: 1, |
||||
|
pageSize: 20, |
||||
|
department: '', |
||||
|
startDate: '', |
||||
|
endDate: '', |
||||
|
title: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() {}, |
||||
|
beforeDestroy() {}, |
||||
|
created() {}, |
||||
|
methods: { |
||||
|
indexMethod(index) { |
||||
|
var pagestart = |
||||
|
(this.listQueryPerson.pageNumber - 1) * this.listQueryPerson.pageSize |
||||
|
var pageindex = index + 1 + pagestart |
||||
|
return pageindex |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
</style> |
||||
@ -0,0 +1,139 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div> |
||||
|
<div class="tab-header webtop"> |
||||
|
<div>{{ viewTitle }}</div> |
||||
|
<div> |
||||
|
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="listconadd"> |
||||
|
<el-form ref="form_obj" :model="infoForm" :rules="rules" class="formadd"> |
||||
|
<div class="title"> |
||||
|
<div>详情信息</div> |
||||
|
</div> |
||||
|
<el-row> |
||||
|
<el-col :span="4" class="tleftb"> |
||||
|
<span>类型</span> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item> |
||||
|
<span>{{ getSupplierType(infoForm.manufacturerCode) }}</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4" class="tleftb"> |
||||
|
<span>时间</span> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item> |
||||
|
<span>2023-05-23 08:16:26</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="4" class="tleftb"> |
||||
|
<span>标题</span> |
||||
|
</el-col> |
||||
|
<el-col :span="20"> |
||||
|
<el-form-item> |
||||
|
<span>标题标题标题标题标题标题标题标题标题标题标题标题</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<!-- <el-col :span="4" class="tleftb"> |
||||
|
<span>安装时间</span> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item> |
||||
|
<span>{{ infoForm.supplierTypeValue }}</span> |
||||
|
</el-form-item> |
||||
|
</el-col> --> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="4" class="tleftb"> |
||||
|
<span>内容</span> |
||||
|
</el-col> |
||||
|
<el-col :span="20"> |
||||
|
<el-form-item> |
||||
|
<span> |
||||
|
内容内容内容内容内容内容内容内容内容内容 |
||||
|
</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
|
||||
|
</el-row> |
||||
|
|
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import req from '@/api/xiaoxi/xiaoxi' |
||||
|
|
||||
|
export default { |
||||
|
name: 'xiaoxiInfo', |
||||
|
data() { |
||||
|
return { |
||||
|
// tableKey: 0, |
||||
|
// index: 0, |
||||
|
viewTitle: '', |
||||
|
supplierType_list: [ |
||||
|
{ title: '任务', id: '1' }, |
||||
|
], |
||||
|
status_list: [ |
||||
|
{ title: '已读', id: '1' }, |
||||
|
{ title: '未读', id: '2' }, |
||||
|
], |
||||
|
infoForm: { |
||||
|
manufacturerName: 'KD-22', |
||||
|
manufacturerAs: '2F金陵文脉', |
||||
|
manufacturerCode: '1', |
||||
|
supplierTypeValue: '2023-02-26 16:00:00', |
||||
|
manufacturerAddress: '大华', |
||||
|
manufacturer: '2023-02-26 12:00:00', |
||||
|
manufacturerTelePhone: '大华科技', |
||||
|
manufacturerFax: '2023-05-23', |
||||
|
status:'1' |
||||
|
}, |
||||
|
// baseManufacturerBankDto: [], |
||||
|
rules: {}, |
||||
|
// submitdisabled: false |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getStatus(item) { |
||||
|
for (var i = 0; i < this.status_list.length; i++) { |
||||
|
if (this.status_list[i].id == item) { |
||||
|
return this.status_list[i].title |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
getSupplierType(item) { |
||||
|
for (var i = 0; i < this.supplierType_list.length; i++) { |
||||
|
if (this.supplierType_list[i].id == item) { |
||||
|
return this.supplierType_list[i].title |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
showInfo(row) { |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs['form_obj'].clearValidate() |
||||
|
}) |
||||
|
this.viewTitle = '设备台账详情' |
||||
|
// req.fetchBySid(row.sid).then(resp => { |
||||
|
// this.infoForm = resp.data.infoForm |
||||
|
// this.baseManufacturerBankDto = resp.data.baseManufacturerBankDto |
||||
|
// }).catch(e => { |
||||
|
// this.formobj = row |
||||
|
// }) |
||||
|
}, |
||||
|
handleReturn() { |
||||
|
this.$emit('doback') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,476 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div v-show="viewState == 1"> |
||||
|
<button-bar view-title="消息" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle" /> |
||||
|
<div class="main-content"> |
||||
|
<div class="searchcon"> |
||||
|
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button> |
||||
|
<div v-show="isSearchShow" class="search"> |
||||
|
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="110px" class="tab-header"> |
||||
|
<el-form-item label="消息类型"> |
||||
|
<el-select v-model="listQuery.params.supplierType" filterable clearable placeholder="请选择消息类型"> |
||||
|
<el-option v-for="item in supplierType_list" :key="item.id" :label="item.title" :value="item.id" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<!-- <el-form-item label="选择楼层"> |
||||
|
<el-select v-model="listQuery.params.supplierType" filterable clearable placeholder="请选择楼层"> |
||||
|
<el-option v-for="item in floor_list" :key="item.id" :label="item.title" :value="item.id" /> |
||||
|
</el-select> |
||||
|
</el-form-item> --> |
||||
|
<!-- <el-form-item label="厂商办公电话"> |
||||
|
<el-input v-model="listQuery.params.manufacturerTelePhone" maxlength="130" placeholder="" class="addinputw" clearable/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="联系人"> |
||||
|
<el-input v-model="listQuery.params.contactName" maxlength="125" placeholder="" class="addinputw" clearable/> |
||||
|
</el-form-item> --> |
||||
|
</el-form> |
||||
|
<div class="btn"> |
||||
|
<el-button type="primary" icon="el-icon-search" size="small" @click="handleFilter">查询</el-button> |
||||
|
<el-button type="primary" icon="el-icon-refresh" size="small" @click="handleReset">重置</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="listtop"> |
||||
|
<div class="tit">消息列表</div> |
||||
|
<!-- 翻页分页 --> |
||||
|
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" |
||||
|
:limit.sync="listQuery.size" class="pagination" @pagination="getList" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;" |
||||
|
@selection-change="handleSelectionChange"> |
||||
|
<el-table-column type="selection" align="center" width="50" /> |
||||
|
<el-table-column label="序号" fixed type="index" width="80" :index="indexMethod" align="center" /> |
||||
|
<el-table-column label="操作" fixed align="center" width="160px" class-name="small-padding fixed-width"> |
||||
|
<template slot-scope="{row}"> |
||||
|
<!-- <el-button size="mini" type="primary" |
||||
|
:disabled="!row.isShow && (row.supplierTypeValue === '主机厂' || row.supplierTypeValue === '分公司')" |
||||
|
@click="handleEdit(row)">编辑</el-button> --> |
||||
|
<el-button size="mini" type="primary" @click="handleCheck(row)">详情</el-button> |
||||
|
<!-- <el-button size="mini" type="primary">处理</el-button> --> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="类型" width="110" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ getSupplierType(scope.row.supplierTypeValue) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="标题" width="" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ scope.row.biaoti }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="时间" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ scope.row.time }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="状态" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.status == 1" style="color:green">{{ getStatus(scope.row.status) }}</span> |
||||
|
<span v-if="scope.row.status == 2" style="color:red">{{ getStatus(scope.row.status) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div class="pages"> |
||||
|
<!-- 翻页 --> |
||||
|
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" |
||||
|
:limit.sync="listQuery.size" class="pagination" @pagination="getList" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <xiaoxiAdd v-show="viewState == 2" ref="divadd" @doback="resetState" @reloadlist="handleFilter" /> --> |
||||
|
<xiaoxiInfo v-show="viewState == 4" ref="divinfo" @doback="resetState" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import Pagination from '@/components/pagination' |
||||
|
import pageye from '@/components/pagination/pageye' |
||||
|
import ButtonBar from '@/components/ButtonBar' |
||||
|
// import { typeValues, getOrgSidByPath } from '@/api/cheliang/dictcommons' |
||||
|
// import xiaoxiAdd from './xiaoxiAdd' |
||||
|
import xiaoxiInfo from './xiaoxiInfo' |
||||
|
// import req from '@/api/xiaoxi/xiaoxi' |
||||
|
export default { |
||||
|
name: 'xiaoxiList', |
||||
|
components: { |
||||
|
Pagination, |
||||
|
pageye, |
||||
|
ButtonBar, |
||||
|
// xiaoxiAdd, |
||||
|
xiaoxiInfo |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
btndisabled: false, |
||||
|
btnList: [ |
||||
|
// { |
||||
|
// type: 'primary', |
||||
|
// size: 'small', |
||||
|
// icon: 'plus', |
||||
|
// btnKey: 'toAdd', |
||||
|
// btnLabel: '新增' |
||||
|
// }, |
||||
|
{ |
||||
|
type: 'danger', |
||||
|
size: 'small', |
||||
|
icon: 'del', |
||||
|
btnKey: 'doDel', |
||||
|
btnLabel: '删除' |
||||
|
}, |
||||
|
// { |
||||
|
// type: 'primary', |
||||
|
// size: 'small', |
||||
|
// icon: '', |
||||
|
// btnKey: 'toChangShang', |
||||
|
// btnLabel: '获取厂商' |
||||
|
// }, |
||||
|
// { |
||||
|
// type: 'primary', |
||||
|
// size: 'small', |
||||
|
// icon: '', |
||||
|
// btnKey: 'toGain', |
||||
|
// btnLabel: '获取分公司' |
||||
|
// }, |
||||
|
// { |
||||
|
// type: 'success', |
||||
|
// size: 'small', |
||||
|
// icon: 'export', |
||||
|
// btnKey: 'import', |
||||
|
// btnLabel: '导入' |
||||
|
// }, |
||||
|
// { |
||||
|
// type: 'success', |
||||
|
// size: 'small', |
||||
|
// icon: 'export', |
||||
|
// btnKey: 'build', |
||||
|
// btnLabel: '导出' |
||||
|
// }, |
||||
|
{ |
||||
|
type: 'info', |
||||
|
size: 'small', |
||||
|
icon: 'cross', |
||||
|
btnKey: 'doClose', |
||||
|
btnLabel: '关闭' |
||||
|
} |
||||
|
], |
||||
|
viewState: 1, |
||||
|
isSearchShow: false, |
||||
|
searchxianshitit: '显示查询条件', |
||||
|
sids: [], |
||||
|
// 查询 ----------- |
||||
|
tableKey: 0, |
||||
|
list: [ |
||||
|
{ supplierTypeValue: '1', biaoti: '您有新消息了', time: '2023-02-26 12:00:00', status: '2' }, |
||||
|
{ supplierTypeValue: '1', biaoti: '您有新消息了', time: '2023-02-26 12:00:00', status: '2' }, |
||||
|
], |
||||
|
listLoading: false, |
||||
|
listQuery: { |
||||
|
params: { |
||||
|
manufacturerName: '', |
||||
|
supplierType: '', |
||||
|
useOrgSid: '', |
||||
|
createOrgSid: '', |
||||
|
manufacturerTelePhone: '', |
||||
|
contactName: '' |
||||
|
}, |
||||
|
current: 1, |
||||
|
size: 5, |
||||
|
total: 0 |
||||
|
}, |
||||
|
supplierType_list: [ |
||||
|
{ title: '任务', id: '1' }, |
||||
|
], |
||||
|
floor_list: [ |
||||
|
{ title: '一层', id: '1' }, |
||||
|
{ title: '二层', id: '2' }, |
||||
|
{ title: '三层', id: '3' }, |
||||
|
{ title: '四层', id: '4' }, |
||||
|
], |
||||
|
status_list: [ |
||||
|
{ title: '已读', id: '1' }, |
||||
|
{ title: '未读', id: '2' }, |
||||
|
], |
||||
|
rules: {} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$refs['btnbar'].setButtonList(this.btnList) |
||||
|
}, |
||||
|
created() { |
||||
|
// 初始化变量 |
||||
|
// this.init() |
||||
|
}, |
||||
|
methods: { |
||||
|
getStatus(item) { |
||||
|
for (var i = 0; i < this.status_list.length; i++) { |
||||
|
if (this.status_list[i].id == item) { |
||||
|
return this.status_list[i].title |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
getSupplierType(item) { |
||||
|
for (var i = 0; i < this.supplierType_list.length; i++) { |
||||
|
if (this.supplierType_list[i].id == item) { |
||||
|
return this.supplierType_list[i].title |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
resetState() { |
||||
|
this.viewState = 1 |
||||
|
}, |
||||
|
btnHandle(btnKey) { |
||||
|
console.log('XXXXXXXXXXXXXXX ' + btnKey) |
||||
|
switch (btnKey) { |
||||
|
case 'toAdd': |
||||
|
this.toAdd() |
||||
|
break |
||||
|
case 'doDel': |
||||
|
this.doDel() |
||||
|
break |
||||
|
case 'toChangShang': |
||||
|
this.toChangShang() |
||||
|
break |
||||
|
case 'toGain': |
||||
|
this.toGain() |
||||
|
break |
||||
|
case 'doExport': |
||||
|
this.doExport() |
||||
|
break |
||||
|
case 'doClose': |
||||
|
this.doClose() |
||||
|
break |
||||
|
default: |
||||
|
break |
||||
|
} |
||||
|
}, |
||||
|
// 搜索条件效果 |
||||
|
clicksearchShow() { |
||||
|
this.isSearchShow = !this.isSearchShow |
||||
|
if (this.isSearchShow) { |
||||
|
this.searchxianshitit = '隐藏查询条件' |
||||
|
} else { |
||||
|
this.searchxianshitit = '显示查询条件' |
||||
|
} |
||||
|
}, |
||||
|
// init() { |
||||
|
// getOrgSidByPath({ orgPath: window.sessionStorage.getItem('defaultOrgPath') }).then((res) => { |
||||
|
// if (res.success) { |
||||
|
// this.listQuery.params.createOrgSid = res.data |
||||
|
// this.getType() |
||||
|
// this.getList() |
||||
|
// } |
||||
|
// }) |
||||
|
// }, |
||||
|
// getType() { |
||||
|
// typeValues({ |
||||
|
// type: 'supplierType' |
||||
|
// }).then((res) => { |
||||
|
// if (res.code === '200') { |
||||
|
// this.supplierType_list = res.data |
||||
|
// console.log('选择楼层', this.supplierType_list) |
||||
|
// } |
||||
|
// }) |
||||
|
// }, |
||||
|
// 序号 |
||||
|
indexMethod(index) { |
||||
|
var pagestart = (this.listQuery.current - 1) * this.listQuery.size |
||||
|
var pageindex = index + 1 + pagestart |
||||
|
return pageindex |
||||
|
}, |
||||
|
// 查询列表信息 |
||||
|
getList() { |
||||
|
// this.listLoading = true |
||||
|
// req.gysPagerList(this.listQuery).then((response) => { |
||||
|
// this.listLoading = false |
||||
|
// if (response.code === '200' && response.data && response.data.total > 0) { |
||||
|
// this.list = response.data.records |
||||
|
// this.listQuery.total = response.data.total |
||||
|
// } else { |
||||
|
// this.list = [] |
||||
|
// this.listQuery.total = 0 |
||||
|
// } |
||||
|
// }) |
||||
|
}, |
||||
|
// 查询按钮 |
||||
|
handleFilter() { |
||||
|
this.listQuery.current = 1 |
||||
|
this.getList() |
||||
|
}, |
||||
|
handleReset() { |
||||
|
// this.listQuery = { |
||||
|
// params: { |
||||
|
// manufacturerName: '', |
||||
|
// supplierType: '', |
||||
|
// useOrgSid: '', |
||||
|
// createOrgSid: '', |
||||
|
// manufacturerTelePhone: '', |
||||
|
// contactName: '' |
||||
|
// }, |
||||
|
// current: 1, |
||||
|
// size: 5 |
||||
|
// } |
||||
|
// this.init() |
||||
|
}, |
||||
|
// 打开添加对话框 |
||||
|
toAdd() { |
||||
|
this.viewState = 2 |
||||
|
this.$refs['divadd'].showAdd(this.listQuery.params.createOrgSid) |
||||
|
}, |
||||
|
|
||||
|
handleSelectionChange(row) { |
||||
|
const aa = [] |
||||
|
row.forEach((element) => { |
||||
|
aa.push(element.sid) |
||||
|
}) |
||||
|
this.sids = aa |
||||
|
}, |
||||
|
// 根据本行ID删除数据 |
||||
|
doDel() { |
||||
|
if (this.sids.length > 0) { |
||||
|
const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?' |
||||
|
this.$confirm(tip, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
const loading = this.$loading({ |
||||
|
lock: true, |
||||
|
text: 'Loading', |
||||
|
spinner: 'el-icon-loading', |
||||
|
background: 'rgba(0, 0, 0, 0.7)' |
||||
|
}) |
||||
|
req.delBySids(this.sids.toString()).then(resp => { |
||||
|
if (resp.success) { |
||||
|
loading.close() |
||||
|
this.$message({ type: 'success', message: resp.msg, showClose: true }) |
||||
|
this.getList() |
||||
|
} else { |
||||
|
loading.close() |
||||
|
} |
||||
|
}).catch(e => { |
||||
|
loading.close() |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message({ type: 'error', message: '没有选择!!', showClose: true }) |
||||
|
return |
||||
|
} |
||||
|
}, |
||||
|
// toChangShang() { |
||||
|
// req.saveGysByOrgSid(this.listQuery.params.createOrgSid).then((resp) => { |
||||
|
// if (resp.success) { |
||||
|
// this.$message({ showClose: true, type: 'success', message: '获取成功' }) |
||||
|
// this.getList() |
||||
|
// } |
||||
|
// }) |
||||
|
// }, |
||||
|
// toGain() { |
||||
|
// req.saveAllByOrgSid({ orgSid: this.listQuery.params.createOrgSid }).then((resp) => { |
||||
|
// if (resp.success) { |
||||
|
// this.$message({ showClose: true, type: 'success', message: '获取成功' }) |
||||
|
// this.getList() |
||||
|
// } |
||||
|
// }) |
||||
|
// }, |
||||
|
handleEdit(row) { |
||||
|
// this.viewState = 3 |
||||
|
// this.$refs['divadd'].showEdit(row) |
||||
|
this.viewState = 2 |
||||
|
this.$refs['divadd'].showAdd(this.listQuery.params.createOrgSid) |
||||
|
// if (row.supplierTypeValue !== '主机厂' && row.supplierTypeValue !== '分公司') { |
||||
|
// this.viewState = 3 |
||||
|
// this.$refs['divadd'].showEdit(row) |
||||
|
// } else { |
||||
|
// this.viewState = 5 |
||||
|
// this.$refs['divHosts'].showInfo(row) |
||||
|
// } |
||||
|
}, |
||||
|
// 打开查看 |
||||
|
handleCheck(row) { |
||||
|
this.viewState = 4 |
||||
|
this.$refs['divinfo'].showInfo(row) |
||||
|
}, |
||||
|
// 导出 |
||||
|
// doExport() { |
||||
|
// basefinbankExportExcel(this.sids).then((res) => { |
||||
|
// const blob = new Blob([res], { |
||||
|
// type: 'application/vnd.ms-excel' |
||||
|
// }) |
||||
|
// const objectUrl = URL.createObjectURL(blob) |
||||
|
// window.location.href = objectUrl |
||||
|
// this.$notify({ |
||||
|
// title: '提示', |
||||
|
// message: '导出成功', |
||||
|
// type: 'success', |
||||
|
// duration: 2000 |
||||
|
// }) |
||||
|
// }) |
||||
|
// }, |
||||
|
doClose() { |
||||
|
this.$store.dispatch('tagsView/delView', this.$route) |
||||
|
this.$router.go(-1) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.app-containerb{ |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: nowrap; |
||||
|
justify-content: flex-start;align-items: flex-start; |
||||
|
} |
||||
|
.webye{flex: 1;text-align: left;} |
||||
|
/* 饼图部分 */ |
||||
|
.tbars {width: 250px;height: 100%; |
||||
|
/* display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: nowrap; |
||||
|
justify-content: flex-start;align-items: flex-start; */ |
||||
|
margin: 0 20px 0 0; |
||||
|
padding: 10px; |
||||
|
background-color: #fff; |
||||
|
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; |
||||
|
} |
||||
|
.tbar { |
||||
|
/* width: 25%; */ |
||||
|
margin: 0 0px 0 0; |
||||
|
/* background-color: #fff; |
||||
|
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; */ |
||||
|
padding: 10px; |
||||
|
} |
||||
|
.tbar:last-of-type { |
||||
|
margin: 0; |
||||
|
} |
||||
|
.tbar0 { |
||||
|
border-bottom: 0px solid #032ab8; |
||||
|
} |
||||
|
.tbar .title { |
||||
|
font-size: 20px; |
||||
|
padding: 0px 20px;text-align: center; |
||||
|
font-weight: bold; color: #333;font-size: 16px; |
||||
|
/* border-bottom: 1px solid #ececee; */ |
||||
|
} |
||||
|
.tbar .title span { |
||||
|
padding: 0 10px 0 0; |
||||
|
} |
||||
|
.tbar .bar {position: relative; |
||||
|
/* display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: nowrap; |
||||
|
justify-content: flex-start;align-items: center; */ |
||||
|
margin: 0; |
||||
|
padding: 0px; |
||||
|
height: 190px; |
||||
|
} |
||||
|
.tbar .bar .zhongzi {position: absolute;top:0;bottom: 0;left: 0;right: 0;line-height: 240px;text-align: center; |
||||
|
font-weight: bold; color: #333;font-size: 18px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue