1.饼图所需要的数据格式
2.饼图样式
{
"legend": {
"orient": "vertical", //图例列表的布局朝向。
"data": [
"直接访问",
"邮件营销",
"联盟广告",
"视频广告",
"搜索引擎"
],
"left": 10.0
},
"tooltip": { //提示框组件
"trigger": "item",
"formatter": "{a} <br/>{b}: {c} ({d}%)"
},
"series": [
{
"type": "pie", //饼图类型 :pie 折线图:line 柱状图:bar
"radius": [
"30%", //饼图内宽
"70%" //饼图外宽
],
"avoidLabelOverlap": false,
"label": {
"normal": {
"show": true, // 是否显示便签名称
"position": "inner", //标签显示位置
"textStyle": {
"fontWeight": 100.0, //字体样式
"fontSize": 8.0
},
"formatter": "{d}%" //显示标签的同时加上百分比
},
"emphasis": { //内圈标签样式
"show": true,
"textStyle": {
"fontSize": "15",
"fontWeight": "bold"
}
}
},
"itemStyle": {
"normal": { //饼图块之间的间距和颜色
"borderWidth": 10.0,
"borderColor": "#ffffff"
}
},
"labelLine": {
"normal": { //标签的视觉引导线样式
"show": false
}
},
"data": "data"
}
]
}
3.饼图的点击事件
event="$fenzu=com.alibaba.fastjson.JSONObject.parseObject(event.data).getString('name');if($fenzu!='echarts'){go('OWCP301',3);}"//创建一个变量去接点击时传出的标签中文,传到go的功能,,对这个值做对应的操作和判断