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. OCP认证052考试最新考试题库和答案整理-33

    33.Where Is backup metadata stored for use by Recovery Manager (RMAN)? A) In the control file B) In ...

  2. dict字典;dict的操作

    一.字典: 1. 字典 dict 用{}来表示 键值对数据 {key:value} 唯一性 键   都必须是可哈希的 不可变的数据类型就可以当做字典中的键 值   没有任何限制 1.1  字典的创建: ...

  3. [ActionScript 3.0] 创建倒影

    package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Display ...

  4. node.js的总结-可以应付bat的社招面试

    什么是NodeJS Node.js采用模块化结构,按照CommonJS规范定义和使用模块.模块与文件是一一对应关系,即加载一个模块,实际上就是加载对应的一个模块文件. JS是脚本语言,脚本语言都需要一 ...

  5. Objective-C适用C数学函数 <math.h>

    在实际工作中有些程序不可避免的需要使用数学函数进行计算,比如地图程序的地理坐标到地图坐标的变换.Objective-C做为ANSI C的扩展,使用C标准库头文件<math.h>中定义的数学 ...

  6. Corn表达式

    CronTrigger CronTriggers往往比SimpleTrigger更有用,如果您需要基于日历的概念,而非SimpleTrigger完全指定的时间间隔,复发的发射工作的时间表.CronTr ...

  7. Linux crond任务调度

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

  8. Log中关于start meeting在zVideoApp和zVideoUI中的流程可以搜索的几个字符串

    [31356:36164:04-29/17:53:38.164:INFO:SBConfUI.cpp(940)] CSBConfUI::OnConfStatusChanged(CONF_STATUS) ...

  9. print高亮显示

    显示颜色格式:\033[显示方式;字体色;背景色m......[\033[0m] ------------------------------------------- --------------- ...

  10. 知了课堂 Python Flask零基础 笔记整理

    目录 起步 安装Python2.7: Python虚拟环境介绍与安装: pip安装flask: 认识url: URL详解 web服务器和应用服务器以及web应用框架: Flask 第一个flask程序 ...