echarts桑基图示例代码留存

最新推荐文章于 2024-06-07 21:39:25 发布

无名小仙男

最新推荐文章于 2024-06-07 21:39:25 发布

阅读量399

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/zxl8876/article/details/130135679

版权

本文通过代码示例详细介绍了如何使用Echarts实现桑基图，并展示了在数据量过大时如何进行截取显示的技巧。

摘要由CSDN通过智能技术生成

echarts桑基图展示label，代码示例

option = {
  series: {
    type: 'sankey',
    layout: 'none',
    data: [
    { name: '类别1', value: 100, compare: 0.2 },
    { name: '类别2', value: 200, compare: -0.1 },
    { name: '类别3', value: 150, compare: 0.3 },
    { name: '类别4', value: 120, compare: -0.2 }
  ],
    links: [
    { source: '类别1', target: '类别2', value: 50 },
    { source: '类别2', target: '类别3', value: 100 },
    { source: '类别3', target: '类别4', value: 80 }
  ],
    label: {
      show: true,
      formatter: function(params) {
        if (params.value > 0) {
          return params.name + '（金额：' + params.value + '）\n同比：' + params.data.compare;
        } else {
          return params.name;
        }
      }
    },
    itemStyle: {
      normal: {
        borderWidth: 1,
        bo