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饼图配置模板的更多相关文章

  1. echarts饼图配置

    js引用和配置div <div id="container" style="height: 100%"></div> <scrip ...

  2. Echarts饼图显示模板

    图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示.可选为: 'line'(折线图) | 'bar'(柱状图) | 'scatter'(散点图) | 'k'(K线图) 'pie'(饼图) | ...

  3. ECharts饼图试玩

    处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...

  4. Vue Echarts 饼图设置默认选中一个

    Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...

  5. hibernate.cfg.xml文件的配置模板和不同数据库的配置參数

    (1)hibernate.cfg.xml文件的配置模板 <?xml version="1.0" encoding="UTF-8"?> <!DO ...

  6. 将数据动态加载到Echarts饼图中

    需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...

  7. linux下iptables配置模板

    linux下iptables配置模板 # Flush all policy iptables -F iptables -X iptables -Z iptables -t nat -F iptable ...

  8. arcgis api 3.x for js 入门开发系列二十一气泡窗口信息动态配置模板

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. nginx配置模板问题404

    nginx配置模板问题 一.nginx主配置文件如下 cat /etc/nginx/nginx.conf user nginx; worker_processes ; #error_log logs/ ...

随机推荐

  1. Linux常用服务器搭建

    1.Linux常用服务器构建-ftp服务器 ftp服务器 FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”. 用于Internet上的控制文件 ...

  2. gc笔记2

    空间分配担保:在发生MinorGC之前,虚拟机会检查老年代最大连续可用是否大于新生代所有对象的空间,如果这个条件成立,则minorgc时安全的

  3. 移动端web开发的注意点大总结

    对于手机网站建设,总结了如下几点注意: 1. 安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作 ...

  4. #Java学习之路——基础阶段(第五篇)

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  5. Kali学习笔记44:SQLMAP

    SQLMAP漏洞检测技术: 1.基于布尔的盲注检测:' and 1=1   'and 1=2等 2.基于时间的盲注检测:' and (select * from (select(sleep(20))) ...

  6. [Swift]LeetCode306. 累加数 | Additive Number

    Additive number is a string whose digits can form additive sequence. A valid additive sequence shoul ...

  7. VSTO学习(三)——创建Excel解决方案

    四.创建Excel外接程序介绍完了Excel对象模型之后,我们就可以利用这些对象来对Excel文档进行操作了,下面就创建一个简单的Excel外接程序的.首先我们模拟一个需求,大多说软件在使用时都会弹出 ...

  8. spark对elasticsearch增删查改

    增 新建一个 dataframe ,插入到索引 _index/_type ,直接调用 saveToEs ,让 _id 为自己设定的 id: import org.elasticsearch.spark ...

  9. 如何创建测试程序调试nginx数据结构

    如何创建测试程序调试nginx数据结构 由于在学习nginx的过程中遇到很多数据结构,往往我都想写一个程序来跑一下,看下到底返回什么.最开始想的方法是使用nginx make 完成之后的.o文件,做L ...

  10. nginx系列 3 nginx.conf介绍(1)

    一. nginx.conf 文件结构概述 在第一篇中讲到nginx的安装,安装完后,默认的nginx服务器配置文件都存在安装目录conf中,主配置文件名为nginx.conf.下面是我linux系统安 ...