百度ECHARTS 饼图使用心得 处理data属性
做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的.
今天来说说我使用echarts的饼图的心得.
先给大家看一下简单地效果图:(鼠标移动到1.0时)
使用echarts,可以去官网 http://echarts.baidu.com/下载完整源码或者定制自己需要的模块.
使用起来很简单,首先先引用js源文件,再在js中初始化即可:
<script src="/js/echarts.js"></script>
<div id="main" style="width: 100%;height:600px;overflow: visible"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));//声明一个ehcarts对象
var option = {
title : {//显示标题
text: 'BossApp版本信息',
x:'left',
textStyle: {
fontSize: '20',
color:'#333',
fontWeight: 'normal'
}
},
tooltip: {//鼠标移到模块上时,弹出框的内容
trigger: 'item',
//formatter: "{a} <br/>{b}: {c} ({d}%)"
//formatter: "{a} <br/>{b}"
formatter: function (obj) {
return obj.name.content
}
},
//legend: {
// orient: 'vertical',
// show:true,
// align: 'left',
// data:["1.0","2.0","3.0","4.0","5.0","6.0"]
//},
series: [
{
name:'版本信息',
type:'pie',
//selectedMode: 'single',
radius: ['50%', '75%'],
avoidLabelOverlap: false,
label: {
normal: {
formatter: function (obj) {
return obj.name.title
},
show: true,
position: 'inner',//文字显示位置,如上图中的1.0,1.1字样
textStyle: {
fontSize: '14',
fontWeight: 'normal'
}
},
emphasis: {
//show: true,
position: 'inner',
textStyle: {
fontSize: '14',
fontWeight: 'normal'
}
}
},
color:['#4fb8e3','#898989','#898989','#898989','#898989','#898989'],
labelLine: {
normal: {
show: true
}
},
data:[
//{value:335, name:'1.0版本',selected:true},
{value:335, name:{
title:versionInfo[5].version,
content:versionInfo[5].html
}},
{value:310, name:{
title:versionInfo[4].version,
content:versionInfo[4].html
}},
{value:234, name:{
title:versionInfo[3].version,
content:versionInfo[3].html
}},
{value:135, name:{
title:versionInfo[2].version,
content:versionInfo[2].html
}},
{value:200, name:{
title:versionInfo[1].version,
content:versionInfo[1].html
}},
{value:200, name:{
title:versionInfo[0].version,
content:versionInfo[0].html
}}
]
}
]
};
</script>
myChart.setOption(option);//配置生成的echarts,canvas的界面与有option决定 注意option的data这个属性.在官方文档上,都是写的data:[{value:100,name:ricky},{value:101,name:ricky1},.......], 然后tooltip默认的显示内容就为data里面的name属性.上面的例子中,versionInfo是一个变量,通过访问后台接口获取的一个对象.versionInfo有version与html这两个属性,假如你需要将versionInfo的html属性显示在tooltip中.怎么办呢? 我试过直接指定name:versionInfo.html.但是没有用.经过几次实验,发现将name当成一个对象进行处理,再设置tooltip的formatter,
formatter: function (obj) {
return obj.name.content
}
这样搞定了,但由于此时legend的data与series的data不一致,所以无法展示出下图的效果
百度ECHARTS 饼图使用心得 处理data属性的更多相关文章
- WPF仿百度Echarts人口迁移图
GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...
- 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应
1.前言 百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了.今天呢.主要是跟小白讲一下 ...
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
- 微信小说分销系统设计之使用百度Echarts地图统计功能统计微信粉丝地域分布情况
/** 转载请保留博客园原地址以及版权声明,请勿恶意修改,本博客中的内容均属于技术交流,请勿用于商业用途,谢谢配合 * 作者:杨浩瑞 QQ:1420213383 独立博客:http://www. ...
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...
- ECharts饼图试玩
处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...
- echarts中的option.legend.data has not been defined.
1.错误描述 2.错误原因 var map = function(mapData){ require( [ 'echarts', 'echarts/chart/map' ], function (ec ...
- 百度echarts使用--y轴label数字太长难以全部显示
问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就 ...
- mark 百度Echarts统计图表
mark http://git.oschina.net/seeyoui/kensite_cms/blob/master/src/main/java/com/seeyoui/kensite/framew ...
随机推荐
- 解决Mac下GDB提示签名错误
http://blog.csdn.net/powerlly/article/details/30323015
- stl 存放对象析构问题
vector内数据使用结构体的话是深拷贝,vector内的数据会拷贝一份保存,vector内数据不会丢失.如果vector内数据是指针的话是进行浅拷贝,数据超出作用域后会自动析构,vector内所指向 ...
- 在一般处理文件中访问Session需要添加IRequiresSessionState(转载)
原文:http://blog.csdn.net/cdsnaspnet/article/details/5695625s 通常我们经常,通过session判定用户是否登录.还有一些临时的.重要的数据也尝 ...
- 【原】JS正则表达式里的控制符
正则表达式易于使用而又让人费解,乍一看上去,就像是一行行的乱码,但是它的功能确实又不容小觑.今天整理正则时,纠正了自己的一个误解. 先缕一缕: 正则表达式的两种声明方式: 字面量.构造器 (RegEx ...
- wamp密码设置
WAMP安装好后,mysql密码是为空的,那么要如何修改呢?其实很简单,通过几条指令就行了,下面我就一步步来操作. 首先,通过WAMP打开mysql控制台. 提示输入密码,因为现在是空,所以直接按回车 ...
- 从零开始搭建Docker Swarm集群
从零开始搭建Docker Swarm集群 检查节点Docker配置 1. 打开Docker配置文件(示例是centos 7)vim /etc/sysconfig/docker2. 添加-H tcp:/ ...
- scala学习心得3
在scala中可以定义函数字面量参数,定义方式如下:
- Android菜鸟成长记5-ADB和sqllite
Android开发环境中,ADB是我们进行Android开发经常要用的调试工具,它的使用当然是我们Android开发者必须要掌握的. ADB概述 Android Debug Bridge,Androi ...
- Selenium2+python自动化2-pip降级selenium3.0
selenium版本安装后启动Firefox出现异常:'geckodriver' executable needs to be in PATH selenium默默的升级到了3.0,然而网上的教程都是 ...
- linux运维笔记——常用命令详解diff
1.diff 你可以把diff看成是linux上的文件比对工具 例子文件内容: [root@localhost disks]# cat test1.txt a b c d [root@localhos ...