<!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=" 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>