您的位置:

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