echarts怎么改变树形图线条的颜色呢?

Jokeranswer 2016-12-14 02:00:39

如图,设置成第二种格式的
...全文
4217 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
DTQX 2019-02-22
  • 打赏
  • 举报
回复

myChart.showLoading();
$.get('data/asset/data/flare.json', function (data) {
    myChart.hideLoading();

    echarts.util.each(data.children, function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });

    data.children[0].itemStyle = {
        color : '#0000ff',
        borderColor:'#0000ff'
    };
    data.children[0].lineStyle = {
        color : '#0000ff',
        borderColor:'#0000ff'
    }
    let data2 = data.children[1];

    myChart.setOption(option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',

                data: [data],

                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',

                symbolSize: 7,

                label: {
                    normal: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 9
                    }
                },

                leaves: {
                    label: {
                        normal: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    }
                },

                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            },
            {
                type: 'tree',

                data: [data2],

                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',

                symbolSize: 7,

                label: {
                    normal: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 9
                    }
                },
                
                lineStyle:{
                    color:'#ff0000'
                },

                leaves: {
                    label: {
                        normal: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    }
                },

                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    });
});
在data中设置lineStyle是边的样式,itemStyle是节点样式
一根胡萝卜 2018-12-22
  • 打赏
  • 举报
回复
这种方式破坏了插件,正在寻找更好的方式解决
一根胡萝卜 2018-12-22
  • 打赏
  • 举报
回复
https://blog.csdn.net/wusefengye/article/details/79110195
一根胡萝卜 2018-12-22
  • 打赏
  • 举报
回复
https://blog.csdn.net/wusefengye/article/details/79110195
lvxf725 2018-01-12
  • 打赏
  • 举报
回复
楼主,求分享,
dq0709 2017-08-23
  • 打赏
  • 举报
回复
楼上的问题解决了吗?同求啊啊啊啊啊啊啊
xiangzhang131 2017-03-19
  • 打赏
  • 举报
回复
楼主的这个问题解决了么,我也遇到了这样的问题?
当作看不见 2016-12-14
  • 打赏
  • 举报
回复
你没仔细看这个lineStyle 是一组数据可以设置一次的。也就是series 里面的多个data对应的lineStyle是可以设置多个的

 series: [
            {
                type: 'sankey',
                layout: 'none',
                data: data.nodes,
                links: data.links,
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        borderColor: '#aaa'
                    }
                },
                lineStyle: {
                    normal: {
                        color: 'source',
                        curveness: 0.5
                    }
                }
            },
            {
                type: 'sankey',
                layout: 'none',
                data: data.nodes,
                links: data.links,
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        borderColor: '#aaa'
                    }
                },
                lineStyle: {
                    normal: {
                        color: 'source',
                        curveness: 0.5
                    }
                }
            }
        ]
Jokeranswer 2016-12-14
  • 打赏
  • 举报
回复
引用 1 楼 qq_29594393 的回复:
series 里面设置 。属性名 lineStyle http://echarts.baidu.com/option.html#series-sankey.lineStyle
这个是全部设置的,你认真看下图额,我要每一个系列的颜色都不一样额
当作看不见 2016-12-14
  • 打赏
  • 举报
回复
series 里面设置 。属性名 lineStyle http://echarts.baidu.com/option.html#series-sankey.lineStyle

87,901

社区成员

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

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