0
229
ViewsHow to show/design the data description in ECharts?
I have the sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.staticfile.org/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts',
textStyle: {
fontSize: 30,
color: 'red'
}
},
tooltip: {
trigger:'axis'
},
toolbox:{},
legend: {
data:['sale']
},
xAxis: {
data: ["A","B","C","Pants","Shoes","Shirt"]
},
yAxis: {},
series: [{
name: 'sales',
type: 'line',
data: [5, 20, 36, 10, 10, 20],
markPoint: {
data: [{ type: 'max', name: 'Max' },{ type: 'min', name: 'Min' }]},
}]
};
myChart.setOption(option);
</script>
</body>
</html>
I want to design the result： When the mouse clicks or the mouse passes over this data point, it can display the data description defined by myself. for example, if the mouse pass over the data points 'shoes', the charts will show a Dialog box with content 'This is shoes data, the sales of shoes is 10'
Thanks so much if anyone can give me some hints! Really thx for any suggestions
·
Juan Pablo Isaza
Answer question