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