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)'

}

}

}

]

}

1、下载好开发包后就可以开始了，第一步引入开发包，和需要的主题文件（可定义自己的主体文件），并定义好页面布局。2.0以后上的版本，需要把开发包放到body下，否则ie低版本会出现属性未找到的错误，导致图标初始化失败。

2、第二步，普通初始化图表，通过调用开发包方法，有两种初始化方式，

1.var myChart = echarts.init(document.getElementById("echart"))

2.var myChart=require('echarts').init(document.getElementById("echart"))

一般建议使用第一种方法进行初始化 *** 作。

3、第三步，设置option属性，来给图表设置数据,option是数组元素，tooltip：提示框，legend图例，calculable可设置是否拖拽，series设置数据（data类型也为数组类型），开始先随机初始化几条模拟数据，

4、到这一步，就完成了，图表初始化的步骤，效果如下图所示。然后大家可以改变下图标的样式，2.0版本留了设置主题的方法，可设置setThem()对图表样式进行修改。

5、看看主题怎么配置，设置色版，设置主题颜色，不一一介绍了，请大家请看下面代码：

6、通过上面主题的添加完成了对样式的修改，当然最后大家记嘚设置myChart.setTheme(theme)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<div id="p"></div>

// 路径配置

require.config({

paths: {

'echarts': '/public/echarts-2.2.7/doc/example/www/js'

}

})

// 使用

require(

[

'echarts',

'echarts/chart/pie'

.

.

.

], DrawCharts)

function DrawCharts(ec) {

var char1 = ec.init(document.getElementById('p'))

var ecConfig = require('echarts/config')

char1.on(ecConfig.EVENT.CLICK, eConsole)

......//正常的echarts

}

//点击事件

function eConsole(param) {

if (typeof param.seriesIndex == 'undefined') {

return

}

if (param.type == 'click') {

var name = param.name

alert(name)

}

}

重点就是 ：

var ecConfig = require('echarts/config')

char1.on(ecConfig.EVENT.CLICK, eConsole)

这两步

---