echars ajax 饼状图,echarts饼状图实现方法

当前位置:我的异常网» Web前端 » echarts饼状图实现方法

echarts饼状图实现方法

www.myexceptions.net  网友分享于：2015-09-27  浏览：0次

echarts饼状图实现步骤：

Charts demo

// 路径配置

require.config({

paths:{

'echarts' : 'js/echarts',

'echarts/chart/pie' : 'js/echarts'

}

});

// 使用

require(

[

'echarts',

'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载

],

function (ec) {

// 基于准备好的dom，初始化echarts图表

var myChart = ec.init(document.getElementById('picturePlace'));

option = {

title : {

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

subtext: '纯属虚构',

x:'center'

},

tooltip : {

trigger: 'item',

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

},

legend: {

orient : 'vertical',

x : 'left',

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

},

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

restore : {show: true},

saveAsImage : {show: true}

}

},

calculable : true,

series : [

{

name:'访问来源',

type:'pie',

radius : '55%',

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

data:[

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

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

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

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

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

]

}

]

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);

文章评论