echarts桑基圖詳解

一、echarts桑基圖滑事件

在echarts桑基圖中，可以使用鼠標滑動對圖表進行拖拽和放大縮小操作。通過綁定滑動事件，我們可以獲取用戶拖拽和縮放的狀態信息，來進行相應的交互處理。

下面是一個簡單的示例代碼：

myChart.on('dataZoom', function (params) {
  // 獲取滑塊狀態信息
  var startValue = params.startValue;
  var endValue = params.endValue;
  console.log(startValue, endValue);
});

二、echarts桑基圖添加滾動條

當數據量比較大時，我們可以採用滾動條的方式來方便用戶對數據進行查看和選擇。在echarts桑基圖中，我們可以通過設置toolbox中的dataZoom來添加滾動條。

下面是一個簡單的示例代碼：

toolbox: {
  feature: {
    dataZoom: {
      yAxisIndex: 'none'
    },
    restore: {}
  }
},
dataZoom: [{
  type: 'slider',
  show: true,
  start: 0,
  end: 100
}]

三、echarts桑基圖為啥不顯示

如果echarts桑基圖沒有顯示出來，可能是由於以下幾個方面的原因：

1、沒有引入echarts相關的js文件；

2、沒有給echarts容器設置寬度和高度；

3、數據格式問題。

四、echarts桑基圖自定義走向

在echarts桑基圖中，節點的排列順序是固定的，從左往右依次排列。如果需要自定義走向，可以通過設置節點之間的關係來實現，如下所示：

data: [{
  name: 'A',
  value: 100,
  itemStyle: {
    color: '#ff0000'
  }
}, {
  name: 'B',
  value: 50,
  itemStyle: {
    color: '#00ff00'
  }
}, {
  name: 'C',
  value: 25,
  itemStyle: {
    color: '#0000ff'
  }
}],
links: [{
  source: 'A',
  target: 'B'
}, {
  source: 'B',
  target: 'C'
}, {
  source: 'C',
  target: 'A'
}]

五、echarts折線圖

除了桑基圖外，echarts還有其他類型的圖表可以使用，例如折線圖。下面是一個簡單的折線圖示例：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
};

六、echarts餅圖

還可以使用echarts餅圖來展示數據。下面是一個簡單的餅圖示例：

option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} 
{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 10,
    data: ['Direct', 'Mail', 'Affiliate', 'Video', 'Search']
  },
  series: [{
    name: '訪問來源',
    type: 'pie',
    radius: ['50%', '70%'],
    avoidLabelOverlap: false,
    label: {
      show: false,
      position: 'center'
    },
    emphasis: {
      label: {
        show: true,
        fontSize: '30',
        fontWeight: 'bold'
      }
    },
    labelLine: {
      show: false
    },
    data: [{
        value: 335,
        name: 'Direct'
      },
      {
        value: 310,
        name: 'Mail'
      },
      {
        value: 234,
        name: 'Affiliate'
      },
      {
        value: 135,
        name: 'Video'
      },
      {
        value: 1548,
        name: 'Search'
      }
    ]
  }]
};

七、echarts桑基圖怎麼做

最後，我們來看一看如何使用echarts來製作桑基圖。下面是一個簡單的示例：

option = {
  tooltip: {
    trigger: 'item',
    formatter: "{a} 
{b}: {c} ({d}%)"
  },
  series: [{
    name: '訪問來源',
    type: 'sankey',
    layout: 'none',
    data: [{
        name: 'A'
      },
      {
        name: 'B'
      },
      {
        name: 'C'
      },
      {
        name: 'D'
      }
    ],
    links: [{
        source: 'A',
        target: 'B',
        value: 10
      },
      {
        source: 'B',
        target: 'C',
        value: 15
      },
      {
        source: 'C',
        target: 'D',
        value: 20
      }
    ],
    itemStyle: {
      normal: {
        borderWidth: 1,
        borderColor: '#aaa'
      }
    },
    lineStyle: {
      normal: {
        curveness: 0.5
      }
    }
  }]
};

八、echarts桑基圖設置中間距離

在echarts桑基圖中，我們可以通過設置nodeGap來調整節點之間的距離。值越小，距離越近。

series: [{
  name: '訪問來源',
  type: 'sankey',
  nodeGap: 20, // 設置節點之間的距離
  // ...
}]

九、echarts桑基圖左右間隔設置

在echarts桑基圖中，我們可以通過設置left和right來調整圖表左右的間隔，如下所示：

grid: {
  left: '10%',
  right: '10%',
  // ...
},
series: [{
  name: '訪問來源',
  type: 'sankey',
  // ...
}]

十、echarts桑基圖tooltip選取

在echarts桑基圖中，可以通過設置tooltip的formatter來定製提示框內容。下面是一個例子：

tooltip: {
  trigger: 'item',
  formatter: function (params) {
    if (params.value) {
      return params.name + ' : ' + params.value;
    } else {
      return params.name;
    }
  }
}