<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="lib/simpleRequire.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
</head>
<body>
<style>
html,
body,
#main {
width: 100%;
height: 100%;
}
</style>
<button id="toggleBtn">toggle type</button>
<div id="main">
<div>
<script>
require([
'echarts',
], function (echarts) {
var chart = echarts.init(document.getElementById('main'));
const getOptions = (colorType = 'target') =>
({
series: {
type: 'sankey',
data: [
{
name: 'a'
},
{
name: 'b',
itemStyle: {
color: 'red'
}
}
],
links: [
{
source: 'a',
target: 'b',
value: 5,
lineStyle: {
color: 'target'
},
emphasis: {
lineStyle: {
color: colorType,
}
}
},
]
}
})
chart.setOption(getOptions());
let i = 1;
const colorTypes = ['target', 'source', 'gradient'];
window.toggleBtn.onclick = () => {
const a = (i++) % 3;
const type = colorTypes[a];
chart.setOption(getOptions(type));
}
});
</script>
</body>
</html>