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%" ...
随机推荐
- 问题 H: 抽奖活动(大数)
题目描述zc去参加抽奖活动,在抽奖箱里有n个球,每个球上写着一个数字.一次抽取两个球,得分为两个球上的数的乘积.为了中大奖,zc想要知道他能得到的最大得分为多少.输入第一行为T,代表样例数.(1< ...
- “全栈2019”Java第二十八章:数组详解(上篇)
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- POJ - 1251A - Jungle Roads 利用最小生成树
The Head Elder of the tropical island of Lagrishan has a problem. A burst of foreign aid money was s ...
- ubuntu安装ICE记录
背景本文档介绍在unbuntu环境下如何安装ICE,并用C++写一个ICE应用 ICE简介ICE是ZEROC的开源通信协议产品,它的全称是:The Internet Communications En ...
- mysql 代价
mysql cbo cost base optimizer 基于代价,数据是一直变化的oracle8 以前是rbo rule base optimizer 基于规则, 如果sql使用了索引,必须使用索 ...
- js 实现全国省市区三级联动
效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
- linux I/O函数使用
一.lseek lseek函数的作用是用来重新定位文件读写的位移. 头文件以及函数声明 #include <sys/types.h> #include <unistd.h> o ...
- asp 程序 转 php
常年做web的,工作需要,可能有的时候需要将asp代码批量转换成php,最近发现一个小东西很不错,虽不能100%转换(毕竟是程序),但是大大提高了工作效率 Asp2Php是一个可以将ASP转化成PHP ...
- 自定义View实现钟摆效果进度条PendulumView
转载请注明出处:http://blog.csdn.net/fightlei/article/details/52556755 在网上看到了一个IOS组件PendulumView,实现了钟摆的动画效果. ...
- Go语言命名
Go语言关键字 1.Go语言有25个关键字 2.关键字用途 var :用于变量的声明const :用于常量的声明type :用于声明类型func :用于声明函数和方法package :用于声明包文件i ...