echarts饼图配置模板
var option = {
title:{
text:'完成人构成分析--申报',
//标题的样式
textSytle:{
//颜色
color : '#FF0000',
//粗细
// fontWeight : 'bold',
//大小
// fontSize : 29
},
//标题顶部距离样式
top:5,
},
//提示框组件
tooltip : {
//触发类型:item主要在散点图、饼图中;axis主要在柱状图折线图中。
trigger: 'item',
//提示框浮层内容格式器,两种模式:字符串模板、回调函数模板。
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
//工具框
toolbox: {
//悬停在小图标的文本提示
showTitle:true,
//工具种类
feature: {
//数据视图
dataView: {
show: true,
//只读设置
readOnly: true, lang:['','关闭'],
//小图标的文本提示,配合showTitle使用
title:"数据视图",
//html格式转化
optionToContent: function(opt) {
var series = opt.series;
var table = '<table style="width:50%;"><thead style="font-weight:bold;">'
+ '<tr>';
for(var i = 0, l = series.length; i < l; i++){
table += '<td>'+series[i].name+'</td><td></td>';
}
table += '</tr></thead><tbody>';
for (var i = 0, l = series.length; i < l; i++) {
console.log(series[i].data);
for(var j = 0;j<series[i].data.length;j++){
table += '<tr><td>' + series[i].data[j].name + '</td>'
+ '<td>' + series[i].data[j].value + '</td></tr>';
}
table += '</tr>';
}
table += '</tbody></table>';
return table;
}, },
//重置
restore: {show: true},
//图片下载
saveAsImage: {show: true}, }
},
//图例
legend: { //图例类型,普通,还有可滚动型
type: 'plain',
//布局朝向,竖排,还有横排
orient: 'vertical',
//图例相对于容器左侧距离
left:5,
//图例相对于容器上侧距离
top: 40,
//图例数据列表,格式为数组:["本科", "博士研究生", "硕士研究生", "专科"]
data: legendData },
series:[
{
//数据项名称,可用于提示框显示。
name:'申报数据',
//图表类型
type:'pie',
//图形大小比例,按半径计算。
radius:'60%',
//图表数据,格式为json数组:[{"name":"本科","value":29},{"name":"博士研究生","value":8},{"name":"硕士研究生","value":2},{"name":"专科","value":4}]
data:jsonData,
//图形样式
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
] };
echarts饼图配置模板的更多相关文章
- echarts饼图配置
js引用和配置div <div id="container" style="height: 100%"></div> <scrip ...
- Echarts饼图显示模板
图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示.可选为: 'line'(折线图) | 'bar'(柱状图) | 'scatter'(散点图) | 'k'(K线图) 'pie'(饼图) | ...
- ECharts饼图试玩
处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
- hibernate.cfg.xml文件的配置模板和不同数据库的配置參数
(1)hibernate.cfg.xml文件的配置模板 <?xml version="1.0" encoding="UTF-8"?> <!DO ...
- 将数据动态加载到Echarts饼图中
需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...
- linux下iptables配置模板
linux下iptables配置模板 # Flush all policy iptables -F iptables -X iptables -Z iptables -t nat -F iptable ...
- arcgis api 3.x for js 入门开发系列二十一气泡窗口信息动态配置模板
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- nginx配置模板问题404
nginx配置模板问题 一.nginx主配置文件如下 cat /etc/nginx/nginx.conf user nginx; worker_processes ; #error_log logs/ ...
随机推荐
- C++之几个最常
1.同类对象间的数据共享——静态成员 静态数据成员声明静态数据成员要采用关键字static:类静态数据成员的定义和初始化定义:static 数据类型 成员名:初始化:数据类型 类名::静态数据成员名= ...
- 两行 CSS 代码实现图片任意颜色赋色技术
很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术,当时惊为天人,感慨还可以这样玩,私底下也曾多次想过有没有其他方法可以实现,又或者不仅仅局限于 PNG 图片. mix-b ...
- 分享我在 vue 项目中关于 api 请求的一些实现及项目框架
本文主要简单分享以下四点 如何使用 axios 如何隔离配置 如何模拟数据 分享自己的项目框架 本文主要目的为以下三点 希望能够帮到一些人 希望能够得到一些建议 奉上一个使用Vue的模板框架 我只是把 ...
- 感恩节活动中奖名单 i春秋喊你领礼物啦!
上周我们组织的感恩节活动,得到了小伙伴们积极踊跃的回复,看到你们这么真诚的留言,我们也是满满的感动,在众多留言中,我们选出了八位幸运用户,让我们一起恭喜获奖的小伙伴们吧. 恭喜以上8位幸运的小伙伴,我 ...
- Kali学习笔记41:SQL手工注入(3)
前两篇文章都是基于目标系统允许union,order by语句 并且可以读取infomation_schema元数据库 如果遇到的是安全方面做得很好的应用,进行了权限限制,那么我们有什么办法呢? 猜测 ...
- [Swift]LeetCode537. 复数乘法 | Complex Number Multiplication
Given two strings representing two complex numbers. You need to return a string representing their m ...
- controller分支实现前台显示弹框同时转发
controller分支实现前台显示弹框,前台不需要进行什么操作, 前台请求后台的分支即可. controller层(标红的地方是(alert('账号或密码错误!请重新输入!!!!') ...
- 认识Junit基本注解@Before、@After、@Test、@BeforeClass、@AfterClass(转)
一.unit中集中基本注解,是必须掌握的. @BeforeClass – 表示在类中的任意public static void方法执行之前执行 @AfterClass – 表示在类中的任意public ...
- directshow、 Emgucv入门
本示例主要测试了directshow.Emgucv的视频流采集功能,其中Emgucv还实现了人脸的识别.示例源码下载 一.directshow的介绍 实现原理:directshow可以将摄像头的数据流 ...
- Vim 复制粘帖格式错乱问题的解决办法
有时候,复制文本(尤其是代码)到 Vim,会出现格式错乱的问题.看样子,应该是自动缩进惹得祸.本文不去深究原因,直接给出解决方法. 1. paste 模式 运行如下命令,进入 paste 模式: :s ...