echarts 桑基图添加标志线问题

最近做一个项目，要求在桑基演化图的基础上添加“时间线”，由于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的大小设置为0showSymbol: false, // 不显示symbolineStyle: {  //很重要，不显示折线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’,
。。。
}
]

echarts 桑基图添加标志线问题相关推荐

Echarts桑基图sankey点击高亮显示
Echarts桑基图sankey点击高亮显示 2022-02-21更新: 点击某一项将与其有关联的所有父项目和子项目全部高亮显示,并降低其他无关项目透明度,再次点击则恢复原有状态: 在线DEMO查看 ...
echarts 桑基图
使用echarts的桑基图时发现一个问题: 当一个流转状态的值比较大时且覆盖了其它的流转状态,那么这时鼠标移到这些值小的流转状态,tooltip提示出来的仍是那个大的流转状态,也就是选不中这些小的状态 ...
Echarts桑基图的排列顺序
首先我们来说几个关于echarts的参数配置项 layoutIterations,布局的迭代次数.官方的解释如下: 这个不配合图来看,还真有点懵. 意思就是,如果 layoutIterations=0 ...
js实现echarts桑基图缩放与拖动
需求:解决节点数据较小时,桑基图文字重叠问题. 由于echarts的dataZoom工具仅适用于直角坐标系,考虑通过改变画布大小与位置实现效果: 1.缩放 this.chartBox:画布外层容器, ...
echarts 桑基图sankey
是一种特殊的流图(可以看作是有向无环图)它主要用来表示原材料.能量等如何从最初形式经过中间过程的加工或转化达到最终状态1.配置datadata: [{name: 'node1',value, 节点的值 ...
桑基图（Echarts）——自定义风格
桑基图绘制--使用Echarts 桑基图(Sankey diagram),即桑基能量分流图,也叫桑基能量平衡图.它是一种特定类型的流程图,图中延伸的分支的宽度对应数据流量的大小,通常应用于能源.材料成 ...
【Python 】绘制惊艳的桑基图
很多时候,我们需要一种必须可视化数据如何在实体之间流动的情况.例如,以居民如何从一个国家迁移到另一个国家为例.这里演示了有多少居民从英格兰迁移到北爱尔兰.苏格兰和威尔士. 从这个桑基图 (Sanke ...
mysql 图形插件_ECharts绘图解决方案——流动关系图（桑基图）
| 导语基于实际业务场景使用ECharts的经验,总结一些通用的解决方案. 应用场景用流动关系图来映射品牌之间的有效换机数量,从而帮助运营对手机品牌的行情做分析和预测.图形说明一期:图形中间为分 ...
数据治理 Python桑基图处理表关系
数据治理 Python桑基图处理表关系需求随着hive库表越来越多,调度出问题后,排查时间越来越长.计划通过桑基图以及血缘图谱解决,当前先用桑基图页面顶一段时间.后期做成web服务,如果有可能,尽 ...

echarts 桑基图添加标志线问题

echarts 桑基图添加标志线问题相关推荐

最新文章

热门文章

echarts 桑基图 添加标志线问题

echarts 桑基图 添加标志线问题相关推荐

最新文章

热门文章

echarts 桑基图添加标志线问题

echarts 桑基图添加标志线问题相关推荐