html标签值数据处理到echarts,【echarts踩坑记录】一、加载本身的data数据

echarts是一个具备千万级数据可视化渲染能力，SVG + Canvas 双引擎的神器。javascript

它的官方网址为：http://www.echartsjs.com/index.html ，有各类饼状图、树状图、折线图……并且有不少的官方demo，咱们能够直接在线修改，动态查看是否符合本身的须要，而后下载～html

主要是记录本身使用echarts遇到的一些坑，但愿会对本身回顾和一样问题的朋友有所帮助。java

加载本身的data数据

echart主要是经过legend对象来存放图例，经过series对象来存放须要展现的数据。ajax

以饼状图为例，从官网打开一个饼状图的demo能够看到以下所示的关键代码：json

option = {

title: {

text: '天气状况统计',

subtext: '虚构数据',

left: 'center'

},

tooltip : {

trigger: 'item',

formatter: "{a}
{b} : {c} ({d}%)"

},

legend: {

// orient: 'vertical',

// top: 'middle',

bottom: 10,

left: 'center',

data: ['西凉', '益州','兖州','荆州','幽州']

},

series : [

{

type: 'pie',

radius : '65%',

center: ['50%', '50%'],

selectedMode: 'single',

data:[

{value:535, name: '荆州'},

{value:510, name: '兖州'},

{value:634, name: '益州'},

{value:735, name: '西凉'}

],

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

title和subtext就不用说啦，分别为标题和自标题，legend和series对象中的data数组则是展现数据的核心。数组

这里能够看到demo有一些默认的数据，若是想要加载本身的数据，咱们能够经过构造data数组来实现。app

首先能够经过结构看到legend的data是一个字符串数组，存放着名称属性，而series的data数组存放的是json对象，name是名称，value是对应的值，饼状图会自动求和算出百分比。echarts

在这里我经过ajax请求获取数据并构造须要的data数组。

var res=[];

var xres=[];

$.ajax({

type : "get",

url : "/history/getTfluxByPeriod",

dataType:"json",

data:{"begin":begin,"end":end},

contentType : "application/json;charset=utf-8",

success : function(data) {

$.each(data, function(index, obj) {

res.push({

value:obj.flux,

name:obj.name

});

xres.push(obj.name)

})

}

})

这里我先定义了一个res数组和xres数组，而后将ajax请求返回的数据进行each循环，在循环的时候构造res和xres数组。异步

这里个人xres存放的是名称，res存放的是名称-流量键值对(注意series中的data数据格式必须知足[{value:"",name:""}])。async

而后我在demo的位置中将data后面的部分替换成了res和xres，以下：

series : [

{

type: 'pie',

radius : '65%',

center: ['50%', '50%'],

selectedMode: 'single',

//data后换成构造好的数组

data:res,

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

注意ajax请求要设置成异步——async:false,要否则数据还没读出来就会绘制饼状图，什么都不会显示的～

最后的效果就是这样，看起来还不错，下面的名称也是能够自由选择的～