|
|
@ -1,38 +1,39 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div :class="className" :style="{height:height,width:width}" /> |
|
|
<div :class="className" :style="{ height: height, width: width }" /> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
// import echarts from 'echarts' |
|
|
import * as echarts from 'echarts' |
|
|
import * as echarts from 'echarts'; |
|
|
|
|
|
|
|
|
|
|
|
// require('echarts/theme/macarons') // echarts theme |
|
|
// require('echarts/theme/macarons') // echarts theme |
|
|
import resize from './mixins/resize' |
|
|
import resize from './mixins/resize' |
|
|
import router from '../../../router' |
|
|
import router from '../../../router/index' |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
mixins: [resize], |
|
|
mixins: [resize], |
|
|
props: { |
|
|
props: { |
|
|
className: { |
|
|
className: { |
|
|
type: String, |
|
|
type: String, |
|
|
default: 'chart' |
|
|
default: 'chart', |
|
|
}, |
|
|
}, |
|
|
width: { |
|
|
width: { |
|
|
type: String, |
|
|
type: String, |
|
|
default: '100%' |
|
|
default: '100%', |
|
|
}, |
|
|
}, |
|
|
height: { |
|
|
height: { |
|
|
type: String, |
|
|
type: String, |
|
|
default: '250px' |
|
|
default: '100%', |
|
|
}, |
|
|
}, |
|
|
chartData: { |
|
|
chartData: { |
|
|
type: Object, |
|
|
type: Object, |
|
|
required: true |
|
|
required: true, |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
chart: null |
|
|
chart: null, |
|
|
|
|
|
startCharts: null, |
|
|
|
|
|
charPie3currentIndex: 0, |
|
|
|
|
|
dataLen: 0, |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
watch: { |
|
|
watch: { |
|
|
@ -40,18 +41,36 @@ export default { |
|
|
deep: true, |
|
|
deep: true, |
|
|
handler(val) { |
|
|
handler(val) { |
|
|
this.setOptions(val) |
|
|
this.setOptions(val) |
|
|
} |
|
|
}, |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
|
|
|
// mounted() { |
|
|
|
|
|
// this.$nextTick(() => { |
|
|
|
|
|
// this.initChart() |
|
|
|
|
|
// }) |
|
|
|
|
|
// }, |
|
|
mounted() { |
|
|
mounted() { |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
this.initChart() |
|
|
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() { |
|
|
beforeDestroy() { |
|
|
if (!this.chart) { |
|
|
if (!this.chart) { |
|
|
return |
|
|
return |
|
|
} |
|
|
} |
|
|
|
|
|
if (this.startCharts) { |
|
|
|
|
|
clearInterval(this.startCharts) |
|
|
|
|
|
} |
|
|
this.chart.dispose() |
|
|
this.chart.dispose() |
|
|
this.chart = null |
|
|
this.chart = null |
|
|
}, |
|
|
}, |
|
|
@ -60,52 +79,66 @@ export default { |
|
|
this.chart = echarts.init(this.$el, 'macarons') |
|
|
this.chart = echarts.init(this.$el, 'macarons') |
|
|
this.setOptions(this.chartData) |
|
|
this.setOptions(this.chartData) |
|
|
}, |
|
|
}, |
|
|
setOptions({ legend, seriesName, Data, nextUrl, unit, params } = {}) { |
|
|
setOptions({ |
|
|
this.chart.setOption({ |
|
|
legend, |
|
|
|
|
|
seriesName, |
|
|
|
|
|
Data, |
|
|
|
|
|
nextUrl, |
|
|
|
|
|
unit, |
|
|
|
|
|
params, |
|
|
|
|
|
color, |
|
|
|
|
|
} = {}) { |
|
|
|
|
|
var option = { |
|
|
title: { |
|
|
title: { |
|
|
text: seriesName, |
|
|
text: seriesName, |
|
|
// subtext: '纯属虚构', |
|
|
// subtext: '纯属虚构', |
|
|
x: 'center', |
|
|
x: 'center', |
|
|
// bottom: 10, |
|
|
// bottom: 0, |
|
|
top: 10, |
|
|
top: 0, |
|
|
//left: 30, |
|
|
// left: 30, |
|
|
|
|
|
|
|
|
textStyle: { |
|
|
textStyle: { |
|
|
fontSize: 20, |
|
|
// fontSize: 20, |
|
|
color: '#8657c8', |
|
|
color: '#b7d8fa', |
|
|
//fontWeight: 'bolder' // 字体加粗 |
|
|
fontSize: 0, |
|
|
} |
|
|
|
|
|
|
|
|
// fontWeight: 'bolder' // 字体加粗 |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
grid: { |
|
|
grid: { |
|
|
left: 10, |
|
|
left: 10, |
|
|
right: 10, |
|
|
right: 10, |
|
|
bottom: 10, |
|
|
bottom: 10, |
|
|
top: 10, |
|
|
top: 0, |
|
|
containLabel: true |
|
|
containLabel: true, |
|
|
}, |
|
|
}, |
|
|
tooltip: { |
|
|
tooltip: { |
|
|
|
|
|
show: false, |
|
|
trigger: 'item', |
|
|
trigger: 'item', |
|
|
// formatter: '{b} : {c} ' + unit + ' ({d}%)' |
|
|
formatter: '{b} : {c} ' + unit + ' ({d}%)', |
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|
|
// formatter: '{a} <br/>{b} : {c} ({d}%)' |
|
|
}, |
|
|
}, |
|
|
legend: { |
|
|
legend: {show: false, |
|
|
// right: '10', |
|
|
// right: '10', |
|
|
bottom: '30', |
|
|
bottom: '0', |
|
|
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
|
|
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
|
|
textStyle: { |
|
|
textStyle: { |
|
|
// fontSize: 14, |
|
|
fontSize: 14, |
|
|
color: '#666' |
|
|
color: '#b7d8fa', |
|
|
// fontWeight: 'bolder' // 字体加粗 |
|
|
// fontWeight: 'bolder' // 字体加粗 |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
series: [ |
|
|
series: [ |
|
|
{ |
|
|
{ |
|
|
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
|
|
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
|
|
type: 'pie', |
|
|
type: 'pie', |
|
|
|
|
|
color: color, |
|
|
|
|
|
// color:[ 'green','blue'], |
|
|
// roseType: 'radius', |
|
|
// roseType: 'radius', |
|
|
radius: [50, 60], |
|
|
radius: [55, 60], |
|
|
center: ['50%', '48%'], |
|
|
center: ['50%', '50%'], |
|
|
data: Data.seriesData, |
|
|
data: Data.seriesData, |
|
|
|
|
|
// roseType: 'area', |
|
|
// [ |
|
|
// [ |
|
|
// { value: 320, name: 'Industries' }, |
|
|
// { value: 320, name: 'Industries' }, |
|
|
// { value: 240, name: 'Technology' }, |
|
|
// { value: 240, name: 'Technology' }, |
|
|
@ -113,14 +146,36 @@ export default { |
|
|
// { value: 100, name: 'Gold' }, |
|
|
// { value: 100, name: 'Gold' }, |
|
|
// { value: 59, name: 'Forecasts' } |
|
|
// { value: 59, name: 'Forecasts' } |
|
|
// ], |
|
|
// ], |
|
|
|
|
|
// itemStyle: { |
|
|
|
|
|
// borderRadius: 3 |
|
|
|
|
|
// borderColor: '#091243', |
|
|
|
|
|
// borderWidth: 2 |
|
|
|
|
|
// }, |
|
|
animationEasing: 'cubicInOut', |
|
|
animationEasing: 'cubicInOut', |
|
|
animationDuration: 2600, |
|
|
animationDuration: 2600, |
|
|
|
|
|
emphasis: { |
|
|
|
|
|
label: { |
|
|
|
|
|
show: false, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
label: { |
|
|
label: { |
|
|
|
|
|
show: false, |
|
|
|
|
|
// formatter: '{b}:\n{c} ' + unit, |
|
|
|
|
|
formatter: '{d}%', |
|
|
|
|
|
position: 'center', |
|
|
|
|
|
emphasis: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
fontSize: '22', |
|
|
|
|
|
color: '#3595f9', |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
label22: { |
|
|
normal: { |
|
|
normal: { |
|
|
show: false, |
|
|
show: false, |
|
|
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ', |
|
|
// 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}%} ', |
|
|
formatter: '{b|{b}：}{c} ' + unit + ' \n{hr|}\n {per|{d}%} ', |
|
|
// backgroundColor: '#eee', |
|
|
// backgroundColor: '#eee', |
|
|
// borderColor: '#aaa', |
|
|
// borderColor: '#aaa', |
|
|
// borderWidth: 1, |
|
|
// borderWidth: 1, |
|
|
@ -147,26 +202,27 @@ export default { |
|
|
borderColor: '#aaa', |
|
|
borderColor: '#aaa', |
|
|
width: '100%', |
|
|
width: '100%', |
|
|
borderWidth: 0.5, |
|
|
borderWidth: 0.5, |
|
|
height: 0 |
|
|
height: 0, |
|
|
}, |
|
|
}, |
|
|
b: { |
|
|
b: { |
|
|
fontSize: 12, |
|
|
fontSize: 14, |
|
|
lineHeight: 33 |
|
|
lineHeight: 33, |
|
|
}, |
|
|
}, |
|
|
per: { |
|
|
per: { |
|
|
color: '#eee', |
|
|
color: '#eee', |
|
|
backgroundColor: '#334455', |
|
|
backgroundColor: '#334455', |
|
|
padding: [2, 4], |
|
|
padding: [2, 4], |
|
|
borderRadius: 2 |
|
|
borderRadius: 2, |
|
|
} |
|
|
}, |
|
|
} |
|
|
}, |
|
|
} |
|
|
}, |
|
|
} |
|
|
}, |
|
|
} |
|
|
}, |
|
|
] |
|
|
], |
|
|
}) |
|
|
} |
|
|
this.chart.on('click', function(param) { |
|
|
this.chart.setOption(option) |
|
|
if (nextUrl.length > 0) { |
|
|
this.chart.on('click', function (param) { |
|
|
|
|
|
if (nextUrl != null && nextUrl.length > 0) { |
|
|
// 判断 nexurl数与那个列 |
|
|
// 判断 nexurl数与那个列 |
|
|
var url = '' |
|
|
var url = '' |
|
|
for (var i = 0; i < nextUrl.length; i++) { |
|
|
for (var i = 0; i < nextUrl.length; i++) { |
|
|
@ -180,8 +236,8 @@ export default { |
|
|
query: { |
|
|
query: { |
|
|
id: param.name, |
|
|
id: param.name, |
|
|
start: params.start, |
|
|
start: params.start, |
|
|
end: params.end |
|
|
end: params.end, |
|
|
} |
|
|
}, |
|
|
}) |
|
|
}) |
|
|
// --在最外层新窗口打开 |
|
|
// --在最外层新窗口打开 |
|
|
// let routeUrl = router.resolve({ |
|
|
// let routeUrl = router.resolve({ |
|
|
@ -195,7 +251,67 @@ export default { |
|
|
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
|
|
// 方法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> |
|
|
</script> |
|
|
|
zyc@123456
2 years ago