eCharts的底层库 Zrender，用面向对象的方式把实体抽象成为图形元素，调用 Canvas API设置样式，然后构建路径，进行图形元素渲染。
M - 数据管理层（storage），负责存储元素，进行增删改查。
C – 控制层（handle），负责事件处理，重要是是监听事件的作用坐标。
V – 视图层（painter），负责绘图 *** 作，canvas元素生命周期管理，视图渲染，更新控制。
eCharts前端初始化流程：
1、为eCharts准备一个具备大小（宽高）的Dom
<div id="main" style="width: 600pxheight:400px"></div>
2、基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')，‘null’，{renderer：‘svg’})
3、指定图表的配置项和数据
var option = { … }
4、使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
eCharts初始化底层实现关键步骤：
1.获取并记录dom成全局变量：__DEV__。
2.校验当前dom上是否存在Echarts图表实例： getInstanceByDom(dom)
3.创建一个图表实例 ：new ECharts(dom, theme, opts)
1)调用载ZRender绘图引擎，创建一个实例zr：zrender.init（）
a)根据参数选用canvas或GVG渲染器：renderer
b)根据参数配置图表分辨比：devicePixelRatio
c)根据参数配置图表尺寸：width、height
2)做一个事件监听（信息中心）：new EventProcessor（）
3)准备图表和组件的视图实例 ：prepareView（）
a)根据系列类型选择模型：doPrepare（）
b)创建视图实例：new Clazz( )
4)根据配置项注册图表项
a)注册主题：registerTheme（）
b)注册选项预处理器：registerPreprocessor（）
c)注册处理器：registerProcessor（）
d)注册坐标系统：registerCoordinateSystem（）
e)注册图表布局：registerLayout（）
f)注册图表行为：registerAction（）
g)注册视图：registerVisual（）
5)渲染组件：renderComponents（）
6)渲染每个图表：renderSeries（）
a)数据渲染：zr.storage.getDisplayList()
b)更新覆盖层状态updateHoverLayerStatus（）
7)为实例初始化鼠标事件：initEvents（）
8)启用连接，进行状态设置等：enableConnect(chart)
说明：本文仅为个人解读，欢迎指正
<!--给你看看大概代码吧，用心想想其实没那么难，这代码我从他们官网上下来自己改改就用了。首先我做的这个是被当d出框用的 所以设置这个大小，拿zrk来举例，zrk是从另外一个js里传递过来的 ajax post当success时 将zrk地址栏传递 其实只要写个简单的ajax便可以把你的数据绑定了，别想复杂了$.ajax({
type : "post",
url : "GetJzwxxCount.action?t="+Math.random(),//你post的地址
data:{//你需要传递的参数
address:$("input[name=address]").val(),
name:$("input[name=jzwmc]").val()
},
dataType : "json",// 设置需要返回的数据类型
success : function(data) {
//这里是我传递到下面jsp的地址根据你自己的需要去写
},
beforeSend:function(){
GetLoading()
},
error : function() {
ClearLoading()
createDataGrid()
}// 这里不要加","
})
-->
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath()
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>人员及案件统计</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style>
*{margin:0padding:0}
</style>
<script type="text/javascript" src="content/js/jquery-1.4.4.min.js"></script>
</head>
<body style="overflow:scrolloverflow-x:hidden overflow-y:hidden ">
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
<div style="margin:0 padding:0">
<div id="main" style="height:240pxwidth:220px float:left"></div>
<div id="main1" style="height:240pxwidth:220px float:left"></div>
<!-- <div id="main2" style="height:350px width:260px float:left"></div> -->
</div>
<!--Step:2 Import echarts.js-->
<!--Step:2 引入echarts.js-->
<script src="content/count/js/echarts.js"></script>
<script type="text/javascript">
<% String zrk=request.getParameter("zrk")%>
<% String ldrk=request.getParameter("ldrk")%>
<% String czrk=request.getParameter("czrk")%>
<% String zdrk=request.getParameter("zdrk")%>
<% String ffry=request.getParameter("ffry")%>
<% String wfaj=request.getParameter("wfaj")%>
<% if(zrk.equals("")){
zrk = "0"
}
if(ldrk.equals("")){
ldrk = "0"
}
if(czrk.equals("")){
czrk = "0"
}
if(zdrk.equals("")){
zdrk = "0"
}
if(ffry.equals("")){
ffry = "0"
}
if(wfaj.equals("")){
wfaj = "0"
}
%>
var zrk = '<%=zrk%>'
var czrk = '<%=czrk%>'
var ldrk = '<%=ldrk%>'
var zdrk = '<%=zdrk%>'
var ffry = '<%=ffry%>'
var wfaj = '<%=wfaj%>'
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths: {
echarts: 'content/count/js'
}
})
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/pie'
],
function (ec) {
//--- 折柱 ---
var myChart = ec.init(document.getElementById('main'))
var dataStyle = {
normal: {
label: {show:false},
labelLine: {show:false}
}
}
var placeHolderStyle = {
normal : {
color: 'rgba(0,0,0,0)',
label: {show:false},
labelLine: {show:false}
},
emphasis : {
color: 'rgba(0,0,0,0)'
}
}
/* $.ajax({
type : "post",
url : "GetDataInfo.action?t="+Math.random(),//
data:{//设置数据源
sqbm:"",
type:""
},
dataType : "json",// 设置需要返回的数据类型
success : function(data) {
var dsdata = eval("("+data+")")
if(dsdata.ds!=null){
zrk=dsdata.ds.czrk+dsdata.ds.ldrk
czrk=dsdata.ds.czrk
ldrk=dsdata.ds.ldrk
zdrk=dsdata.ds.zdrk
} */
myChart.setOption({
title: {
text: ' 人口统计',
subtext: ' 人口总数：'+zrk,
x: '54',
y: '80',
itemGap: 20,
textStyle : {
color : 'rgba(30,144,255,0.8)',
fontFamily : '微软雅黑',
fontSize : 20,
fontWeight : 'bolder'
}
},
tooltip : {
show: true
},
legend: {
orient : 'vertical',
x : 108,
y : 0,
itemGap:6,
data:['总人口:'+zrk,'常住人口:'+czrk,'流动人口:'+ldrk,'重点人口:'+zdrk]
},
series : [
{
name:'总人口统计',
type:'pie',
clockWise:false,
radius : [80,90],
center:['48%',100],
itemStyle : {
normal: {
color:'#71d7fc',
label: {show:false},
labelLine: {show:false}
}
},
data:[
{
value:zrk,
name:'总人口:'+zrk
},
{
value:zrk*0.2,
name:'总人口',
itemStyle : placeHolderStyle
}
]
},
{
name:'常住人口统计',
type:'pie',
clockWise:false,
radius : [70, 80],
center:['48%',100],
itemStyle : {
normal: {
color:'#71fce7',
label: {show:false},
labelLine: {show:false}
}
},
data:[
{
value:czrk,
name:'常住人口:'+czrk
},
{
value:zrk-czrk,
name:'常住人口',
itemStyle : placeHolderStyle
}
]
},
{
name:'流动人口统计',
type:'pie',
clockWise:false,
radius : [60, 70],
center:['48%',100],
itemStyle : {
normal: {
color:'#fcd071',
label: {show:false},
labelLine: {show:false}
}
},
data:[
{
value:ldrk,
name:'流动人口:'+ldrk
},
{
value:zrk-czrk,
name:'流动人口',
itemStyle : placeHolderStyle
}
]
},{
name:'重点人口统计',
type:'pie',
clockWise:false,
radius : [50, 60],
center:['48%',100],
itemStyle : dataStyle,
data:[
{
value:zdrk,
name:'重点人口:'+zdrk
},
{
value:zrk-zdrk,
name:'重点人口',
itemStyle : placeHolderStyle
}
]
}
]
})
/* },
error : function() {
//isAjax=false
}// 这里不要加","
}) */
//--- 折柱 ---
var myChart1 = ec.init(document.getElementById('main1'))
var dataStyle1 = {
normal: {
label: {show:false},
labelLine: {show:false}
}
}
var placeHolderStyle1 = {
normal : {
color: 'rgba(0,0,0,0)',
label: {show:false},
labelLine: {show:false}
},
emphasis : {
color: 'rgba(0,0,0,0)'
}
}
myChart1.setOption({
title: {
text: ' 案件统计',
subtext:' 涉案人员：'+ffry+'\r\n\n 违法案件：'+wfaj,
x: '45',
y: '110',
itemGap: 13,
textStyle : {
color : 'rgba(30,144,255,0.8)',
fontFamily : '微软雅黑',
fontSize : 20,
fontWeight : 'bolder'
}
},
tooltip : {
show: true
},
legend: {
orient : 'vertical',
x : 115,
y : 60,
itemGap:5,
data:['涉案人员:'+ffry,'违法案件:'+wfaj]
},
series : [
{
name:'涉案人员统计',
type:'pie',
clockWise:false,
radius : [70, 80],
center:['45%',150],
itemStyle : {
normal: {
color:'#58da6a',
label: {show:false},
labelLine: {show:false}
}
},
data:[
{
value:ffry,
name:'涉案人员:'+ffry
},
{
value:ffry*0.2,
name:'涉案人员',
itemStyle : placeHolderStyle1
}
]
},
{
name:'违法案件统计',
type:'pie',
clockWise:false,
radius : [60, 70],
center:['45%',150],
itemStyle : {
normal: {
color:'#36ADD8',
label: {show:false},
labelLine: {show:false}
}
},
data:[
{
value:wfaj,
name:'违法案件:'+wfaj
},
{
value:wfaj*0.2,
name:'违法案件',
itemStyle : placeHolderStyle1
}
]
}
]
})
}
)
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）