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 ...
随机推荐
- 【Qt开发】事件循环与线程 二
事件循环与线程 二 Qt 线程类 Qt对线程的支持已经有很多年了(发布于2000年九月22日的Qt2.2引入了QThread类),Qt 4.0版本的release则对其所有所支持平台默认地是对多线程支 ...
- 利用coverage工具进行Python代码覆盖率测试
Coverage是一种用于统计Python代码覆盖率的工具,通过它可以检测测试代码对被测代码的覆盖率情况. Coverage安装 1.安装命令:pip install coverage 2.查看cov ...
- js if 判断的使用
!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
- SpringBoot中定时任务默认是串行执行 如何设置并行
SpringBoot项目中,定时任务默认是串行执行的,不论启动多少任务,都是一个执行完成,再执行下一个. 如何设置并行呢? @EnableAsync 和@Async 这两个注解来实现 ,具体如下: ...
- vue axios应用
编写小的demo应用axios异步请求. 效果图示: 功能: 用户在输入框中输入信息进行搜索,并搜索状态随之改变(四种状态). 项目目录: 代码: 1.index.html <!DOCTYPE ...
- [多校联考2019(Round 5 T1)] [ATCoder3912]Xor Tree(状压dp)
[多校联考2019(Round 5)] [ATCoder3912]Xor Tree(状压dp) 题面 给出一棵n个点的树,每条边有边权v,每次操作选中两个点,将这两个点之间的路径上的边权全部异或某个值 ...
- nginx重新编译安装upload模块
由于php处理上传会出现超时,并且显示上传进度官方php不支持nginx+php,所以决定让nginx自己处理上传,我本地环境是mac上已经安装过nginx1.8.0,安装方式为brew,所以需要重新 ...
- Java中的sort
Java中对集合排序有两种方式 Comparable和Comparator public static <T> void sort(List<T> list); 将集合中的数据 ...
- json与导入模块目录
import json """主要用于不同语言的数据公用 """ info = {"a":1,"b" ...
- 关于Windows 10上MarkdownPad2无法预览的解决办法
升级win10后,发现一直可以用的MarkdownPad2预览功能不可以用了.于是在网上搜索了一下,刚开始没有解决.不过现在可以了.现在把解决方案记录下来.Windows10上使用MarkdownPa ...