<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.11.1.min.js"></script>
<!--ECharts单文件引入-->
<script src="echarts-all.js" type="text/javascript"></script>
<title>html5 canvas动态饼状图动画代码</title>
<style type="text/css">
.echarts_pie{
height:570px;
width:1000px;
background: #E6E6E6;
}
#echart{
height:538px;
width:100%;
}
.echarts_pie ul{
float:left;
list-style:none;
}
.echarts_pie ul li{
float:left;
}
.echarts_pie .government{
margin-top:-500px;
width:200px;
height:60px;
font-size: 15px;
color: #4A4A4A;
letter-spacing: 0px;
line-height: 20px;
}
.echarts_pie .government_img{
margin-top:-920px;
margin-left:235px;
}
.echarts_pie .bussiness{
width:195px;
height:60px;
font-size: 15px;
color: #4A4A4A;
letter-spacing: 0px;
line-height: 20px;
margin-top:140px;
}
.echarts_pie .bussiness_img{
margin-top:-560px;
margin-left:-170px;
}
.echarts_pie .industry{
width:195px;
height:60px;
font-size: 15px;
color: #4A4A4A;
letter-spacing: 0px;
line-height: 20px;
margin-top:160px;
}
.echarts_pie .industry_img{
margin-top:-180px;
margin-left:-110px;
}
.echarts_pie .hospital_img{
margin-top:-950px;
margin-left:620px;
}
.echarts_pie .school_img{
margin-top:-680px;
margin-left:690px;
}
.echarts_pie .hotel_img{
margin-top:-300px;
margin-left:620px;
}
.echarts_pie .hospital{
margin-top:-570px;
margin-left:800px;
font-size: 15px;
color: #4A4A4A;
letter-spacing: 0px;
line-height: 20px;
}
.echarts_pie .school{
font-size: 15px;
color: #4A4A4A;
letter-spacing: 0px;
line-height: 20px;
margin-left:800px;
margin-top:110px;
}
.echarts_pie .hotel{
font-size: 15px;
color: #4A4A4A;
letter-spacing: 0px;
line-height: 20px;
margin-left:810px;
margin-top:190px;
}
</style>
</head>
<body>
<center>
<!--饼形图-->
<div class="echarts_pie">
<div class="content">
<div id="echart"></div>
</div>
</div>
<script>
//饼形图
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('echart'));
option = {
legend: {
orient : 'vertical',
x : 'left',
data:[]
},
color:['#4A5873','#F76666','#16CF45','#119FD9','#E5D117','#FF7C41', '#FF5151'],
calculable : false,
series : [
{
name:'',
type:'pie',
selectedMode: 'single',
radius : [0, 90],
// for funnel
x: '20%',
width: '40%',
y: '90%',
funnelAlign: 'right',
max: 1548,
itemStyle : {
normal : {
label : {
position : 'inner',
},
labelLine : {
show : false
}
}
},
data:[
{value:335, name:'六大解\n决方案\n\n\n'}
]
},
{
name:'',
type:'pie',
radius : [100, 200],
// for funnel
x: '80%',
width: '70%',
funnelAlign: 'left',
max: 1048,
itemStyle : {
normal : {
label : {
position : 'inner'
},
labelLine : {
show : false
}
}
},
data:[
{ value:500, name:'医院'},
{ value:500,name:'校园'},
{ value:500, name:'酒店'},
{ value:500, name:'工业'},
{ value:500,name:'商业\n建筑'},
{ value:500,name:'政府'},
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</center>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
html5 canvas动态饼状图动画代码.zip （3个子文件） 
echarts-all.js 950KB
index.html 4KB jquery-1.11.1.min.js 94KB资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5852
最新资源
- 永磁同步电机双矢量占空比模型预测转矩控制（MPTC）策略解析及全局最优占空比选择：仿真效果卓越，文档详解,永磁同步电机双矢量占空比模型预测转矩控制mptc，考虑全局最优占空比选择，使得全局占空比基本都
- 永磁同步电机改进型三矢量模型预测电流控制：结合q轴电流斜率与切换控制策略，混合输出三矢量和单矢量解析文档赠送,永磁同步电机改进型三矢量模型预测电流控制，参考张晓光老师的lunwenModel Pred
- SCL与CFC编写方法：实现五个电机的逆启顺停顺序控制程序,2种方法SCL编写和CFC编写5个电机逆启顺停的顺控程序 方法一：使用西门子的电机功能块和联锁块编写5个电机逆启顺停的顺控程序 方法二、使用
- 改进非洲秃鹫优化算法性能展示与四种算法对比,改进非洲秃鹫优化算法(IAVOA，2021年，名字自己随便取的)，引入了几种改进策略，效果还不错 与DBO，AVOA，WOA，NGO四种算法，在
- 基于Comsol的粗糙单裂隙渗流与传热耦合模型研究：模型建立与边界条件细探,Comsol粗糙单裂隙渗流传热耦合数值模型， 细模型边界条件以及模型建立 ,核心关键词：Comsol; 粗糙单裂隙; 渗流
- 基于裂隙岩体特征的 热-流-固耦合效应数值建模技术探讨,裂隙岩体热-流-固耦合数值建模 ,核心关键词：裂隙岩体；热-流-固耦合；数值建模；建模方法；耦合效应；数值模拟；地质工程；地球科学；岩土工程；工
- 基于Simulink的BMS动力电池管理系统的仿真与控制策略模型研究,BMS仿真电池平衡控制策略仿真similink 动力电池管理系统仿真 BMS + Battery Simulink 控制策略模型
- Simulink飞轮储能PMSM永磁同步机与同步机一次调频：系统频率特性研究与参考文献解析,simulink飞轮储能PMSM永磁同步机与同步机一次调频，系统频率特性如下，有参考文献 ,核心关键词：S
- 小土堆学习笔记相关资源
- 基于FPGA的DDS波形发生器技术：实现多波形数字频率合成与调频调幅调相切换功能,基于FPGA的DDS多波形数字频率合成技术，波形发生器，采用DDS原理，以FPGA芯片作为核心，采用verilog H
- 永磁同步电机直接转矩控制DTC模型（含传统与滑膜控制对比研究）利用Simulink仿真分析,永磁同步电机+SIMULINK+直接转矩控制 DTC控制模型x2（传统+滑膜） A1 暂无文档 ,核心关键词
- Matlab下的储能蓄电池PQ控制策略研究与实践,matlab储能蓄电池pq控制 ,核心关键词：Matlab; 储能蓄电池; PQ控制; 能源管理; 电池优化控制; 电力系统 ,Matlab储能蓄电池
- 基于模型预测控制的四轮独立驱动与转向路径跟踪：车辆稳定性控制的高级算法,四轮独立驱动 转向路径跟踪及车辆稳定性控制 模型预测控制MPC 上层4WS+DYC，下层阿克曼转向分配和最小轮胎负荷率驱动力矩分
- Simulink中四机两区域系统一次调频优化：风机与光伏同步机的联合调频策略及多台双馈风电场联合调频研究,simulink简化四机两区域系统一次调频，风机同步机光伏调频，新能源风电渗透率高，可调，风电
- 基于WinCC 8.0与STEP V5.7 SP1的PLC编程虚拟机，Win10 22H2最新系统，支持PLCSIM与多种组件安装 ,西门子WinCC 8.0 机 STEP V5.7 SP1Chin
- 基于蚁群算法与A*算法的多目标点路径规划：送餐机器人室内旅行商问题的解决方案,多目标点路径规划-蚁群+A*算法 室内旅行商问题-送餐移动机器人（从厨房出发到达多个目标点，最后返回厨房） 1，A*算
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
