Echarts连接mysql数据的实例_sql

var myChart

//创建ECharts图表方法

function DrawEChart(ec) {

//--- 折柱 ---

myChart = ec.init(document.getElementById('main'))

//图表显示提示信息

myChart.showLoading({

text: "图表数据正在努力加载..."

})

//定义图表options

var options = {

title: {

text: "通过Ajax获取数据呈现图标示例",

subtext: "www.stepday.com",

sublink: "http://www.stepday.com/myblog/?Echarts"

tooltip: {

trigger: 'axis'

legend: {

data: []

toolbox: {

show: true,

feature: {

mark: false

}

calculable: true,

xAxis: [

{

type: 'category',

data: []

}

yAxis: [

{

type: 'value',

splitArea: { show: true }

}

series: []

}

//通过Ajax获取数据

$.ajax({

type: "post",

async: false, //同步执行

url: "/Ajax/GetChartData.aspx?type=getData&count=12",

dataType: "json", //返回数据形式为json

success: function (result) {

if (result) {

//将返回的category和series对象赋值给options对象内的category和series

//因为xAxis是一个数组这里需要是xAxis[i]的形式

options.xAxis[0].data = result.category

options.series = result.series

options.legend.data = result.legend

myChart.hideLoading()

myChart.setOption(options)

}

error: function (errorMsg) {

alert("不好意思，大爷，图表请求数据失败啦!")

}

})

}

参考：http://www.stepday.com/topic/?906

<!--给你看看大概代码吧，用心想想其实没那么难，这代码我从他们官网上下来自己改改就用了。首先我做的这个是被当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>

<title>人员及案件统计</title>

<!--

-->

<style>

*{margin:0padding:0}

</style>

</head>

</div>

<% 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>

eCharts总体架构：

eCharts的底层库 Zrender，用面向对象的方式把实体抽象成为图形元素，调用 Canvas API设置样式，然后构建路径，进行图形元素渲染。

M - 数据管理层（storage），负责存储元素，进行增删改查。

C – 控制层（handle），负责事件处理，重要是是监听事件的作用坐标。

V – 视图层（painter），负责绘图 *** 作，canvas元素生命周期管理，视图渲染，更新控制。

eCharts前端初始化流程：

1、为eCharts准备一个具备大小（宽高）的Dom

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)

说明：本文仅为个人解读，欢迎指正

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/sjk/6667542.html

Echarts连接mysql数据的实例

发表评论

评论列表（0条）