<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="js/esl.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<script type="text/javascript">
// 路径配置
require.config({
paths:{
'echarts' : 'js/echarts',
'echarts/chart/pie' : 'js/echarts'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>

Echarts饼状图的更多相关文章

  1. Echarts 饼状图自定义颜色

    今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码 $.ajax({ url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx&qu ...

  2. jquery echarts 饼状图

    var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...

  3. echarts 饼状图调节 label和labelLine的位置

    原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...

  4. canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  5. ECharts饼状图添加事件

    和柱状图添加事件没有区别,详情如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  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 饼状图

    说明:这是我做项目时自己写的小例子,里面有冗余的参数. 开发环境 vs2012 asp.net mvc4  c# 1.显示效果 2.HTML代码 <%@ Page Language=" ...

  9. echarts饼状图位置设置

    series: { name: "流量占比分布", type: "pie", radius: ["40%", "60%" ...

随机推荐

  1. 激活win10系统的方法（亲测）

    WIN+X 按A (或者点击左下角有个windows小图标“鼠标右键”选择选择“命令提示符号(管理员)”) 输入下面命令,回车(一行按一个回车键)slmgr.vbs /upkslmgr /ipk W2 ...

  2. Jenkins持续部署-Windows环境持续部署探究1

    目录 Jenkins持续部署-Windows环境持续部署探究1 目录 前言 目的 方案流程 技术实现 PowerShell FTP上传插件 环境变量插件 脚本执行 远程调用 升级服务 启动服务 总结 ...

  3. IOC基本理解

    什么是IOC? IOC全称为控制反转(Inversion Of Control),别名依赖注入(Dependency Injection). 控制反转即指我们获取依赖的方式发生了反转. 假设存在如下情 ...

  4. MFC中的几种播放声音的方法

    一．播放声音文件的简单方法 在VC++ 中的多媒体动态连接库中提供了一组与音频设备有关的函数.利用这些函数可以方便地播放声音.最简单的播放声音方法就是直接调用VC++中提供的声音播放函 数BOOL s ...

  5. 【Java TCP/IP Socket】深入剖析socket——TCP套接字的生命周期

    建立TCP连接      新的Socket实例创建后,就立即能用于发送和接收数据.也就是说,当Socket实例返回时,它已经连接到了一个远程终端,并通过协议的底层实现完成了TCP消息或握手信息的交换. ...

  6. pnputil

    http://mb.yidianzixun.com/article/0FYSZgnB?s=mb&appid=mibrowser C:\Users\Administrator>pnputi ...

  7. MAPZONE GIS SDK接入Openlayers3之五——图形编辑工具

    图形编辑工具提供对要素图形进行增.删.改的功能,具体包括以下几种工具类型: 浏览工具 选择工具 创建要素工具 删除命令 分割工具 合并命令 节点编辑工具 修边工具 撤销命令 重做命令 工具的实现基本上 ...

  8. 【docker】启动docker连接数据库 出现FATAL: password authentucation failed for user "homestatead"问题

    docker可以成功启动,启动命令如下: docker run -d -p : -v `pwd`/pgdata:/var/lib/postgresql/data -e POSTGRES_USER=ho ...

  9. 数据库系统学习（八）-SQL语言与数据库完整性和安全性

    第八讲 SQL语言与数据库完整性 重难点 数据库完整性的概念 关系数据库 防止和避免数据库中不合理数据的出现 输入错误,操作失误,程序处理错误等 完整性约束条件的一般形式 对O操作集合,当出现A情况时 ...

  10. 将一个文件从gbk编码转换为utf8编码

    用django展示模板时,出现如下错误: 'utf8' codec can't decode byte 0xd3 in position 197: invalid continuation byte ...