美文网首页
echarts-桑基图图例

echarts-桑基图图例

作者: blue_angel | 来源:发表于2023-11-13 13:58 被阅读0次
    sankeyData: {
            title: {
              text: 'bbb', //报表名称
              left:'center',
              textStyle:{
                color:'#363d4b',
                fontSize:'14',
              },
            },
            tooltip: {
              trigger: 'item',
              triggerOn: 'mousemove',
              backgroundColor: 'rgba(43,57,75,0.8)',
              borderColor: 'rgba(43,57,75,0.8)',
              textStyle: {
                color: '#fff',
                fontSize: 13,
              }
            }, //提示框样式
            series: {
              type: 'sankey', //echarts类型:桑基图
              nodeWidth: 8, //柱子的宽度
              emphasis: {
                focus: 'adjacency',
                itemStyle: {
                  opacity: 0.1
                },
                lineStyle: {
                  opacity: 0.1
                }
              }, //高亮样式
              layout: 'none',
              label: {
                color: '#626262',
                fontSize: 12
              }, //文本样式
              data: [
                {
                  name: 'a',
                  itemStyle: {
                    color: '#2171C8',
                    borderColor: '#2171C8'
                  }
                },
                {
                  name: 'a1',
                  itemStyle: {
                    color: '#2171C8',
                    borderColor: '#2171C8'
                  }
                },
                {
                  name: 'b',
                  itemStyle: {
                    color: '#5DD2A6',
                    borderColor: '#5DD2A6'
                  }
                },
                {
                  name: 'b1',
                  itemStyle: {
                    color: '#5DD2A6',
                    borderColor: '#5DD2A6'
                  }
                },
                {
                  name: 'c',
                  itemStyle: {
                    color: '#4066F5',
                    borderColor: '#4066F5'
                  }
                },
                {
                  name: 'c1',
                  itemStyle: {
                    color: '#4066F5',
                    borderColor: '#4066F5'
                  }
                },
                {
                  name: 'd',
                  itemStyle: {
                    color: '#57A3F9',
                    borderColor: '#57A3F9'
                  }
                }
              ], //桑基图节点数据列表
              links: [
                {
                  source: 'a',
                  target: 'a1',
                  value: 0.5
                },
                {
                  source: 'b',
                  target: 'b1',
                  value: 3
                },
                {
                  source: 'c',
                  target: 'b1',
                  value: 3
                },
                {
                  source: 'c',
                  target: 'c1',
                  value: 3
                },
                {
                  source: 'd',
                  target: 'c1',
                  value: 3
                }
              ], //节点间的边
              lineStyle: {
                color: 'source',
                opacity: 0.07,
                curveness: 0.5
              } //桑基图边的样式
            }
          },
    

    相关文章

      网友评论

          本文标题:echarts-桑基图图例

          本文链接:https://www.haomeiwen.com/subject/xehdwdtx.html