方法一

在 echarts 饼图中，可以通过 emphasis 属性设置数据项被高亮时的样式。而如果您想要设置默认高亮的一个数据项，可以在该数据项的配置对象中使用 selected: true 属性来实现。

option = {// 其他配置项series: [{type: 'pie',data: [{value: 335, name: '直接访问', selected: true},{value: 310, name: '邮件营销'},{value: 234, name: '联盟广告'},{value: 135, name: '视频广告'},{value: 1548, name: '搜索引擎'}],// 其他配置项}]
};

在上述代码中，selected: true 属性被设置在了数据项 {value: 335, name: ‘直接访问’} 中，表示该数据项会在图表初始化时被默认高亮。您可以根据实际情况，将该属性设置在您需要默认高亮的数据项中即可。

同时，您也可以通过 selectedOffset 属性来控制高亮时的偏移量。例如：

option = {// 其他配置项series: [{type: 'pie',data: [{value: 335, name: '直接访问', selected: true},{value: 310, name: '邮件营销'},{value: 234, name: '联盟广告'},{value: 135, name: '视频广告'},{value: 1548, name: '搜索引擎'}],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'},selectedOffset: 10 // 设置选中时的偏移量为 10},// 其他配置项}]
};

在上述代码中，selectedOffset 属性被设置在了 emphasis 中，表示高亮时的偏移量为 10 像素。您可以根据实际情况，调整该值以达到最佳效果。

方法二

在 echarts 中，可以使用 dispatchAction 方法来触发某个事件。如果想要通过代码方式实现高亮某个数据项，可以使用 dispatchAction 方法触发 highlight 事件。

myChart.dispatchAction({type: 'highlight',seriesIndex: 0, // 图表中的第一个系列dataIndex: 0, // 要高亮的数据项的索引
});

在上述代码中，dispatchAction 方法被用来触发 highlight 事件，表示要高亮第一个系列的第一个数据项。您可以根据实际情况，修改 seriesIndex 和 dataIndex 的值来高亮您需要的数据项。

另外，如果您想要取消某个数据项的高亮，可以使用 downplay 事件触发，例如：

myChart.dispatchAction({type: 'downplay',seriesIndex: 0, // 图表中的第一个系列dataIndex: 0, // 要取消高亮的数据项的索引
});

echarts饼图默认高亮/取消高亮相关推荐

echarts 饼图默认高亮，选中任意选项离开后再次高亮，中心区显示选中的数据
主要方法: // 高亮setHighLight(id) {let myChart = this.$echarts.init(document.getElementById(id))//设置默认选中高亮 ...
echarts 饼图默认高亮
默认label高亮,需要在赋值之后调用,才生效(myChart.setOption(option)) function getDefaultSelected(myChart) { let in ...
echarts饼图默认中间显示总数
this.echarts1.setOption({title: {text: ['Search Engine',' 1048'].join('\n'), // join('\n')作用是换行居中lef ...
react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色
react 可视化项目 ECharts 3D区域地图图表地图介绍 echarts图表引入 react页面中引入使用地图介绍做可视化项目时需要3d的区域地图,在网上搜到ECharts社区的一个其他 ...
java鼠标进入高亮效果_鼠标选中文本划词高亮、再次选中划词取消高亮效果
当我们需要鼠标选中文本后,文本高亮.当再次将选中的文本选中后,取消高亮效果时该如何实现呢? 一.介绍 window.getSelection 获取鼠标选中内容,主要是利用了window.getSele ...
ubuntu中查找文件后高亮_vim查找替换及取消高亮
查找替换的格式如下: :[range]s[ubstitute]/{pattern}/{string}/[flags] [count] range可以是 . 点号表示在当前行查找(这是默认的range ...
wps的pdf高亮后怎么取消_PDF文档如何取消高亮
我们在阅读文件跟学习的时候遇到重点的部分我们会使用荧光笔画上重点,那么电子文件的时候我们又应该要怎么办呢?电子文件要想显示重点就要在文件中添加上文本高亮,但每个人的重点不一样,当我们接触一个文件的时候 ...
echarts 饼图取消legend图例的点击事件，保留鼠标悬浮legend上显示tooltie提示信息的事件
echarts 饼图因为我在饼图渲染数据的时候对一些数据较小的label和labelLine进行了隐藏,进行了数据的二次处理,所以legend鼠标悬浮显示出tooltie是我所需要的而点击事件,会关 ...
Allegro PCB对某个网络进行高亮以及取消高亮
Allegro PCB对某个网络进行高亮 1:点击Display中的Assign Color(或者自定义的快捷键1),如下图所示: 2:在Options面板中选择一个颜色,在Find面板中选中Net( ...

echarts饼图默认高亮/取消高亮

方法一

方法二

echarts饼图默认高亮/取消高亮相关推荐

最新文章

热门文章