@{
ViewBag.Title = "pie";
} <h2>pie</h2> <div id="main" style="width: 1000px;height:800px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'), 'shine', { width: }); option = {
tooltip: {
trigger: 'item',
//formatter: "{a} <br/>{b}: {c} ({d}%)"
formatter: function (params) {
var s = params.name + '<br />';
for (var i = ; i < option.series.length; i++) {
s += option.series[i].name + ': ' + option.series[i].data[params.dataIndex].value + '(' + (option.series[i].data[params.dataIndex].value / jehj[i] * ).toFixed() + '%)<br />';
}
return s;
}
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
},
series: [
{
name: '2016年',
type: 'pie',
selectedMode: 'single',
radius: [, '30%'], label: {
normal: {
position: 'inner',
formatter: "{b}({d}%)"
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: , name: '直达' },
{ value: , name: '邮件营销' },
{ value: , name: '联盟广告' },
{ value: , name: '视频广告' },
{ value: , name: '百度' },
{ value: , name: '谷歌' },
{ value: , name: '必应' },
{ value: , name: '其他' }
]
},
{
name: '2017年',
type: 'pie',
radius: ['40%', '55%'], data: [
{ value: , name: '直达' },
{ value: , name: '邮件营销' },
{ value: , name: '联盟广告' },
{ value: , name: '视频广告' },
{ value: , name: '百度' },
{ value: , name: '谷歌' },
{ value: , name: '必应' },
{ value: , name: '其他' }
],
label: {
normal: {
//position: 'inner',
formatter: "{b}: {c} ({d}%)"
}
}
}
]
};
var jehj = new Array();
for (var i = ; i < option.series.length; i++) {
var hj = ;
for (var j = ; j < option.series[i].data.length; j++) {
hj += option.series[i].data[j].value;
}
jehj[i] = hj;
}
myChart.setOption(option); </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. CSS只改变背景透明度,不改变子元素透明度

    一般情况下,我们可以使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即使对子元素重新定义也没有用,例如: <div style="opacit ...

  2. 【Linux】VirtualBox安装ubuntu排错LowGraphic

    在Oracle的VirtualBox虚拟机上,安装Ubuntu后,提示了如下图这样的 错误 The system is running in low-graphics mode 在网上搜,有多种解答方 ...

  3. HDU 1251 统计难题 (裸的字典树)

    题目链接 Problem Description Ignatius最近遇到一个难题,老师交给他很多单词(只有小写字母组成,不会有重复的单词出现),现在老师要他统计出以某个字符串为前缀的单词数量(单词本 ...

  4. python初步学习-Python模块之 re

    re 正则表达式 python正则表达式在线检验网站 python re正则表达式语法 匹配字符 语法 解释 表达式 匹配实例 . 匹配任意除"\n"以外的任何字符 a.c abc ...

  5. Python练习-os模块练习-还算是那么回事儿

    # 编辑者:闫龙 # 小程序:根据用户输入选择可以完成以下功能: # 创建文件,如果路径不存在,创建文件夹后再创建文件 # 能够查看当前路径 # 在当前目录及其所有子目录下查找文件名包含指定字符串的文 ...

  6. 《区块链100问》第82集:应用类项目Golem

    Golem是第一个基于以太坊区块链打造的计算资源交易平台.通过区块链,Golem能链接全球的算力资源,从而实现计算能力的全球共享.应用所有者和个体用户(算力“请求方”)可以点对点地从其他用户处租用算力 ...

  7. 查看 CUDA cudnn 版本

    cuda 版本 cat /usr/local/cuda/version.txt cudnn 版本 cat /usr/local/cuda/include/cudnn.h | grep CUDNN_MA ...

  8. 2016.6.24——vector<vector<int>>【Binary Tree Level Order Traversal】

    Binary Tree Level Order Traversal 本题收获: 1.vector<vector<int>>的用法 vector<vector<int ...

  9. Redis简介——(一)

    1.关于关系型数据库和nosql数据库 关系型数据库是基于关系表的数据库,最终会将数据持久化到磁盘上,而nosql数据 库是基于特殊的结构,并将数据存储到内存的数据库.从性能上而言,nosql数据库 ...

  10. zookeeper zkClient api 使用

    操作步骤: 一.引入zkclient的jar包(maven方式) <dependency> <groupId>com.101tec</groupId> <ar ...