echarts动态改变线条样式,linestyle不起作用

糊涂娃8343 2019-11-18 09:58:07
我想要在随机数为1的时候设置一条线的样式,在0的时候设置另一条线的样式,但最总效果不是这样,代码如下,请大神帮忙看看

<template>
<div class="about">
<div id="tree" style="height:100vh"></div>
</div>
</template>

<script>
import echarts from 'echarts'
export default {
name: 'about',
mounted() {
let tree = echarts.init(document.getElementById('tree'));
let option = this.getOption();

setInterval(function() {
let aa = Math.floor(Math.random() * 2)

console.log(aa);

if (aa == 0) {
option.series[0].data[0].children[0].lineStyle = {
color: '#ff0000'
}
} else {
option.series[0].data[0].children[0].children[0].lineStyle = {
color: '#0000ff'
}
}

tree.setOption(option)
}, 3000)
},
methods: {
getOption() {
let option = {
series: [{
type: 'tree',
left: '2%',
right: '2%',
top: '10%',
bottom: '10%',
animationDurationUpdate: 750,
orient: 'vertical',

data: [{
name: '测试',
children: [{
name: '子',
children: [{
name: '测试最底层'
}, {
name: '子2',

}

]
}]
}]
}]
}

return option;
}
},

}
</script>
...全文
3424 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
Hello World, 2019-11-21
  • 打赏
  • 举报
回复
引用 7 楼 猛将-Gerhardt 的回复:
[quote=引用 6 楼 Hello World, 的回复:]


你好,这个效果怎么实现的[/quote]
就是4#讲的那样,上传了个示例
Hello World, 2019-11-20
  • 打赏
  • 举报
回复
糊涂娃8343 2019-11-20
  • 打赏
  • 举报
回复
引用 3 楼 Clinging_white 的回复:
[quote=引用 2 楼 猛将-Gerhardt 的回复:] [quote=引用 1 楼 Clinging_white 的回复:] 楼主Echarts引用的版本是多少的 各版本对应的lineStyle属性是有差异的 V2 V4 color属性 是在series lineStyle下 V3 color属性 是在series lineSyle normal下
多谢你的答复,我的版本v4,是这样的,只要不是在定时器里,都会生效,但我的需求是想随机生成加颜色的线条[/quote] 控制台有没报错提示信息什么的 会不会是定时器里面的option的问题[/quote] 没有报错,可能就是echarts不支持
糊涂娃8343 2019-11-20
  • 打赏
  • 举报
回复
引用 6 楼 Hello World, 的回复:
你好,这个效果怎么实现的
傻蛋丫 2019-11-19
  • 打赏
  • 举报
回复
引用 2 楼 猛将-Gerhardt 的回复:
[quote=引用 1 楼 Clinging_white 的回复:] 楼主Echarts引用的版本是多少的 各版本对应的lineStyle属性是有差异的 V2 V4 color属性 是在series lineStyle下 V3 color属性 是在series lineSyle normal下
多谢你的答复,我的版本v4,是这样的,只要不是在定时器里,都会生效,但我的需求是想随机生成加颜色的线条[/quote] 控制台有没报错提示信息什么的 会不会是定时器里面的option的问题
糊涂娃8343 2019-11-19
  • 打赏
  • 举报
回复
引用 1 楼 Clinging_white 的回复:
楼主Echarts引用的版本是多少的 各版本对应的lineStyle属性是有差异的 V2 V4 color属性 是在series lineStyle下 V3 color属性 是在series lineSyle normal下
多谢你的答复,我的版本v4,是这样的,只要不是在定时器里,都会生效,但我的需求是想随机生成加颜色的线条
傻蛋丫 2019-11-19
  • 打赏
  • 举报
回复
楼主Echarts引用的版本是多少的 各版本对应的lineStyle属性是有差异的 V2 V4 color属性 是在series lineStyle下 V3 color属性 是在series lineSyle normal下
糊涂娃8343 2019-11-19
  • 打赏
  • 举报
回复
引用 4 楼 Hello World, 的回复:
弄了半天,发现这家伙只改变线的颜色不会刷新,可以手动点击节点来收缩展开达到更新的目的,还可以同时修改其他的属性来刷新,比如修改name:

                option.series[0].data[0].children[0].name=option.series[0].data[0].children[0].name+' ';
                myChart.setOption(option,true,false);
                option.series[0].data[0].children[0].name=option.series[0].data[0].children[0].name.substring(0,option.series[0].data[0].children[0].name.length-1);
                myChart.setOption(option,true,false);
哦,那样的话就满足不了需求啦,不知道有什么办法可以实现这种及时修改
Hello World, 2019-11-19
  • 打赏
  • 举报
回复
弄了半天,发现这家伙只改变线的颜色不会刷新,可以手动点击节点来收缩展开达到更新的目的,还可以同时修改其他的属性来刷新,比如修改name:

option.series[0].data[0].children[0].name=option.series[0].data[0].children[0].name+' ';
myChart.setOption(option,true,false);
option.series[0].data[0].children[0].name=option.series[0].data[0].children[0].name.substring(0,option.series[0].data[0].children[0].name.length-1);
myChart.setOption(option,true,false);

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧