<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- https://echarts.baidu.com/option.html#tooltip.formatter -->
<!-- https://blog.csdn.net/qq_36604180/article/details/79046396 -->
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
//評價標簽情況柱狀圖
var options = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
},
// formatter: "{value} ssss" ,
formatter: function (params) {
var res = params.name+'<br/>';
var res='<div><p>指標：'+params[0].seriesName +'</p></div>' ;
// res+='<p>'+'金額'+':'+params[0].data+'</p>';
res+='<p>'+'劑量'+':'+params[1].data+'</p>';
// res+='<p>'+'劑量'+':'+params[2].data+'</p>';
// res+='<p>'+'劑量'+':'+params[3].data+'</p>';
return res;
// {
// var res = datas[0].name + '<br/>', val;
// for(var i = 0, length = datas.length; i < length; i++) {
// val = (datas[i].value*100) + '%';
// res += datas[i].seriesName + '：' + val + '<br/>';
// }
// return res;
// }
}
},
legend: {
data:['好評率']
},
grid: {
left: '3%',
right: '4%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['住戶1','住戶2','住戶3','住戶4','住戶5','住戶6','住戶7','住戶8','住戶9']
}
],
yAxis : [
{
type : 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: function(value){
if(value==0)
{
return value;
}else {
return value*100+'%';
}
}
}
}
],
dataZoom : [{
show : true,
realtime : false,
start : 0,
end :50
}],
series : [
{
name:'好評率',
type:'bar',
barWidth:'35',
data:[0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9],
itemStyle:{
normal:{
color:'#ff7000'
}
},
label:{
normal:{
show:true,
position:'insideTop'
},
}
},
{
name:'好評xxx率',
type:'bar',
barWidth:'35',
data:[0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9],
itemStyle:{
normal:{
color:'#ff7000'
}
},
label:{
normal:{
show:true,
position:'insideTop'
},
}
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(options);
</script>
</body>
</html>
echart自定義tooltip
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。