Echarts如何向饼状图添加动态数据

先把动态数据封装成为一个符合echarts格式的数组，如下所示

var datas = [

{value:335, name:'直接访问'},

{value:310, name:'邮件营销'},

{value:234, name:'联盟广告'},

{value:135, name:'视频广告'},

{value:1548, name:'搜索引擎'}

],

然后在如下设置

option = {

title : {

text: '某站点用户访问来源',

subtext: '纯属虚构',

x:'center'

},

tooltip : {

trigger: 'item',

formatter: "{a} <br/>{b} : {c} ({d}%)"

},

legend: {

orient: 'vertical',

left: 'left',

data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

},

series : [

{

name: '访问来源',

type: 'pie',

radius : '55%',

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

data:datas,

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

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

}

}

}

]

}

<script src="~/Scripts/NewEcharts/echarts.js"></script>

<script type="text/javascript">

var myChart

$(function () {

load()

})

function load() {

require.config({

paths: {

//echarts: '../Scripts/Echartsjs'

echarts: '../Scripts/NewEcharts'

}

})

require(

[

'echarts',

'echarts/chart/bar'

//'echarts/chart/line'

//'echarts/chart/map'

],

DrawEchart

)

}

function DrawEchart(ec) {

//--- 折柱 ---

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

//图表显示提示信息

myChart.showLoading({

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

})

//定义图表

var option = {

tooltip: {

trigger: 'axis'

},

//color: '#66B3FF',

animation: false,

addDataAnimation: false,

calculable: true,

xAxis: [

{

type: 'value',

boundaryGap: [0, 0.01]

}

],

yAxis: [

{

splitLine: {

show: false

},//分隔线

//splitArea: { show: false },//分隔区域

type: 'category',

// data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']

data:[]

}

],

series: [

{

name: '资源使用情况',

color: '#66B3FF ',

type: 'bar',

// data: [18203, 23489, 29034, 104970, 131744, 630230]

data:[]

}

]

}

//通过Ajax获取数据

$.ajax({

type: "post",

async: false, //同步执行

url: "/Report/GetVMUsedInfo",

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

data: {rnd:Math.random()},

success: function(result) {

if (result) {

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

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

option.yAxis[0].data = result.yAxis

option.series[0].data = result.series

myChart.hideLoading()

myChart.setOption(option)

}

},

error: function(errorMsg) {

alert("图表请求数据失败啦!")

}

})

//myChart.hideLoading()

//myChart.setOption(option)

}

</script>

返回用的是 json数据；

后台使用的Asp.net MVC,使用了匿名类（主要是为了方便），

var newObj = new

{

yAxis =result.Data.DanweiList,

series= result.Data.ApplyVMEventList

}

return Json(newObj, JsonRequestBehavior.AllowGet)

可以在电脑版的echarts地图选择地点然后标记，具体步骤如下：

1、打开echarts地图地图。

2、选择地图功能区中的工具箱，选择标记功能。

3、点击d出的工具箱中的标记标志，选择想要进行标记的地点。

4、标记想要的地点后，输容入标记地点的名称并点击保存。

注意事项：

1、以计算机为主体的电子设备在制图中的广泛应用，地图不再限于用符号和图形表达在纸（或类似的介质）上，它可以数字的形式存储于磁介质上，或经可视化加工表达在屏幕上；

2、由于航天技术的发展，出现了卫星遥感影像，这不但给地图制作提供了新的数据源，还可以把影像直接作为地理事物的表现形式，同时把人们的视野拓展到月球和其他星球。

3、多媒体技术的发展，使得视频、声音等都可以成为地图的表达手段。

---