jquery echarts 饼状图
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 饼状图的更多相关文章
- Echarts 饼状图自定义颜色
今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码 $.ajax({ url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx&qu ...
- echarts 饼状图调节 label和labelLine的位置
原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...
- canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- ECharts饼状图添加事件
和柱状图添加事件没有区别,详情如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...
- echarts 饼状图
说明:这是我做项目时自己写的小例子,里面有冗余的参数. 开发环境 vs2012 asp.net mvc4 c# 1.显示效果 2.HTML代码 <%@ Page Language=" ...
- vue+element+echarts饼状图+可折叠列表
html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...
- echarts 饼状图 改变折线长度
$(function (){ //ups部分 var myChart = echarts.init(document.getElementById('result')) var option = { ...
- Echarts饼状图
<head> <meta charset="utf-8"> <title>ECharts</title> <script sr ...
- echarts饼状图位置设置
series: { name: "流量占比分布", type: "pie", radius: ["40%", "60%" ...
随机推荐
- OCP认证052考试最新考试题库和答案整理-33
33.Where Is backup metadata stored for use by Recovery Manager (RMAN)? A) In the control file B) In ...
- dict字典;dict的操作
一.字典: 1. 字典 dict 用{}来表示 键值对数据 {key:value} 唯一性 键 都必须是可哈希的 不可变的数据类型就可以当做字典中的键 值 没有任何限制 1.1 字典的创建: ...
- [ActionScript 3.0] 创建倒影
package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Display ...
- node.js的总结-可以应付bat的社招面试
什么是NodeJS Node.js采用模块化结构,按照CommonJS规范定义和使用模块.模块与文件是一一对应关系,即加载一个模块,实际上就是加载对应的一个模块文件. JS是脚本语言,脚本语言都需要一 ...
- Objective-C适用C数学函数 <math.h>
在实际工作中有些程序不可避免的需要使用数学函数进行计算,比如地图程序的地理坐标到地图坐标的变换.Objective-C做为ANSI C的扩展,使用C标准库头文件<math.h>中定义的数学 ...
- Corn表达式
CronTrigger CronTriggers往往比SimpleTrigger更有用,如果您需要基于日历的概念,而非SimpleTrigger完全指定的时间间隔,复发的发射工作的时间表.CronTr ...
- Linux crond任务调度
crond 任务调度 原理图 crontab 进行定时任务的设置,.概述 任务调度:是指系统在某个时间执行的特定的命令或程序. 任务调度分类:1.系统工作:有些重要的工作必须周而复始地执行.如病毒扫描 ...
- Log中关于start meeting在zVideoApp和zVideoUI中的流程可以搜索的几个字符串
[31356:36164:04-29/17:53:38.164:INFO:SBConfUI.cpp(940)] CSBConfUI::OnConfStatusChanged(CONF_STATUS) ...
- print高亮显示
显示颜色格式:\033[显示方式;字体色;背景色m......[\033[0m] ------------------------------------------- --------------- ...
- 知了课堂 Python Flask零基础 笔记整理
目录 起步 安装Python2.7: Python虚拟环境介绍与安装: pip安装flask: 认识url: URL详解 web服务器和应用服务器以及web应用框架: Flask 第一个flask程序 ...