echarts-桑基图图例

2023-11-13  本文已影响0人  blue_angel
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
          } //桑基图边的样式
        }
      },
上一篇 下一篇

猜你喜欢

热点阅读