echarts 桑基图 添加标志线问题

最新推荐文章于 2024-01-17 16:43:23 发布
最新推荐文章于 2024-01-17 16:43:23 发布
阅读量548 收藏
点赞数
文章标签： json html5 javascript echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huazi99/article/details/128921411
版权
该项目旨在将时间线与桑基图结合，以增强数据展示的维度。首先创建基础桑基图，然后通过调整ECharts的配置项，如nodeGap和nodeWidth，设置图形样式。接着添加折线图，主要通过markLine标记时间线，隐藏x轴和y轴的大部分元素，只保留必要的标记线。最后，将桑基图和折线图在同一个图表实例中进行系列合并，实现两种图形的叠加展示。
摘要由CSDN通过智能技术生成

最近做一个项目，要求在桑基演化图的基础上添加“时间线”，由于echart桑基图中没有该参数，所以需要两种图形叠加实现。
1、绘制基础桑基图
product.json

{"nodes": [
      {"name": "Total"},
      {"name": "Environment"},
      {"name": "Land use"},
      {"name": "Cocoa butter (Organic)"},
      {"name": "Cocoa mass (Organic)"},
      {"name": "Hazelnuts (Organic)"},
      {"name": "Cane sugar (Organic)"},
      {"name": "Vegetables (Organic)"},
      {"name": "Climate change"},
      {"name": "Harmful substances"},
      {"name": "Water use"},
      {"name": "Resource depletion"},
      {"name": "Refrigeration"},
      {"name": "Packaging"},
      {"name": "Human rights"},
      {"name": "Child labour"},
      {"name": "Coconut oil (Organic)"},
      {"name": "Forced labour"},
      {"name": "Health safety"},
      {"name": "Access to water"},
      {"name": "Freedom of association"},
      {"name": "Access to land"},
      {"name": "Sufficient wage"},
      {"name": "Equal rights migrants"},
      {"name": "Discrimination"},
      {"name": "Working hours"}
   ],
   "links": [
      {"source": "Total", "target": "Environment", "value": 0.342284047256003},
      {"source": "Environment", "target": "Land use", "value": 0.32322870366987},
      {"source": "Land use", "target": "Cocoa butter (Organic)", "value": 0.177682517071359},
      {"source": "Land use", "target": "Cocoa mass (Organic)", "value": 0.137241325342711},
      {"source": "Land use", "target": "Hazelnuts (Organic)", "value": 0.00433076373512774},
      {"source": "Land use", "target": "Cane sugar (Organic)", "value": 0.00296956039863467},
      {"source": "Land use", "target": "Vegetables (Organic)", "value": 0.00100453712203756},
      {"source": "Environment", "target": "Climate change", "value": 0.0112886157414413},
      {"source": "Climate change", "target": "Cocoa butter (Organic)", "value": 0.00676852971933996},
      {"source": "Climate change", "target": "Cocoa mass (Organic)", "value": 0.00394686874786743},
      {"source": "Climate change", "target": "Cane sugar (Organic)", "value": 0.000315972058711838},
      {"source": "Climate change", "target": "Hazelnuts (Organic)", "value": 0.000218969462265292},
      {"source": "Climate change", "target": "Vegetables (Organic)", "value": 3.82757532567656e-05},
      {"source": "Environment", "target": "Harmful substances", "value": 0.00604275542495656},
      {"source": "Harmful substances", "target": "Cocoa mass (Organic)", "value": 0.0055125989240741},
      {"source": "Harmful substances", "target": "Cocoa butter (Organic)", "value": 0.000330017607892127},
      {"source": "Harmful substances", "target": "Cane sugar (Organic)", "value": 0.000200138892990337},
      {"source": "Harmful substances", "target": "Hazelnuts (Organic)", "value": 0},
      {"source": "Harmful substances", "target": "Vegetables (Organic)", "value": 0},
      {"source": "Environment", "target": "Water use", "value": 0.00148345269044703},
      {"source": "Water use", "target": "Cocoa butter (Organic)", "value": 0.00135309891304186},
      {"source": "Water use", "target": "Cocoa mass (Organic)", "value": 0.000105714137908639},
      {"source": "Water use", "target": "Hazelnuts (Organic)", "value": 1.33452642581887e-05},
      {"source": "Water use", "target": "Cane sugar (Organic)", "value": 8.78074837009238e-06},
      {"source": "Water use", "target": "Vegetables (Organic)", "value": 2.5136268682477e-06},
      {"source": "Environment", "target": "Resource depletion", "value": 0.000240519729288764},
      {"source": "Resource depletion", "target": "Cane sugar (Organic)", "value": 0.000226237279345084},
      {"source": "Resource depletion", "target": "Vegetables (Organic)", "value": 1.42824499436793e-05},
      {"source": "Resource depletion", "target": "Hazelnuts (Organic)", "value": 0},
      {"source": "Resource depletion", "target": "Cocoa mass (Organic)", "value": 0},
      {"source": "Resource depletion", "target": "Cocoa butter (Organic)", "value": 0},
      {"source": "Environment", "target": "Refrigeration", "value": 0},
      {"source": "Environment", "target": "Packaging", "value": 0},
      {"source": "Total", "target": "Human rights", "value": 0.307574096993239},
      {"source": "Human rights", "target": "Child labour", "value": 0.0410641202645833},
      {"source": "Child labour", "target": "Hazelnuts (Organic)", "value": 0.0105339381639722},
      {"source": "Child labour", "target": "Cocoa mass (Organic)", "value": 0.0105},
      {"source": "Child labour", "target": "Cocoa butter (Organic)", "value": 0.0087294420777},
      {"source": "Child labour", "target": "Coconut oil (Organic)", "value": 0.00474399974233333},
      {"source": "Child labour", "target": "Cane sugar (Organic)", "value": 0.00388226450884445},
      {"source": "Child labour", "target": "Vegetables (Organic)", "value": 0.00267447577173333},
      {"source": "Human rights", "target": "Forced labour", "value": 0.0365458590642445},
      {"source": "Forced labour", "target": "Hazelnuts (Organic)", "value": 0.0114913076376389},
      {"source": "Forced labour", "target": "Cocoa butter (Organic)", "value": 0.0081134807347},
      {"source": "Forced labour", "target": "Cocoa mass (Organic)", "value": 0.00765230236575},
      {"source": "Forced labour", "target": "Cane sugar (Organic)", "value": 0.004},
      {"source": "Forced labour", "target": "Vegetables (Organic)", "value": 0.00296668823626667},
      {"source": "Forced labour", "target": "Coconut oil (Organic)", "value": 0.00232208008988889},
      {"source": "Human rights", "target": "Health safety", "value": 0.0345435327843611},
      {"source": "Health safety", "target": "Hazelnuts (Organic)", "value": 0.0121419536385},
      {"source": "Health safety", "target": "Cocoa mass (Organic)", "value": 0.00766772850678333},
      {"source": "Health safety", "target": "Cocoa butter (Organic)", "value": 0.0056245892061},
      {"source": "Health safety", "target": "Coconut oil (Organic)", "value": 0.00361616847688889},
      {"source": "Health safety", "target": "Cane sugar (Organic)", "value": 0.00277374682533333},
      {"source": "Health safety", "target": "Vegetables (Organic)", "value": 0.00271934613075556},
      {"source": "Human rights", "target": "Access to water", "value": 0.0340206659360667},
      {"source": "Access to water", "target": "Cocoa mass (Organic)", "value": 0.0105},
      {"source": "Access to water", "target": "Cocoa butter (Organic)", "value": 0.0089274160792},
      {"source": "Access to water", "target": "Hazelnuts (Organic)", "value": 0.0054148022845},
      {"source": "Access to water", "target": "Cane sugar (Organic)", "value": 0.00333938149786667},
      {"source": "Access to water", "target": "Vegetables (Organic)", "value": 0.00314663377488889},
      {"source": "Access to water", "target": "Coconut oil (Organic)", "value": 0.00269243229961111},
      {"source": "Human rights", "target": "Freedom of association", "value": 0.0320571523941667},
      {"source": "Freedom of association", "target": "Hazelnuts (Organic)", "value": 0.0132312483463611},
      {"source": "Freedom of association", "target": "Cocoa butter (Organic)", "value": 0.0077695200707},
      {"source": "Freedom of association", "target": "Cocoa mass (Organic)", "value": 0.00510606573995},
      {"source": "Freedom of association", "target": "Vegetables (Organic)", "value": 0.00354321156324444},
      {"source": "Freedom of association", "target": "Cane sugar (Organic)", "value": 0.00240710667391111},
      {"source": "Freedom of association", "target": "Coconut oil (Organic)", "value": 0},
      {"source": "Human rights", "target": "Access to land", "value": 0.0315022209894056},
      {"source": "Access to land", "target": "Hazelnuts (Organic)", "value": 0.00964970063322223},
      {"source": "Access to land", "target": "Cocoa mass (Organic)", "value": 0.00938530207965},
      {"source": "Access to land", "target": "Cocoa butter (Organic)", "value": 0.0060110791848},
      {"source": "Access to land", "target": "Cane sugar (Organic)", "value": 0.00380818314608889},
      {"source": "Access to land", "target": "Vegetables (Organic)", "value": 0.00264795594564445},
      {"source": "Access to land", "target": "Coconut oil (Organic)", "value": 0},
      {"source": "Human rights", "target": "Sufficient wage", "value": 0.0287776757227333},
      {"source": "Sufficient wage", "target": "Cocoa mass (Organic)", "value": 0.00883512456493333},
      {"source": "Sufficient wage", "target": "Cocoa butter (Organic)", "value": 0.0078343367268},
      {"source": "Sufficient wage", "target": "Coconut oil (Organic)", "value": 0.00347879026511111},
      {"source": "Sufficient wage", "target": "Hazelnuts (Organic)", "value": 0.00316254211388889},
      {"source": "Sufficient wage", "target": "Vegetables (Organic)", "value": 0.00281013722808889},
      {"source": "Sufficient wage", "target": "Cane sugar (Organic)", "value": 0.00265674482391111},
      {"source": "Human rights", "target": "Equal rights migrants", "value" : 0.0271146645119444},
      {"source": "Equal rights migrants", "target": "Cocoa butter (Organic)", "value": 0.0071042315061},
      {"source": "Equal rights migrants", "target": "Cocoa mass (Organic)", "value": 0.00636673210005},
      {"source": "Equal rights migrants", "target": "Hazelnuts (Organic)", "value": 0.00601459775836111},
      {"source": "Equal rights migrants", "target": "Coconut oil (Organic)", "value": 0.00429185583138889},
      {"source": "Equal rights migrants", "target": "Cane sugar (Organic)", "value": 0.00182647471915556},
      {"source": "Equal rights migrants", "target": "Vegetables (Organic)", "value": 0.00151077259688889},
      {"source": "Human rights", "target": "Discrimination", "value": 0.0211217763359833},
      {"source": "Discrimination", "target": "Cocoa mass (Organic)", "value": 0.00609671700306667},
      {"source": "Discrimination", "target": "Cocoa butter (Organic)", "value": 0.0047738806325},
      {"source": "Discrimination", "target": "Coconut oil (Organic)", "value": 0.00368119084494444},
      {"source": "Discrimination", "target": "Vegetables (Organic)", "value": 0.00286009813604444},
      {"source": "Discrimination", "target": "Cane sugar (Organic)", "value": 0.00283706180951111},
      {"source": "Discrimination", "target": "Hazelnuts (Organic)", "value": 0.000872827909916666},
      {"source": "Human rights", "target": "Working hours", "value": 0.02082642898975},
      {"source": "Working hours", "target": "Hazelnuts (Organic)", "value": 0.0107216773848333},
      {"source": "Working hours", "target": "Coconut oil (Organic)", "value": 0.00359009052944444},
      {"source": "Working hours", "target": "Vegetables (Organic)", "value": 0.00212300379075556},
      {"source": "Working hours", "target": "Cocoa butter (Organic)", "value": 0.0018518584356},
      {"source": "Working hours", "target": "Cocoa mass (Organic)", "value": 0.00158227069058333},
      {"source": "Working hours", "target": "Cane sugar (Organic)", "value": 0.000957528158533333}
   ]}

echarts js代码

先导入jquery和echarts库
<script src="jquery-1.8.2.js"></script>
<script src="echarts.js"></script>
创建DOM
<div id="main"  style="width: 600px;height:400px;"></div>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    myChart.showLoading();
    $.get('product.json', function (data) {
        myChart.hideLoading();
        myChart.setOption(
                (option = {
                    title: {
                        text: 'Sankey Diagram'
                    },
                                   
                    series: [
                        {
                            type: 'sankey',
                            data: data.nodes,
                            links: data.links,
                            emphasis: {
                                focus: 'adjacency'
                            },
                            levels: [
                                {
                                    depth: 0,
                                    itemStyle: {
                                        color: '#fbb4ae'
                                    },
                                    lineStyle: {
                                        color: 'source',
                                        opacity: 0.6
                                    }
                                },
                                {
                                    depth: 1,
                                    itemStyle: {
                                        color: '#b3cde3'
                                    },
                                    lineStyle: {
                                        color: 'source',
                                        opacity: 0.6
                                    }
                                },
                                {
                                    depth: 2,
                                    itemStyle: {
                                        color: '#ccebc5'
                                    },
                                    lineStyle: {
                                        color: 'source',
                                        opacity: 0.6
                                    }
                                },
                                {
                                    depth: 3,
                                    itemStyle: {
                                        color: '#decbe4'
                                    },
                                    lineStyle: {
                                        color: 'source',
                                        opacity: 0.6
                                    }
                                }
                            ],
                            lineStyle: {
                                curveness: 0.5
                            }
                        }
                    ]
                })
        );
    });
    option && myChart.setOption(option);

运行结果：
在这里插入图片描述
2、设置桑基图参数–添加到上面代码
在type: ‘sankey’,下设置：
type: ‘sankey’,
nodeGap:10, 设置每行元素的间隙
nodeWidth:30, 设置每个levels 深度的宽度
zlevel:10, 多个图形叠加，层级设置，值高，在上面
right: “5%”, 图形与可视化边框距离，可以left top bottom

3、绘制折线图，只保留markline

//设置x、y轴隐藏坐标、刻度等
 xAxis: {
        type: 'category',
       axisLine: { //关键设置，不显示X轴线条
              show: false },
       axisTick: { //关键设置，坐标轴刻度也不显示
              show: false},
       show:false
        },
yAxis: {
      type: 'value',
	  axisLine: {show:false},
      axisTick: {show:false},
      splitLine:{show:false},
      show:false
         },
//设置 折线图 图形范围大小
  grid:{
     top:"5%",
     left:"5%",
     right:"5%",
      bottom:"0",
  },
 series: [
         {
          type: 'line',
          symbolSize: 0, // 设置symbol的大小设置为0
          showSymbol: false, // 不显示symbo
          lineStyle: {  //很重要，不显示折线
                    color: '#fff',
                    width: 0
           },
          //时间标注线
           markLine: {
                               symbol:"none",
                                label:{
                                    // show:true,
                                    position:"start",
                                    distance:1,
                                    color:"black",
                                    fontFamily:'sans-serif',
                                    fontSize:16,
                                },
                                lineStyle: {
                                    color: "rgba(103, 96, 96, 1)",
                                    width: 1.5,
                                    type: "dashed"
                                },
                                data: [
                                    [
                                        {
                                            name: '时间线1',                                            
                                            x: "5%",
                                            y: "5%"
                                        },
                                        {
                                            x: "5%",
                                            y: "100%",
                                        }
                                    ],
                                    [
                                        {
                                            name: '时间线2',                                         
                                            x: "35%",
                                            y: "5%"
                                        },
                                        {
                                            x: "35%",
                                            y: "100%",
                                        }
                                    ],
                                   。。。。。

                                ],
                            },

4、桑基图与折线图合并
series: [
{
type: ‘line’,
。。。。}，
{
type: ‘sankey’,
。。。
}
]
在这里插入图片描述

huazi99
关注
echarts：绘制每个单元格的标记线
z_5126的博客
09-07 238
用echarts绘制每个单元格的标记线，而非整个图表的标记线。
echarts标记线的样式_echarts 自定义 markPoint 的 symbol 样式
weixin_29369017的博客
12-23 2456
两种自定义标记在 echarts 中 markPoint 的样式内置了 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’ 几种，如果这些都不太符合需要就必须自定义我们需要的样式。自定义标记的图形有两种方式：1. 通过 ‘image://url’ 设置为图片，其中 URL 为图片的链接，或者 dataURI。2....
vue echarts 添加自定义标线
style_L_的博客
01-09 700
vue echarts 添加自定义标线
ECharts 标记线
qq_41997807的博客
04-15 1053
series: [ { name: '邮件营销', type: 'line', stack: '总量1', yAxisIndex: 1, data: [0, 10,20...
echarts的标记线和标记点
励志要成为it大佬的博客
04-03 1万+
markPoint: 标记点---------------------------markLine：标记线 看了好几天还是不太理解markPoint和markLine的作用， 昨晚看视频终于有点理解了， 比如在一个折线图形当中我们经常看到最高和最低点都会有个标记，在echarts当中markPoint就是来标记最高和最低点的，  而有的图表中会有个平均值得虚线，markLine就是用来表示平局值的...
极致呈现系列之：Echarts桑基图的流动旋律
九仞山的专栏
06-22 669
详细介绍了桑基图的特性、使用场景和应用方法
echarts桑基图示例代码留存
无名小仙男的博客
04-13 390
echarts桑基图展示label，代码示例
echarts 显示顺序_ECharts系列：桑基图的使用
weixin_39954569的博客
12-20 6106
桑基图本章介绍 ECharts 系列的桑基图(series[i]-sankey)。我们也称桑基图为桑基能量平衡图，具有特殊类型的流程图，它主要用来表示原材料、能量等如何从初始形式经过中间过程的加工、转化到达最终形式。以下是使用桑基图的一个实例，您可以参考它。示例：桑基图可视编码桑基图将原数据中的每个节点(node)编码成一个小矩形，不同的节点尽量用不同的颜色展示，小矩形旁边的 label 编码的是...
桑基图（Echarts）——自定义风格
佯佯DESIGNER
03-14 2万+
借助echarts开源库，介绍如何自定义桑基图
echarts(JavaScript)做桑基图
机器学习、数据挖掘
05-15 4302
在分析工作中需要做流量分发，桑基图可以很好的展示流量分发的过程，数据展示如下图 code如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Sankey&lt;/title&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge&
在Echarts图中给坐标轴加一个标识线markLine
11-20
Echart3数据可视化视图 给坐标轴加一个标识线markLine 当X轴不是数值时，而是一个类型数据，如年份，公司名，企业名，这时Echarts图就不是从X轴起始位置开始的，所以我们就要给X轴加一个虚拟的值’0’，在markLine中也是在赋值起始位置X轴值时，放置虚拟数据，并且设置一个boundaryGap: 0,可以让坐标轴与刻度之间空白变为0，这时标示线就从X轴起始位置开始了，详细属性可以去Echarts官网查看。 这里还要说一句在设置markLine下面data值时{x:”,//代表的是容器内x的值，y:”,容器内y的值}，如果要设置在坐标轴内的标示线，就要设置xAxis和yAxis
echarts 标记线markLine的使用
逆风优雅的博客
08-04 1万+
效果图： 在某个值处添加一条分割线。markLine写在 serise中。
echarts的markLine 图表标线使用
最新发布
weixin_63681863的博客
01-17 5189
官网介绍。
echarts(sankey)桑基图
uuai
09-22 2205
echarts(sankey)桑基图 api使用
echarts标记线的样式_ECharts提示框组件指示器的线条样式
weixin_35835030的博客
12-23 1845
tooltip.axisPointer.lineStyle | Object设置 ECharts 提示框组件指示器的线条样式，axisPointer.type为'line'时有效。tooltip.axisPointer.lineStyle.color | Color[ default: #555 ]设置提示框组件指示器线的颜色。颜色可以使用 RGB 表示，比如'rgb(12...
echarts双y轴对齐
wfly blog
08-04 1529
var colors = [’#5470C6’, ‘#91CC75’, ‘#EE6666’]; option = { color: colors, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, legend: { data: ['蒸发量', '降水量', '平均温度'] }, xAxis: [ { type: 'category',
echarts 图表 设置柱状图，并将数据区域缩放20-40区间
qq_46011557的博客
03-22 6567
一、echarts是什么？ 一个纯JavaScript图表库。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进...
深入理解echarts的markline标注线
热门推荐
sunshineboysy的博客
11-30 2万+
在移动端需求中，经常遇到echarts折线图需要在折线图的末尾节点添加标注文字，进行显示，是的用户能更加显眼的看到数据分析情况，这就需要使用echarts的markline进行实现：直接贴代码 option ={ xAxis: { splitLine: { show: false, }, axisLabel: { color: '#fff', rotate: '35
echarts桑基图
07-28
ECharts提供了丰富的图表类型和灵活的配置选项，其中包括了桑基图（Sankey Diagram）。 桑基图是一种流程图，用于展示多个节点之间的关系和流动情况。它通过节点和连线的组合来展示数据的流向和转化情况。在桑基图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值