echarts饼图样式

1.中间标题字体大小不一致(可分为一个title一个graphic)
2.labelLine与饼图分离(两个饼图,其中一个显示一个隐藏)
function setmyChartJsgxzq(arr,date) {
// 基于准备好的dom,初始化echarts实例
myChartJsgxzq = echarts.init(document.getElementById('jsgxzq'));
// 指定图表的配置项和数据
var option = {
color: moreColor,
dataset: {
source: arr
},
xAxis: {
axisLine: {
show: false
}
},
yAxis: {
axisLine: {
show: false
}
},
series: [{
name : 'show',
type: 'pie',
radius: ['43%', '60%'],
seriesLayoutBy: 'row',
label: {
normal: {
show: false,
color:'#000000'
},
}
},
{
name: 'hidden',
radius: ['60%', '63%'],
type: 'pie',
seriesLayoutBy: 'row',
itemStyle: {
opacity: 0,
},
label: {
normal: {
show: true,
color:'#000000'
},
},
labelLine:{
normal: {
lineStyle: {
color: '#000000'
},
show: true
}
}
}
],
title: {
text: '行业更新周期',
x: 'center',
y: '44%',
textStyle: {
fontWeight: 'normal',
fontSize: 14
}
},
graphic:{
type:'text',
left:'center',
top:'54%',
style:{
text:date,
textAlign:'center',
fill:'#000',
width:30,
fontSize:18,
// height:60
}
}
};
// 使用刚指定的配置项和数据显示图表。
myChartJsgxzq.setOption(option);
}
注:arr的数据格式为二维数组
eg:
arr = [
['1-3年','4-6年','7-9年','10-12年'],
[10,20,30,40]
];
date = '5年';
echarts饼图样式的更多相关文章
- ECharts饼图试玩
处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...
- 将数据动态加载到Echarts饼图中
需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
- echarts饼图配置
js引用和配置div <div id="container" style="height: 100%"></div> <scrip ...
- ECharts饼图制作分析
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11 ...
- ECharts饼图自定义
[本文出自天外归云的博客园] 实现: 1.饼块可点击(点击饼块跳转到百度) 2.饼块自定义标签显示(显示个数.占比) 3.自定义标签连接线样式(虚线) 前端php代码如下: <!DOCTYPE ...
- Echarts饼图绘制
实现效果: html代码: <div id="chartBody1" style="width:120%;height:28vh;"> <di ...
- echarts饼图
1.添加点击事件并跳转到不同的页面 // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist/' ...
- 百度ECHARTS 饼图使用心得 处理data属性
做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...
随机推荐
- hdu 1080 Human Gene Functions(DP)
题意: 人类基因由A.C.G.T组成. 有一张5*5的基因表.每格有一个值,叫相似度.例:A-C:-3.意思是如果A和C配对, 则它俩的相似度是-3[P.S.:-和-没有相似度,即-和-不能配对] 现 ...
- AppScan 10安装使用
一.简介 AppScan是IBM的一款web安全扫描工具,具有利用爬虫技术进行网站安全渗透测试的能力,能够根据网站入口自动摸取网页链接进行安全扫描,提供了扫描.报告和修复建议等功能. appscan有 ...
- istio基础详解
1.Istio介绍? 官方文档:https://istio.io/docs/concepts/what-is-istio/ 中文官方文档:https://istio.io/zh/docs/concep ...
- Java8新特性Stream流应用示例
Java8新特性介绍 过滤集合 List<String> newList = list.stream().filter(item -> item != null).collect(C ...
- hive 权限排查
show grant role role_username id username
- FZU ICPC 2020 寒假训练 4 —— 模拟(一)
P1042 乒乓球 题目背景 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中11分制改革引起了很大的争议,有一部分球员因为无法适应新规则只能选择退役.华华 ...
- pycharm如何使用&python书写规范
目录 1.pycharm如何使用 2.python 书写规范 1.pycharm如何使用 #主题的选择 file >> settings >> Editor >> ...
- bat批处理命令及解释
相关原文链接 一.批处理概念 批处理文件:包含DOS命令的可编辑可执行文件 批处理:可以对某一对象批量操作的文件 二.批处理命令简介 命令1~10 1 echo 和 @ 回显命令 @ #关闭单行回显 ...
- [hdu7026]Might and Magic
(以下默认$A_{0},D_{0},P_{0},K_{0}$都为非负整数) 显然存活轮数$S=\lceil\frac{H_{0}}{C_{p}\max(A_{1}-D_{0},1)}\rceil$ ...
- [atAGC051D]C4
考虑将两次移动作为一个整体,两次移动的效果分为:$s-u$.$u-s$和原地不动 对于从$s$回到$s$路径,必然有前两种效果使用次数相同,假设都为$i$(枚举),那么原地不动的次数$j=\frac{ ...