echart的关系图高亮_echarts中点击legend当前图表高亮

# css* {

margin: 0;

padding: 0;

}

.content {

width: 500px;

height: 400px;

border: 1px solid red;

margin: 100px auto;

}

#main {

width: 100%;

height: 100%;

background-color: #0D141E;

}

# html

# js

var myChart = echarts.init(document.getElementById('main'));

var option = {

legend: {

icon: 'none',

data: [{

name: '邮件营销',

textStyle: {

fontWeight: 'normal',

color: '#fff'

}

}, {

name: '联盟广告',

textStyle: {

fontWeight: 'normal',

color: '#fff'

}

}, {

name: '视频广告',

textStyle: {

fo

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要让 ECharts 图表legend 文字在移入时高亮,你可以使用 ECharts 的事件监听器和 API 来实现。以下是一个示例代码,演示了如何实现这个效果: ```javascript // 创建图表实例 var myChart = echarts.init(document.getElementById('myChart')); // 图表的配置项 var option = { // 其他配置项... // 设置 legend 的样式 legend: { // 其他配置项... textStyle: { // 设置默认状态下的文本样式 color: '#333', fontWeight: 'normal' }, selectedMode: 'single', // 设置为单选模式,以便只高亮一个 legend // 监听鼠标移入事件 // 当鼠标移入时,将选legend 文字进行高亮 // 并将其他的 legend 文字恢复默认样式 selected: { 'Legend 1': true, // 默认选legend 'Legend 2': false, 'Legend 3': false, // ... }, // 监听 legendselectchanged 事件 // 当 legend状态发生改变时触发 // 在事件处理函数更新图表的状态 // 可以根据需要自定义处理逻辑 // 例如,更新图表数据、样式等 emphasis: { // 监听鼠标移入事件 focus: 'series' }, blur: { focus: 'none' } }, // 其他配置项... }; // 使用配置项显示图表 myChart.setOption(option); ``` 请注意,上述代码的 'Legend 1'、'Legend 2'、'Legend 3' 是示例legend 名称,你需要根据你的实际需求替换为你的 legend 名称。你还可以根据需要自定义其他样式和事件处理逻辑。详细的配置选项和事件监听器请参考 ECharts 的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值