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. Lvs IP负载均衡技术

    Lvs集群的通用结构 Lvs集群采用IP负载均衡技术,属于IP层的交换(L4),具有很好的吞吐率.调度器分析客户端到服务器的IP报头信息,将请求均衡地转移到不同的服务器上执行,且调度器自动屏蔽掉服务器 ...

  2. LINUX主机通过域名访问网络失败

    故障现象: 用telnet IP+端口的方式测试正常,能够访问: 通过telnet域名+端口方式,提示:未知的名称或服务(Name or service not known). 测试百度的网络地址,p ...

  3. [AIR] AS3读取txt文档

    package { import flash.display.Sprite; import flash.events.Event; import flash.filesystem.File; impo ...

  4. python使用python-docx导出word

    #!/usr/bin/env python # -*- coding: utf-8 -*- ''' ''' from docx import Document from docx.shared imp ...

  5. 使用bluebird解决promise兼容性问题

    //引入promiseif(!Promise){ var Promise = require("bluebird"); // Configure Promise.config({ ...

  6. es查询,聚合、平均值、值范围、cardinality去重查询

    原文:https://blog.csdn.net/sxf_123456/article/details/78195829 普通查询 GET ana-apk/_search { "query& ...

  7. javascript 判断对象的内置类型

    判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法.在toString方法被调用时,会执行下面的操作步骤:1. 获取this对象的[[Class ...

  8. Linux crond任务调度

    crond 任务调度 原理图 crontab 进行定时任务的设置,.概述 任务调度:是指系统在某个时间执行的特定的命令或程序. 任务调度分类:1.系统工作:有些重要的工作必须周而复始地执行.如病毒扫描 ...

  9. 比较 GET 与 POST

    post比get安全 get请求方法向url添加数据  全部用POST不是十分合理,最好先把请求按功能和场景分下类, 对数据请求频繁,数据不敏感且数据量在普通浏览器最小限定的2k范围内,这样的情况使用 ...

  10. dcoker做私有仓库

    在官网上拉取私有仓库的镜像.(官网提供的镜像为:registry) docker  pull  registry 启动镜像,并且映射端口.(启动时加-p参数即可) docker -d  -p 5000 ...