1.Echarts饼状图详解及示例
前言说明:因工作需要用到图统计数据作为展示,用到echarts3(你也可以考虑用阿里的AntV:http://antv.alipay.com/zh-cn/index.html,或者国外的一些图形插件)。发现官方文档只有根据属性查询,没有根据图的类型文档说明。以下重点写的例子主要是官方示例中没有提及,但是我工作中用到了的示例。
1. 准备工作
到echarts3(注意是echarts3,不是echarts2)官方下载echarts或者自定义下载,下载地址:http://echarts.baidu.com/download.html
2. 示例及说明
代码中未说明的配置项,可以在官网查看。还有很多配置属性,示例中并没有使用到。配置文档地址:http://echarts.baidu.com/option.html#tooltip.trigger
eg1效果图:
eg1:基本示例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.js"></script><div id="pie1" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart1 = echarts.init(document.getElementById('pie1'));option1 = {title:{text:'按类型统计',top:'bottom',left:'center',textStyle:{fontSize: 14,fontWeight: '',color: '#333'},},//标题tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)",/*formatter:function(val){ //让series 中的文字进行换行console.log(val);//查看val属性,可根据里边属性自定义内容var content = var['name'];return content;//返回可以含有html中标签},*/ //自定义鼠标悬浮交互信息提示,鼠标放在饼状图上时触发事件},//提示框,鼠标悬浮交互时的信息提示legend: {show: false,orient: 'vertical',x: 'left',data: ['50%-学生', '25%-老师', '25%-家长']},//图例属性,以饼状图为例,用来说明饼状图每个扇区,data与下边series中data相匹配graphic:{type:'text',left:'center',top:'center',style:{text:'用户统计\n'+'100', //使用“+”可以使每行文字居中textAlign:'center',font:'italic bolder 16px cursive',fill:'#000',width:30,height:30}},//此例饼状图为圆环中心文字显示属性,这是一个原生图形元素组件,功能很多series: [{name:'用户统计',//tooltip提示框中显示内容type: 'pie',//图形类型,如饼状图,柱状图等radius: ['35%', '65%'],//饼图的半径,数组的第一项是内半径,第二项是外半径。支持百分比,本例设置成环形图。具体可以看文档或改变其值试一试//roseType:'area',是否显示成南丁格尔图,默认falseitemStyle: {normal:{label:{show:true,textStyle:{color:'#3c4858',fontSize:"18"},formatter:function(val){ //让series 中的文字进行换行return val.name.split("-").join("\n");}},//饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。可以与itemStyle属性同级,具体看文档labelLine:{show:true,lineStyle:{color:'#3c4858'}}//线条颜色},//基本样式emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色textColor:'#000'}//鼠标放在各个区域的样式},data: [{value: 50, name: '50%-学生'},{value: 25, name: '25%-老师'},{value: 25, name: '25%-家长'},],//数据,数据中其他属性,查阅文档color: ['#51CEC6','#FFB703','#5FA0FA'],//各个区域颜色},//数组中一个{}元素,一个图,以此可以做出环形图],//系列列表};myChart1.setOption(option1);</script>
</head>
</html>
eg2效果:
eg2:内嵌图及添加点击事件
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.js"></script><div id="pie1" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart1 = echarts.init(document.getElementById('pie1'));option1 = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},series: [{name:'学段分类统计',type: 'pie',radius: [0, '35%'],label: {normal: {position: 'inner'}},//扇形区域内显示文字data:[{value:25, name:'学生'},{value:35, name:'教师'},{value:45, name:'家长'}],color: ['#10EFE0','#EF42A4','#FF8F03']},{name:'角色分类统计',type: 'pie',radius: ['35%', '75%'],labelLine: {normal: {show: true,}},data:[{ value: 10, name: '学生(小学)' },{ value: 10, name: '学生(初中)' },{ value: 5, name: '学生(高中)' },{ value: 15, name: '教师(小学)' },{ value: 15, name: '教师(初中)' },{ value: 5, name: '教师(高中)' },{ value: 20, name: '家长(小学)' },{ value: 10, name: '家长(初中)' },{ value: 15, name: '家长(高中)' },],color:['#51CEC6','#6AE2D9','#96F5EF','#EF87C2','#F79DD0','#FFC8E7','#FFB703','#FFCD50','#FFE296']},],};myChart1.setOption(option1);//添加点击事件,可以点击每个区域,其中params为每个区相关属性,可以根据该属性写各种事件myChart1.on('click', function(params){console.log(params);});</script>
</head>
</html>
3. 未能实现的一些图
本人研究一段时间,发现饼状图有些功能未能实现。echarts3对分割后每一个扇区似乎没有再分割的属性了(如下图)。如果哪位大神研究出来了下图示例,还烦请发一个demo给我,谢谢,互相学习。邮箱:1071336724@qq.com
1.Echarts饼状图详解及示例相关推荐
- 去掉Echarts饼状图的引导线
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>五分钟 ...
- echarts饼状图的使用
echarts饼状图的使用 地址:https://echarts.apache.org/zh/index.html 第一步: 通过 npm 获取 echarts, npm install echart ...
- ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比 简单的实现可以参考: export default {data() {return {}},mounte ...
- echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
- echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题 设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...
- echarts饼状图设置label的交互效果,饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
- echarts 饼状图 java_SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网 获取Echarts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供 ...
- vue+elementui+echarts饼状图内部显示百分比
<!--饼状图--><div id="main" style="width: 400px;height: 350px;"></di ...
- Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
最新文章
- 尝试Java,从入门到Kotlin(上)
- R语言基于多字段(多数据列、multiple columns)对dataframe的行数据进行排序(Ordering rows)实战:使用R原生方法、data.table、dplyr等方案
- Android Custom View系列《圆形菜单一》
- fieldset在ie8下的margin\padding bug规避
- 20180716:开博宣言
- Scrapy框架的学习(12. scrapy中的模拟登陆,发送post请求模拟登陆)
- web业务系统权限控制
- The IP you're using to send email is not authorized
- TCP 协议的三次握手、四次分手
- matlab库存点仿真教程,基于MATLABSimulink库存系统建模与仿真.doc
- java sql 联表查询系统_Spring Hibernate JPA 联表查询 复杂查询(转)
- Navicat15 安装激活
- 最简单DIY基于Android系统的万能蓝牙设备智能遥控器
- iperf3多平台网速测速
- 系统架构师论文-论混合软件架构设计
- 纪年——记事本app
- autojs微信运动自动点赞
- php卡片式排版显示,卡片式设计思考
- 虚幻浏览器插件 加载透明网页
- html中移动端遮罩层,移动端微信分享弹出遮罩层js效果_蓝戒的博客