echarts画环形图
alarmManage(){
let drawLine = echarts.init(document.getElementById('data-alarmManage-table-wrap'));
let option = null;
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
y: '24%',
x: '40%',
itemHeight: 14,
itemWidth: 14,
textStyle: {
color: '#BBF6FF',
fontSize: 14
},
itemGap: 20,
data:['直接访问','邮件营销','联盟广告','','视频广告','搜索引擎','产品运营','','风控评估','算法投入']
},
color:["pink",'red','green','yellow','gray','purple','blue','wheat'],
icon: "rect",
series: [
{
center: ['25%','50%'],
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:148, name:'搜索引擎'},
{value:310, name:'产品运营'},
{value:234, name:'风控评估'},
{value:135, name:'算法投入'},
]
}
]
};
if (option && typeof option === "object") {
drawLine.setOption(option);
}
},

echarts画环形图的更多相关文章
- echarts实现环形图
前端框架使用的angular,使用echarts实现环形图 1. item.component.html <div id="box1" class="pie&quo ...
- iOS 画环形图
由于新项目的的需求,需要画环形图,由于以前都没接触过这一类(我是菜鸟),去cocochina山找到了一个案例,个人觉得还可以,分享一下 github 地址https://github.com/zhou ...
- 利用echarts自定义环形图
一.代码 app.title = '通讯盒各版本用户占比'; option = { backgroundColor: '#0f0f31', title: { show:true, x:"le ...
- 修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
- vue 结合 Echarts 实现半开环形图
Echarts 实现半开环形图 1.先看看实现的图 2.HTML部分 创建id 是 chart 的div标签. <div class="content-item"> & ...
- echarts白色实心环形图(空心饼图)的编写
// 数据接入机构统计let myDom = document.getElementById('myChart');let myWidth = myDom.offsetWidth - 5; // 获取 ...
- WPF仿百度Echarts人口迁移图
GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...
- Vue中使用ECharts画散点图加均值线与阴影区域
[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...
- 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)
最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/exa ...
随机推荐
- 如何学习MySQL数据库管理员(OCP)认证(转)
如何学习MySQL数据库管理员(OCP)认证 转自: 甲骨文专家中,MySQL 5.6数据库管理员( OCP )证明您的安装和优化MySQL服务器,设置复制和安全,执行数据库备份及性能优化和保护M ...
- 数据库 三范式 BCFN
# 三范式 范式 设计关系数据库时,遵从不同的规范要求,设计出合理的关系型数据库,这些不同的规范要求被称为不同的范式,各种范式呈递次规范,越高的范式数据库冗余越小. 目前关系数据库有六种范式:第一 ...
- 深入IO 想学必看!受益匪浅哦~
一:IO流概述 IO流简单来说就是Input和Output流,IO流主要是用来处理设备之间的数据传输,Java对于数据的操作都是通过流实现,而Java用于操作流的对象都在IO包中. 分类: 按操作数据 ...
- vue中的provide和inject
vue中的provide和inject:https://blog.csdn.net/viewyu12345/article/details/83011618
- Codeforces 1262E Arson In Berland Forest(二维前缀和+二维差分+二分)
题意是需要求最大的扩散时间,最后输出的是一开始的火源点,那么我们比较容易想到的是二分找最大值,但是我们在这满足这样的点的时候可以发现,在当前扩散时间k下,以这个点为中心的(2k+1)2的正方形块内必 ...
- RabbitMq学习5-路由(Routing)
一.路由(Routing) 在前面的教程中,我们实现了一个简单的日志系统.可以把日志消息广播给多个接收者. 本篇教程中我们打算新增一个功能——使得它能够只订阅消息的一个字集.例如,我们只需要把严重的错 ...
- 用yum快速搭建LAMP平台与虚拟域名配置
实验环境: [root@nmserver-7 html]# cat /etc/redhat-release CentOS release 7.3.1611 (AltArch) [root@nmserv ...
- 【React -- 9/100】 抽离顶部导航栏 - [组件复用]
今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX import React from " ...
- Android C# java 长连接框架
mina框架详解 Apache Mina Server 是一个网络通信应用框架,也就是说,它主要是对基于TCP/IP.UDP/IP协议栈的通信框架(当然,也可以提供JAVA 对象的序列化服务.虚拟机管 ...
- Redis持久化rdb&aof
Redis持久化rdb&aof 前言 持久化:即把数据存储于断电后不会丢失的设备中,通常是硬盘 常见的持久化方式: 主从:通过从服务器保持持久化,如mongoDB的replication se ...