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;
    }
  }
}