描述得乱七八糟的,其实就是外面有个列表,类似于图列,但是他特别复杂我就把图里给写在外面了
差不多长这样需求是这样的,点击饼状图,外面的列表高亮;点击外面的列表,饼状图高亮
来吧,上代码 eChart是图标,ul是列表
<div ref="chart" ></div> <ul class="List"> <li v-for="(item,index) in list" :key="index" @click="tabCon(index)" :class="index == active ? 'cur' : ''"> <span>{{item?.name}} </span> <span>{{item?.value}}</span> </li> </ul>data() { return { chartInstance: null, active:0, list:[ { name:"电子", value:"20.51%" }, { name:"电子2", value:"14.72%" }, { name:"电子3", value:"11.16%" }, { name:"电子4", value:"6.63%" }, { name:"电子5", value:"3.04%" }, ] } }, mounted(){ //数据渲染之后,默认高亮第一个数据 setTimeout(() => { this.tabCon() }, 3000); }, methods: { //点击列表数据,高亮扇形区域,圆心数据提示 tabCon(index = 0) { this.active = index // // 如果还需要进一步取消高亮效果(例如,移除鼠标悬停时的样式) this.chartInstance.dispatchAction({ type: 'downplay', seriesIndex: 0 }); // 高亮指定扇区 this.chartInstance.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index }); }, initEchart(){ this.chartInstance = echarts.init(this.$refs.chart); let arr = [] //数据渲染 this.list.forEach((item, index) => { let param = { name: item?.name, value: item.value } arr.push(param) }) var options = { color: ['#f00', '#f0f', '#ff0', '#00f', '#0f0'], series: [ { type: 'pie', center: ['50%', '50%'], radius: ['45%', '72%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, labelLine: { show: false }, emphasis: { scaleSize: 2, label: { show: true, fontSize: '12', overflow : 'truncate', // 圆心数据提示,每隔4个字换行 rich是自定义样式 formatter: function (val) { // 这是回调函数,参数是label中的文字 var charArr = val.name.split(''); var str = '' for (let i = 0; i < charArr.length; i++) { str += charArr[i];
if (i != 0 && i % 4 == 0) str += '\n'; //每隔4个字换行 } // return str + val.data.value + '%' return `{a|${str}}\n{c|${val.data.value}%}`;
}, rich: { b: { color: '#251717', fontSize: 14, fontWeight: "bold", overflow : 'truncate', }, c: { fontSize: 12, color: '#7F8389', padding: [5, 0, 0, 0], }, }, } }, minAngle: 5, //最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互。 padAngle: 10, data: arr } ], selectedMode: true }; this.chartInstance.setOption(options); this.chartInstance.on('click', (params) => { //点击扇形区域 取消之前的数据显示和,高亮外面列表区域 if(params.dataIndex != this.active){ this.chartInstance.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: this.active }); } this.active = params.dataIndex; }); }, }
标签:高亮,name,外部,value,点击,chartInstance,状图 From: https://www.cnblogs.com/xbxxf/p/18502798