饼图tooltip
@{
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的更多相关文章
- Highcharts.js -纯javasctipt图表库初体验
一.highcharts简介以及引入 highcharts作为免费提供给个人学习.个人网站和非商业用途使用的前端图表演示插件的确使用起来十分方便和轻便.在我最近完成一个需求的时候用到了它, 它的兼容性 ...
- echarts标准饼图解读(一)——提示框(tooltip)配置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5 Canvas(实战:绘制饼图2 Tooltip)
继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...
- highCharts 饼图动态加载
饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath( ...
- Highcharts 饼图 文字颜色设置
设置饼图对应的提示文字的颜色与饼图块状一样,demo如下: $(function () { $('#container').highcharts({ chart: { plotBackgroundCo ...
- JFreeChart 使用一 饼图之高级特性
原文链接:http://www.cnblogs.com/jtmjx/archive/2013/04/23/jfreechart_advantage.html 本文主要讲解JFreeChart中饼图的一 ...
- 百度ECHARTS 饼图使用心得 处理data属性
做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...
- 百度推出的echarts,制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
- echarts饼图--数据交互
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- day12 继承
设计原则:开闭原则:对于拓展open,对于修改close. 类与类的关系:1.is a(继承关系) 2.has a(组合关系) 继承的优点:1.代码的可重用性 2.父类的属性和方法用于子类 3.子类可 ...
- webapi框架搭建-安全机制(三)-简单的基于角色的权限控制
webapi框架搭建系列博客 上一篇已经完成了“身份验证”,如果只是想简单的实现基于角色的权限管理,我们基本上不用写代码,微软已经提供了authorize特性,直接用就行. Authorize特性的使 ...
- [HNOI 2013]切糕
COGS 2398. [HNOI 2013]切糕 http://www.cogs.pro/cogs/problem/problem.php?pid=2398 ★★★☆ 输入文件:nutcake.i ...
- 11 Facts about Data Science that you must know
11 Facts about Data Science that you must know Statistics, Machine Learning, Data Science, or Analyt ...
- 《设计模式》-原则六:迪米特法则(LoD)
啊哈哈哈哈,又到星期五了,真开心.回来吃完饭慌着去玩游戏,所以立马过来先完成今天的学习目标. 这个原则的命名好像是以某个人的名字命名的,算了我不去管这个了. 直接说说我学到的东西,这个迪米特法则又可以 ...
- EF记录统一添加创建,修改时间
public class BaseEntity { public DateTime? DateCreated { get; set; } public string UserCreated { get ...
- 【译】第七篇 Replication:合并复制-订阅
本篇文章是SQL Server Replication系列的第七篇,详细内容请参考原文. 订阅服务器就是复制发布项目的所有变更将传送到的服务器.每一个发布需要至少一个订阅,但是一个发布可以有多个订阅. ...
- javascript 中的类数组和数组
什么是类数组呢? 我们先来看一段代码: function fn() { console.dir(arguments); } fn(1,2,3,4,5,6,7,8,9,10); 这段代码的执行后,在 c ...
- $("节点名").html("字符串")和$("节点名").text("字符串")区别
1. 经过html方法: $(".js_info").html("~!`@#$%^& ";'<>\=/-!·#¥%…&*()—+|` ...
- 基于NIO的同步非阻塞编程完整案例,客户端发送请求,服务端获取数据并返回给客户端数据,客户端获取返回数据
这块还是挺复杂的,挺难理解,但是多练几遍,多看看研究研究其实也就那样,就是一个Selector轮询的过程,这里想要双向通信,客户端和服务端都需要一个Selector,并一直轮询, 直接贴代码: Ser ...