echarts轮训展示某个
//学校资产占比的配置
function schollAssets() {
var myChart = window.$echarts.init(
document.getElementById('schollproportion')
)
var index = 0
var preindex = 0
function fun() {
secondData.timerSet = setInterval(function () {
// // 框,如果后期需要可以
// myChart.dispatchAction({
// type: 'showTip',// seriesIndex: 0,// dataIndex: index,// })
// 取消高亮指定的数据图形
myChart.dispatchAction({
type: 'downplay',seriesIndex: 0,dataIndex: preindex,})
// 让图像凸出来
myChart.dispatchAction({
type: 'highlight',dataIndex: index,})
// 视图赋值,展示当前的是那
if (
secondData.schollZhan &&
secondData.schollZhan[index] &&
secondData.schollZhan[index].value
) {
secondData.assestNumPro = secondData.schollZhan[index].value
} else {
secondData.assestNumPro = 0
}
if (
secondData.schollZhan &&
secondData.schollZhan[index] &&
secondData.schollZhan[index].name
) {
secondData.assetsNamePro = secondData.schollZhan[index].name
} else {
secondData.assetsNamePro = ''
}
if (
secondData.schollZhan &&
secondData.schollZhan[index] &&
secondData.schollZhan[index].totalCount
) {
secondData.assetsProPercent =
(
(secondData.schollZhan[index].value /
secondData.schollZhan[index].totalCount) *
100
).toFixed(2) + '%'
} else {
secondData.assetsProPercent = '0%'
}
preindex = index
index++
if (index > secondData.schollZhan.length - 1) {
index = 0
}
},3000)
}
// 只有一条数据的的时候就不循环展示了
if (secondData.schollZhan.length > 1) {
fun()
}
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',formatter: function (params) {
return (
params.marker +
params.name +
'<span style="display:inline-block;margin-right:8px;border-radius:10px;width:10px;height:10px;"></span>' +
params.value +
'个'
)
},},series: [
{
type: 'pie',radius: ['50%','70%'],center: ['30%','50%'],itemStyle: {
borderRadius: 0,borderColor: '#fff',borderWidth: 2,label: {
show: false,formatter: function (arg) {
return arg.name + ':' + arg.percent + '%'
},data: secondData.schollZhan,],}
// 使用刚指定的配置项和数据图表。
myChart.setOption(option)
// 第一次认第一条数据高亮
myChart.dispatchAction({ type: 'highlight',dataIndex: index })
function showInfoNumBaifen(myorIndex) {
secondData.assestNumPro = secondData.schollZhan[myorIndex].value //资产
secondData.assetsProPercent =
(
(secondData.schollZhan[myorIndex].value /
secondData.schollZhan[myorIndex].totalCount) *
100
).toFixed(2) + '%' //占比
secondData.assetsNamePro = secondData.schollZhan[myorIndex].name //
}
// 最初一开始就展示第小板块的数据
showInfoNumBaifen(0)
// 点击的时候,让某图案高亮,右侧对应的信息数据
myChart.on('click',function (param) {
myChart.dispatchAction({ type: 'downplay',dataIndex: preindex })
myChart.dispatchAction({
type: 'highlight',dataIndex: param.dataIndex,})
// 循环下一次的小板块
preindex = param.dataIndex
index = param.dataIndex
// 点击的哪展示哪
showInfoNumBaifen(param.dataIndex)
})
}
return { overviewLeftassets,schollAssets }
}