需求
环图展示统计的数据,默认展示的块需要突出高亮显示,点击某个条件块时,若是突出显示的则取消突出显示,不是突出显示的则高亮突出显示,并根据点击的条件去后台查询数据。
完整代码
<template>
<div class="content">
<div class="top-content">
<div class="chartBox">
<div class="title">学习阶段情况</div>
<div class="objCount">总人数:{{ count }}个</div>
<ve-ring
ref="chart_process"
style="height:400px"
:extend="chartExtend"
:data="chartDataP"
:settings="chartSettings"
:events="chartPEvents"
/>
</div>
</div>
</div>
</template>
<script>
import { Toast } from 'vant'
export default {
data() {
// 设置环形图半径
this.chartSettings = {
radius: [60, 100],
label: {
formatter: params => {
return `${params.data.name}:${params.data.value}个`
}
}
}
this.chartExtend = {
legend: {
show: true,
bottom: 'bottom'
},
// 设置多选
selectedMode:'multiple',
selectedOffset:10
}
const _this = this
// 饼图点击事件
this.chartPEvents = {
click: function(e) {
const index = _this.selectKey.indexOf(e.name)
const chartP = _this.$refs.chart_process.echarts
const pRows = _this.chartDataP.rows
// 管理员点击
if( index === -1){
_this.selectKey.push(e.name)
}else{
_this.selectKey.splice(index,1)
}
for(let i=0;i<pRows.length;i++){
chartP._api.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: i})
_this.selectKey.map(item=>{
if(item===pRows[i].name){
chartP._api.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: i})
}
})
}
// 列表展示的数据
_this.listData = []
_this.page = 0
_this.loading = false
_this.finished = false
_this.refreshing = false
//去后台查询数据
_this.getNotChartData()
}
}
return {
// 加载模块需要的数据
loading: false,
finished: false,
refreshing: false,
size: 10,
page: 0,
count: null, // 总数据
// 默认选中全部值
selectKey: ['小学', '初中', '高中', '大学'],
chartDataP: {
columns: [],
rows: []
},
listData: []
}
},
created() {
this.getData()
this.$nextTick(() => {
// 解决v-charts不显示问题
this.$refs.chart_process.echarts.resize()
})
},
mounted() {
this.$nextTick(() => {
let chartP = this.$refs.chart_process.echarts
// 定时器是为了确保将环图所需的数据加载完
setTimeout(()=>{
let pRows = this.chartDataP.rows
for(let i=0;i<pRows.length;i++){
this.selectKey.map(item=>{
// 根据后台返回的数据 设置默认的展示的块高亮突出显示
if(item===pRows[i].name){
chartP._api.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: i})
}
})
}
},500)
})
},
methods: {
// 获取所有数据
// 根据实际情况 后台返回的数据来赋值
getData() {
this.count = 659
this.chartDataP.columns = ['name', 'number']
this.chartDataP.rows = [
{ name: "小学", number: 122 },
{ name: "初中", number: 145 },
{ name: "高中", number: 269 },
{ name: "大学", number: 123 }
]
},
getNotChartData() {
// 去后台查询数据
// .....
}
}
}
</script>
<style lang="less" scoped>
.content{
position: relative;
top: 0;
left: 0;
width: 100%;
padding: 0.2rem;
margin-bottom: 1.33333rem;
overflow-y: scroll;
.top-content{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
padding-bottom: 4px;
}
// 环形图样式
.chartBox{
position: relative;
top: 0;
left: 0;
width:100%;
border: 1px solid #F2F2F2;
border-radius: 0.2rem;
margin-bottom: 0.2rem;
.objCount{
position: absolute;
top: 46%;
left: 37%;
width:100px;
font-size: 0.4rem;
color: #666666;
}
.title{
position: absolute;
left: 40%;
top: 30px;
font-size: 0.4rem;
font-weight: 600;
color: #666666;
}
}
}
</style>