I'm new to echarts so please forgive me if this is stupid newbie request. I'm trying to rotate whole chart just like in this example of Vega Edge Bundling Example. On the right corner there is a tool and one option is also "rotate". Example Image of Vega I would like to do the same thing (rotate whole graph) in echarts but I can't find a way to do it. If it is possible to do it please let me know how I can do it. Thank you for any reply!
1 Answer
It's not perfect but I tried.
I use function to change startAngle,I don't know why the rotation is delayed.
var option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
startAngle: 15,
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption(option);
function rotate() {
var Angle=document.getElementById("range").value;
myChart2.setOption({
series: [{
startAngle:Angle,
}]
});
}; <html lang="Zh-TW">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<label class="col-lg-3 control-label">rotate</label>
<div class="col-lg-6"><input type="range" class="form-control" min="0" max="360" value="10" oninput="rotate('range')" id="range"></div>
<div id="main2" style="width:100%;height:600px;"></div
</body>
</html>
