ECharts画饼图实例
2018-05-03 21:42
148 查看
首先要到官网下载两个js:
(1) echarts.js
(2) jquery.js
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test</title> <script src="jquery.js"></script> <script src="echarts.js"></script> </head> <body> <div id="echartsPie" style="width:600px;height:400px;"></div> <script type="text/javascript"> var echartsPie; var json = [ {value:21,name:'gznc_pcc'}, {value:26,name:'pcc'}, {value:24,name:'张三'} ]; var option = { title : { text: 'XXX年龄分布', subtext: '独家报道', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} 岁" }, legend: { orient : 'vertical', x : 'left', data:['gznc_pcc','pcc','张三'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'center', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'年龄', type:'pie', radius : '65%',//饼图的半径大小 center: ['50%', '60%'],//饼图的位置 data:json } ] }; echartsPie = echarts.init(document.getElementById('echartsPie')); $(function(){ echartsPie.setOption(option); }); </script> </body> </html>
效果图:
相关文章推荐
- Echarts数据可视化echarts实例的相关操作,开发全解+完美注释
- echarts 柱状图实例
- 【PythonDjango后台实例 第四章】Python3.6.1+Bootstrap3+echarts 在HTML网页中使用echarts展示图表
- Echarts清除前面的图表实例
- 清除echarts 实例
- Obiee+echarts实例之柱状图
- 在 webpack 中使用 ECharts的实例详解
- Echarts 实例
- ECharts实例开发学习笔记一
- Obiee+echarts实例之瀑布图
- 1.简单实例:ASP.NET下Echarts通过Ajax从数据库中获取数据
- 怎么在echarts官网中查看实例的json数据结构
- echarts 实例(一:动态数据)
- ECharts官网实例
- Obiee+echarts实例之100%竖堆叠图
- echarts在一个div图例中显示多个饼图。实例
- ECharts系列 - 柱状图(条形图)实例一
- Vue2 使用 Echarts 创建图表实例代码
- echarts 柱状图,折线图互转实例(数据动态请求后台)