实验环境
Echarts 3.5.3
问题
引入一个Echarts标准饼图以后,图表可以正常显示,而tooltip无法显示,┑( ̄Д  ̄)┍ 一下子感觉low了好多,页面就像死掉了一样
就像这样,鼠标放在上面却没显示tooltip。。。
上代码:
<div class="col-lg-6">
<div class="content-panel">
<h4><i class="fa fa-angle-right"></i> 新老顾客概览</h4>
<div class="panel-body text-center">
<canvas id="test2" height="300" width="400"></canvas>
<!--<div id="test2" style="width: 490px;height:305px;"></div>-->
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('test2'));
// 指定图表的配置项和数据
var option = {
title: {
text: '新老顾客比例',
subtext: '',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['新顾客', '老顾客']
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: true
},
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{
value: 205,
name: '新顾客'
},
{
value: 610,
name: '老顾客'
}
],
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
var colorList = ['#22DDDD', '#F0805A'];
return colorList[params.dataIndex]
},
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
</div>
</div>
原因
因为我设置的容器都是canvas,所以导致里面的tooltip的容器不会显示;
解决
把canvas换成div就可以了,至于里面的一些样式啊宽高啊自己调下就ok了
d==( ̄▽ ̄*)b 牛逼