echart 动画 饼图_关于echarts动态生成多个饼图的解决方法

[HTML] 纯文本查看 复制代码

echarts动态生成多个饼图

.main{

/*延迟过度*/

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box;

-o-box-sizing:border-box; /* Opera */

transition: all 0.3s linear;/*0.3s过渡时间*/

-moz-transition: all 0.3s linear; /* Firefox 4 */

-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */

width: 600px;

height: 400px;

}

.main:hover{

/*边框*/

border: solid 1px rgba(102, 146, 191, 0.68);

/*边角弧度*/

border-radius: 10px;

box-shadow: 7px 15px 30px #285a63;

}

var dataes=[

{"title":"第一个","series_data":[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]},

{"title":"第二个","series_data":[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]},

{"title":"第三个","series_data":[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]},

{"title":"第四个","series_data":[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]},

]

// 对列表中的数据遍历，对应的每一条数据都生成一份饼图

for (var i in dataes) {

var maines="main"+i

var myChart =echarts.init(document.getElementById(maines))

myChart.setOption({

title: {

text:dataes[i]["title"],

left: 'center'

},

tooltip: {

trigger: 'item'

},

legend: {

orient: 'vertical',

left: 'left',

},

series : [

{

name: dataes[i]["title"],

type: 'pie',

radius: '55%',

data:dataes[i]["series_data"]

}

]

})

}