var myChart = echarts.init(document.getElementById('myChart'));

option = {
title : {
text: '某站点用户访问来源',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直接访问','邮件营销']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
]
}
]
};

// 使用刚指定的配置项和数据显示图表。 
myChart.setOption(option);

title 配置主标题副标题居中,tooltip 配置提示框显示格式,legend 配置图例标记的位置样式,series 配置主体的数据,饼状图需要基本的 type、radius 、center、data 几项分别设置样式、半径、原点位置和数据。

自定义扇形区域颜色 :设置 option.color 的值即可,例如 color:[“red”,”green”]

扇形区域的角度太小,鼠标获取位置麻烦或指示不清楚:series 有一配置项 minAngle ,作用是配置最小显示角度,用于防止某个值过小导致扇区太小影响交互,取值范围(0 ~ 360)。

jquery echarts 饼状图的更多相关文章

  1. Echarts 饼状图自定义颜色

    今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码 $.ajax({ url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx&qu ...

  2. echarts 饼状图调节 label和labelLine的位置

    原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...

  3. canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  4. ECharts饼状图添加事件

    和柱状图添加事件没有区别,详情如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  5. echarts 饼状图

    说明:这是我做项目时自己写的小例子,里面有冗余的参数. 开发环境 vs2012 asp.net mvc4  c# 1.显示效果 2.HTML代码 <%@ Page Language=" ...

  6. vue+element+echarts饼状图+可折叠列表

    html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...

  7. echarts 饼状图 改变折线长度

    $(function (){ //ups部分 var myChart = echarts.init(document.getElementById('result')) var option = { ...

  8. Echarts饼状图

    <head> <meta charset="utf-8"> <title>ECharts</title> <script sr ...

  9. echarts饼状图位置设置

    series: { name: "流量占比分布", type: "pie", radius: ["40%", "60%" ...

随机推荐

  1. kali linux之Bdfproxy

    Bdfproxy(mitmproxy) 基于流量劫持动态注入shellcode(arp欺骗,dns欺骗,流氓ap) 步骤: 开启流量转发---------sysctl -w net.ipv4.ip_f ...

  2. JS延时器 定时器 暂停器 中断器

    // numberMillis 毫秒 function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() ...

  3. bzoj4241: 历史研究(回滚莫队)

    传送门 这是一个叫做回滚莫队的神奇玩意儿 是询问,而且不强制在线,就决定是你了莫队 如果是每次插入一个数是不是很简单? 然而悲剧的是我们莫队的时候不仅要插入数字还要删除数字 那么把它变成只插入不就行了 ...

  4. Excel的公式:锁定某个区域函数--OFFSET()

    OFFSET(标识位置,偏移的行数,偏移的列数,偏移后锁定的行数,偏移后锁定的列数) 打个比方解释:在xy轴上画一个矩形 标识位置:等同于原点; 偏移的行数:矩形的起始y轴坐标; 偏移的列数:矩形的起 ...

  5. screen新建窗口,环境变量跟原来不一致。

    昨天为了方便npm安装全局包,我把环境变量重新配置了. 然后,在项目中引用全局包没有出问题.但是后来我在screen里面引用全局包,报错说找不到. 使用#npm list -g命令 发现昨天的全局包都 ...

  6. 四大算法解决最短路径问题(Dijkstra+Bellman-ford+SPFA+Floyd)

    什么是最短路径问题? 简单来讲,就是用于计算一个节点到其他所有节点的最短路径. 单源最短路算法:已知起点,求到达其他点的最短路径. 常用算法:Dijkstra算法.Bellman-ford算法.SPF ...

  7. 除了ROS, 机器人定位导航还有其他方案吗?

    利用ROS进行机器人开发,我想大多数企业是想借助ROS实现机器人的导航.定位与路径规划,它的出现大大降低了机器人领域的开发门槛,开发者无需向前人一样走众多弯路,掌握多种知识才能开始实现机器人设计的梦想 ...

  8. PHP用curl远程下载图片

    function http_get_data($url){ $ch = curl_init (); curl_setopt ( $ch, CURLOPT_CUSTOMREQUEST, 'GET' ); ...

  9. editplus 编辑 php双击选中变量问题

    windows下,在很多地方双击鼠标左键可以选中一个连续的英文字符串. 在editplus 编辑器里可以双击选中一个变量,方便了编程,但是使用phptools(php.stx)增强语法插件后,在一个变 ...

  10. python全栈开发_day7_字符编码,以及文件的基本读取

    一:字符编码 1)什么是字符编码 将人能识别的字符等高级标识符与计算机所能识别的二进制01进行转化,这之间的交流需要一个媒介,进行两种标识符之间的转化. 字节的存储方式为八个二进制位 2)乱码 存放数 ...