218 lines
8.5 KiB
JavaScript
218 lines
8.5 KiB
JavaScript
|
/**
|
|||
|
|
* 顶部header
|
|||
|
|
*/
|
|||
|
|
Vue.component("cz-warning-survey", {
|
|||
|
|
template: `
|
|||
|
|
<div :style="{height: height+'px'}" id="warningSurvey">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
`,
|
|||
|
|
props: {
|
|||
|
|
title:{
|
|||
|
|
type: String,
|
|||
|
|
},
|
|||
|
|
height:{
|
|||
|
|
type: Number,
|
|||
|
|
},
|
|||
|
|
distribute:{
|
|||
|
|
type: Array,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
active:0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted(){
|
|||
|
|
this.init()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
init(){
|
|||
|
|
this.warningChart(this.distribute,'warningSurvey','次')
|
|||
|
|
},
|
|||
|
|
//预警概况 Echart
|
|||
|
|
warningChart(datas,id,unit){
|
|||
|
|
let newPromise = new Promise((resolve) => {
|
|||
|
|
resolve()
|
|||
|
|
})
|
|||
|
|
//然后异步执行echarts的初始化函数
|
|||
|
|
newPromise.then(() => {
|
|||
|
|
var myChart = echarts.init(document.getElementById(id));
|
|||
|
|
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
|
|||
|
|
var charPie3currentIndex = 0
|
|||
|
|
var startCharts;
|
|||
|
|
let legendData = []
|
|||
|
|
for (var j = 0; j < datas.length; j++) {
|
|||
|
|
var data = {
|
|||
|
|
name: datas[j].name,
|
|||
|
|
//icon: 'circle',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: '#c1d1f3',
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
legendData.push(data)
|
|||
|
|
}
|
|||
|
|
let objData = array2obj(datas, 'name')
|
|||
|
|
var colorList = ['#00fff1', '#04c8fa', '#aa01fe', '#4e84fe', '#ff7b79','#edae5e', '#fe4101','#14d18f']
|
|||
|
|
var chChart1 = echarts.init(document.getElementById(id));
|
|||
|
|
option1 = {
|
|||
|
|
tooltip: {
|
|||
|
|
show:true,
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: function(params,tichet,callback){
|
|||
|
|
var name = params.name;
|
|||
|
|
var value = params.value;
|
|||
|
|
var percent=params.percent
|
|||
|
|
res = '<div style="text-align: center;font-size: 16px;color: #c1d1f3;font-weight: bold;" id="toolTipBox1">' +
|
|||
|
|
'<p style="padding-bottom:10px;">' +
|
|||
|
|
'<span style="color: #01fff0;font-size: 20px;padding-right: 5px">'+value+'</span> '+
|
|||
|
|
'<span style="color: #01fff0;font-size: 20px">'+percent+'%</span>' +
|
|||
|
|
'</p>'+
|
|||
|
|
'<p>'+name+'</p>'+
|
|||
|
|
'</div>'
|
|||
|
|
//res =''+params.name+'\n\n'+params.value+'（'+params.percent+'%）'
|
|||
|
|
return res;
|
|||
|
|
},
|
|||
|
|
position: function(point,params ,dom,rect, size){
|
|||
|
|
var marginW = Math.ceil(size.contentSize[0]/2);
|
|||
|
|
var marginH = Math.ceil(size.contentSize[1]/2);
|
|||
|
|
dom.style.marginLeft = "-" + marginW + "px";
|
|||
|
|
dom.style.marginTop = "-" + marginH + "px";
|
|||
|
|
return ['50%', '30%']
|
|||
|
|
},
|
|||
|
|
alwaysShowcontent:true,
|
|||
|
|
backgroundColor:'none',
|
|||
|
|
textStyle:{
|
|||
|
|
color:'#fff'
|
|||
|
|
}
|
|||
|
|
//formatter: '{b}\n\n{c} ({d}%)'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
orient: 'vertical',
|
|||
|
|
itemWidth: 15,
|
|||
|
|
itemHeight: 10,
|
|||
|
|
itemGap: 10,
|
|||
|
|
|
|||
|
|
top: '55%',
|
|||
|
|
left: 'center',
|
|||
|
|
data: legendData,
|
|||
|
|
formatter: function (name) {
|
|||
|
|
return `${name} ${objData[name].value} ${unit} ${objData[name].percent}% `
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['28%', '45%'],
|
|||
|
|
center: ['50%', '30%'],
|
|||
|
|
avoidLabelOverlap: false,
|
|||
|
|
//selectedMode: 'single',
|
|||
|
|
data:datas,
|
|||
|
|
itemStyle: {
|
|||
|
|
|
|||
|
|
normal: {
|
|||
|
|
borderWidth: 7,
|
|||
|
|
borderColor: "#040e27",
|
|||
|
|
color: function(params) {
|
|||
|
|
return colorList[params.dataIndex]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
position: 'center',
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
itemStyle: {
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowOffsetX: 0,
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|||
|
|
},
|
|||
|
|
label : {
|
|||
|
|
show: false,
|
|||
|
|
fontSize: '20',
|
|||
|
|
color: "#fff",
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
formatter: "{b}\n\n{c} ({d}%)"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
chChart1.setOption(option1);
|
|||
|
|
window.onresize = chChart1.resize;
|
|||
|
|
|
|||
|
|
function array2obj (array, key) {
|
|||
|
|
var resObj = {}
|
|||
|
|
for (var i = 0; i < array.length; i++) {
|
|||
|
|
resObj[array[i][key]] = array[i]
|
|||
|
|
}
|
|||
|
|
return resObj
|
|||
|
|
}
|
|||
|
|
chChart1.on('mouseover', function (param) {
|
|||
|
|
isSet = false
|
|||
|
|
clearInterval(startCharts)
|
|||
|
|
// 取消之前高亮的图形
|
|||
|
|
chChart1.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: charPie3currentIndex
|
|||
|
|
})
|
|||
|
|
// 高亮当前图形
|
|||
|
|
chChart1.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: param.dataIndex
|
|||
|
|
})
|
|||
|
|
// 显示 tooltip
|
|||
|
|
chChart1.dispatchAction({
|
|||
|
|
type: 'showTip',
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: param.dataIndex
|
|||
|
|
})
|
|||
|
|
$("#toolTipBox1").fadeOut(3000)
|
|||
|
|
})
|
|||
|
|
var chartHover = function () {
|
|||
|
|
var dataLen = option1.series[0].data.length
|
|||
|
|
// 取消之前高亮的图形
|
|||
|
|
chChart1.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: charPie3currentIndex
|
|||
|
|
})
|
|||
|
|
charPie3currentIndex = (charPie3currentIndex + 1) % dataLen
|
|||
|
|
// 高亮当前图形
|
|||
|
|
chChart1.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: charPie3currentIndex
|
|||
|
|
})
|
|||
|
|
// 显示 tooltip
|
|||
|
|
chChart1.dispatchAction({
|
|||
|
|
type: 'showTip',
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: charPie3currentIndex,
|
|||
|
|
})
|
|||
|
|
$("#toolTipBox1").fadeOut(3000)
|
|||
|
|
}
|
|||
|
|
startCharts = setInterval(chartHover, 3000)
|
|||
|
|
// 4、鼠标移出之后，恢复自动高亮
|
|||
|
|
chChart1.on('mouseout', function (param) {
|
|||
|
|
if (!isSet) {
|
|||
|
|
startCharts = setInterval(chartHover, 3000)
|
|||
|
|
isSet = true
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
watch:{
|
|||
|
|
distribute: function (n,o) {
|
|||
|
|
this.warningChart(this.distribute,'warningSurvey','次')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
})
|