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. 【Linux】CentOS7上解压zip需要安装uzip

    1.安装zip.unzip应用 yum install zip unzip 2.压缩和解压文件 以下命令均在/home目录下操作 cd /home #进入/home目录 a.把/home目录下面的my ...

  2. java数据库学习

    //编写db类/* a加载驱动 驱动类要全路径 包名+类名 suround with try/catch * b设置参数url user pwd * c.连接数据库(import 'Connectio ...

  3. SSO单点登录入门

    1,SSO简介 SSO(Single Sign-On,单点登录)是身份管理中的一部分.SSO 的一种较为通俗的定义是:SSO 是指访问同一服务器不同应用中的受保护资源的同一用户,只需要登录一次,即通过 ...

  4. jquery源码解析:jQuery延迟对象Deferred(工具方法)详解2

    请接着上一课继续看. $.Deferred()方法中,有两个对象,一个是deferred对象,一个是promise对象. promise对象有以下几个方法:state,always,then,prom ...

  5. dbproxy-main函数

    main主函数 /home/id/lua.lua/home/id/lua-c/lua.lua/home/id/lua-c/metatable.lua/home/id/lua-c/1.lua int m ...

  6. 906 AlvinZH的奇幻猜想----整数乘积(背包DP大作战O)

    906 AlvinZH的奇幻猜想----整数乘积 思路 难题.动态规划. 将数字串按字符串输入,处理起来更方便些. dp[i][j]:表示str[0~i]中插入j个乘号时的乘积最大值.状态转移方程为: ...

  7. ubuntu 报错 libcublas.so.8.0

    在qt程序中使用yolo时报错: ./conjugateGradientPrecond: error while loading shared libraries: libcublas.so.8.0: ...

  8. GitHub访问下载太慢解决办法

    原因 为什么慢?github的CDN被某墙屏了. 解决方法 绕过dns解析,在本地直接绑定host,该方法也可加速其他因为CDN被屏蔽导致访问慢的网站. 实现 在本地host文件中添加映射,步骤如下: ...

  9. 为什么我会选择走 Java 这条路?

    阅读本文大概需要 2.8 分钟.   作者:黄小斜 文章来源:微信公众号[程序员江湖] 最近有一些小伙伴问我,为什么当初选择走Java这条路,为什么不做C++.前端之类的方向呢,另外还有一些声音:研究 ...

  10. java学习基础部分

    JVM虚拟机的位置: 垃圾回收在java程序运行过程中自动进行,程序员无法精准控制和干预. Java程序还会出现内存泄漏和内存溢出. Jre = jvm+java se标准类库 Jdk = jre + ...