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饼图样式的更多相关文章

  1. ECharts饼图试玩

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

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

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

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

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

  4. echarts饼图配置

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

  5. ECharts饼图制作分析

    ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11 ...

  6. ECharts饼图自定义

    [本文出自天外归云的博客园] 实现: 1.饼块可点击(点击饼块跳转到百度) 2.饼块自定义标签显示(显示个数.占比) 3.自定义标签连接线样式(虚线) 前端php代码如下: <!DOCTYPE ...

  7. Echarts饼图绘制

    实现效果: html代码: <div id="chartBody1" style="width:120%;height:28vh;"> <di ...

  8. echarts饼图

    1.添加点击事件并跳转到不同的页面 // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist/' ...

  9. 百度ECHARTS 饼图使用心得 处理data属性

    做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...

随机推荐

  1. JAVA笔记6__抽象类/接口/多态/instanceof关键字、父类设计法则

    /** * 抽象类:很多具有相同特征和行为的类可以抽象为一个抽象类 * 1.抽象类可以没有抽象方法,有抽象方法的类必须是抽象类 * 2.非抽象类继承抽象类必须实现抽象方法[可以是空实现] * 3.抽象 ...

  2. 当src获取不到图片,onerror可指定一张默认的图片

    <img src="img/789.png" onerror="javascript:this.src='img/123.png';" alt=" ...

  3. ssl 原理和建立连接过程

    ssl ("Secure Sockets Layer")加密原理 和https的关系https = http + ssl ssl 位置: SSL握手 证书主要作用是在SSL握手中, ...

  4. js点击事件 登录

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. [python]Appium+python +pytest 实现APP自动化,基于安卓

    1.安卓环境搭建 &关于app自动化,个人觉得安装过程比较复杂,脚本难度实现和web自动化差不多封装关键字即可,因此,下面会写安装.启动APP以及过程中遇到的一些坑(这一篇偏向解释给个人) & ...

  6. ubuntu 首次登陆设置root密码

    用过ubuntu的人都知道,ubuntu默认root密码是随机的,即每次开机都有一个新的root密码.我们可以在终端输入命令sudo passwd,然后输入当前用户的密码   给root用户设置密码 ...

  7. [luogu7078]贪吃蛇

    结论:若$a_{n}-a_{1}\ge a_{2}$,那么一定会吃掉 证明:分类讨论,若$a_{n-1}$也吃掉了$a_{2}$,就说明$a_{n-1}$之后不会被吃掉,而$a_{n-1}-a_{2} ...

  8. JDK源码阅读(7):ConcurrentHashMap类阅读笔记

    ConcurrentHashMap public class ConcurrentHashMap<K,V> extends AbstractMap<K,V> implement ...

  9. 【Cloud Computing】Hadoop环境安装、基本命令及MapReduce字数统计程序

    [Cloud Computing]Hadoop环境安装.基本命令及MapReduce字数统计程序 1.虚拟机准备 1.1 模板机器配置 1.1.1 主机配置 IP地址:在学校校园网Wifi下连接下 V ...

  10. 7.3 自定义镜像-运行nginx与tomcat并结合PV/PVC/NFS以实现动静分离示例

    1.在NFS SERVER上为tomcat.nginx创建相关目录 NFS SERVER的部署配置参考:https://www.cnblogs.com/yanql/p/15410308.html 1. ...