Echarts图表中的tooltip无法显示
来源:互联网 发布:javascript 数组 push 编辑:程序博客网 时间:2024/06/05 17:19
实验环境
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 牛逼
1 0
- Echarts图表中的tooltip无法显示
- echarts tooltip显示图片
- echarts图表显示问题
- 使用echarts显示图表
- echarts显示图表
- 利用Echarts图表的tooltip在做一个图表
- echarts初次使用 显示图表
- 自定义Echarts地理分布图tooltip显示内容
- echarts 多个series图表的tooltip自定义
- echarts tooltip中的数据已0开头
- Highcharts图表无法显示
- 移动web 页面显示echarts图表
- echarts图表showLoading遮盖层显示问题
- WPF中使用Echarts显示图表
- Echarts图表数据动态单位显示
- Echarts图表中动态数据显示
- React Native使用百度Echarts显示图表
- Echarts字符云tooltip显示混乱问题的解决办法
- 关于R
- P2871 [USACO07DEC]手链Charm Bracelet
- 区块链(一)--Bitcoin、Ethereum、Hyperledger
- 带参数的宏定义(宏函数)
- 模拟实现进程调度——采用高优先数优先和先来服务算法
- Echarts图表中的tooltip无法显示
- (ssl2301)混合背包
- 三子棋的实现,完美篇终于修复了之前的BUG
- Linux 下UVC&V4L2技术简介(二)
- 文章标题
- PL/SQL 隐式游标
- 1026. 程序运行时间(15)
- 什么是cookie-曲奇
- 带参数的方法