1. @{
  2. ViewBag.Title = "pie";
  3. }
  4.  
  5. <h2>pie</h2>
  6.  
  7. <div id="main" style="width: 1000px;height:800px;"></div>
  8. <script type="text/javascript">
  9. // 基于准备好的dom,初始化echarts实例
  10. var myChart = echarts.init(document.getElementById('main'), 'shine', { width: });
  11.  
  12. option = {
  13. tooltip: {
  14. trigger: 'item',
  15. //formatter: "{a} <br/>{b}: {c} ({d}%)"
  16. formatter: function (params) {
  17. var s = params.name + '<br />';
  18. for (var i = ; i < option.series.length; i++) {
  19. s += option.series[i].name + ': ' + option.series[i].data[params.dataIndex].value + '(' + (option.series[i].data[params.dataIndex].value / jehj[i] * ).toFixed() + '%)<br />';
  20. }
  21. return s;
  22. }
  23. },
  24. legend: {
  25. orient: 'vertical',
  26. x: 'left',
  27. data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
  28. },
  29. series: [
  30. {
  31. name: '2016年',
  32. type: 'pie',
  33. selectedMode: 'single',
  34. radius: [, '30%'],
  35.  
  36. label: {
  37. normal: {
  38. position: 'inner',
  39. formatter: "{b}({d}%)"
  40. }
  41. },
  42. labelLine: {
  43. normal: {
  44. show: false
  45. }
  46. },
  47. data: [
  48. { value: , name: '直达' },
  49. { value: , name: '邮件营销' },
  50. { value: , name: '联盟广告' },
  51. { value: , name: '视频广告' },
  52. { value: , name: '百度' },
  53. { value: , name: '谷歌' },
  54. { value: , name: '必应' },
  55. { value: , name: '其他' }
  56. ]
  57. },
  58. {
  59. name: '2017年',
  60. type: 'pie',
  61. radius: ['40%', '55%'],
  62.  
  63. data: [
  64. { value: , name: '直达' },
  65. { value: , name: '邮件营销' },
  66. { value: , name: '联盟广告' },
  67. { value: , name: '视频广告' },
  68. { value: , name: '百度' },
  69. { value: , name: '谷歌' },
  70. { value: , name: '必应' },
  71. { value: , name: '其他' }
  72. ],
  73. label: {
  74. normal: {
  75. //position: 'inner',
  76. formatter: "{b}: {c} ({d}%)"
  77. }
  78. }
  79. }
  80. ]
  81. };
  82. var jehj = new Array();
  83. for (var i = ; i < option.series.length; i++) {
  84. var hj = ;
  85. for (var j = ; j < option.series[i].data.length; j++) {
  86. hj += option.series[i].data[j].value;
  87. }
  88. jehj[i] = hj;
  89. }
  90. myChart.setOption(option);
  91.  
  92. </script>

饼图tooltip的更多相关文章

  1. Highcharts.js -纯javasctipt图表库初体验

    一.highcharts简介以及引入 highcharts作为免费提供给个人学习.个人网站和非商业用途使用的前端图表演示插件的确使用起来十分方便和轻便.在我最近完成一个需求的时候用到了它, 它的兼容性 ...

  2. echarts标准饼图解读(一)——提示框(tooltip)配置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HTML5 Canvas(实战:绘制饼图2 Tooltip)

    继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...

  4. highCharts 饼图动态加载

    饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath( ...

  5. Highcharts 饼图 文字颜色设置

    设置饼图对应的提示文字的颜色与饼图块状一样,demo如下: $(function () { $('#container').highcharts({ chart: { plotBackgroundCo ...

  6. JFreeChart 使用一 饼图之高级特性

    原文链接:http://www.cnblogs.com/jtmjx/archive/2013/04/23/jfreechart_advantage.html 本文主要讲解JFreeChart中饼图的一 ...

  7. 百度ECHARTS 饼图使用心得 处理data属性

    做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...

  8. 百度推出的echarts,制表折线图柱状图饼图等的超级工具(转)

    一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...

  9. echarts饼图--数据交互

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. Logistic Ordinal Regression

    sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...

  2. 服务器安全策略之《通过IP安全策略阻止某个IP访问的设置方法》

    现在我们在布署好了一个网站,发布到外网后就意味着将会接受来自四面八方的黑客攻击,这个情况很常见,我们的网站基本上每天都要接受成千上万次的攻击,有SQL注入的.有代码注入的.有CC攻击等等...而我作为 ...

  3. day17 包装类、日期类

    包装类 作用:1.丰富了基本数据类型只能存放值的问题,还提供了大量的方法或常量. 2.包装类充当了基本数据类型和引用数据类型转换的桥梁. 应用层面:包装类.String.基本数据类型的互相转换. 1. ...

  4. 【转】(总结)Nginx配置文件nginx.conf中文详解

    本文转载自:http://www.ha97.com/5194.html 定义Nginx运行的用户和用户组 user www www; nginx进程数,建议设置为等于CPU总核心数 worker_pr ...

  5. 二、Kafka基础实战:消费者和生产者实例

    一.Kafka消费者编程模型 1.分区消费模型 分区消费伪代码描述 main() 获取分区的size for index =0 to size create thread(or process) co ...

  6. undefined reference to 'pthread_create'问题解决 -- 转

    文章出处:http://blog.csdn.net/llqkk/article/details/2854558 由于是Linux新手,所以现在才开始接触线程编程,照着GUN/Linux编程指南中的一个 ...

  7. Linux服务-搭建NFS

    任务目标:二进制安装nfs,作为共享存储挂载在三台web的网站根目录下,在任意一台web上修改的结果,其余两台都可以看到 首先来安装NFS服务,NFS顾名思义,就是极品飞车,哦不!是网络文件服务的意思 ...

  8. 文件操作fstream

    c++文件操作详解 2009-04-16 20:46:35|  分类: C/C++|举报|字号 订阅 C++ 通过以下几个类支持文件的输入输出: ofstream: 写操作(输出)的文件类 (由ost ...

  9. 【比赛游记】THUWC2019酱油记

    往期回顾:THUSC2018酱油记 day 0 早上 7 点的动车,不知道是从哪儿到哪儿的(雾),只知道从福建到广东 233333 一个值得思考的问题:福建人会不会被广东人吃啊? 动车上玩空洞骑士,可 ...

  10. Oracle Certified Java Programmer 经典题目分析(二)

    ...接上篇 what is reserved(保留) words in java? A. run B. default C. implement D. import Java 关键字列表 (依字母排 ...