JavaScript使用百度ECharts插件绘制饼图操作示例
2019-12-02 18:11
1596 查看
本文实例讲述了JavaScript使用百度ECharts插件绘制饼图操作。分享给大家供大家参考,具体如下:
百度ECharts是一款由百度前端团队开发与维护的,基于HTML5的开源JavaScript图表库。E是Enterprise的简称,意思是商业级数据图表。
本文简述使用ECharts绘制饼图(Pie Chart)的过程,下图为使用ECharts绘制的饼图实例。
首先需要在页面中新建<script>标签,引入符合AMD规范的加载器,如esl.js
关于AMD规范的详细介绍,可以参考阮一峰的博文:Javascript模块化编程(二):AMD规范
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
然后在页面中添加一个容器,为填充ECharts绘制的图形做准备。
<body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px"></div> </body>
新建<script>标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js)
由于本例为饼图,因此在paths中添加'echarts/chart/pie'
<script type="text/javascript"> // 路径配置 require.config({ paths:{ 'echarts' : 'http://echarts.baidu.com/build/echarts', 'echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts' } }); </script>
<script>标签内动态加载echarts和所需图表,回调函数中可以初始化图表并驱动图表的生成
require( [ 'echarts', 'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 myChart = ec.init(document.getElementById('main')); var option = { title : { text: 'ECharts实例', subtext: '饼图(Pie Chart)', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', data:['part1','part2','part3','part4'] }, toolbox: { show : true, feature : { //mark : {show: true}, //dataView : {show: true, readOnly: false}, restore : {show: true}, //saveAsImage : {show: true} } }, calculable : false, series : [ { name:'饼图实例', type:'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:100, name:'part1'}, {value:200, name:'part2'}, {value:300, name:'part3'}, {value:400, name:'part4'}] } ] }; // 为echarts对象加载数据 myChart.setOption(option); }
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- 在Vue中使用echarts的实例代码(3种图)
- jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
- jQuery插件Echarts实现的渐变色柱状图
- echarts学习笔记之箱线图的分析与绘制详解
- echarts饼图扇区添加点击事件的实例
- jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
- jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
- jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
- Echarts动态加载多条折线图的实现代码
- jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
- 详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
相关文章推荐
- JavaScript操作XML 使用百度RSS作为新闻源示例
- JavaScript操作XML 使用百度RSS作为新闻源示例
- 树莓派:4. 树莓派搭建美观的物联网温度服务器-ECharts、HTML5、JavaScript / ECharts gauge使用示例
- 【WEB前端】使用百度ECharts,绘制项目质量报表
- JavaScript使用闭包模仿块级作用域操作示例
- Python使用matplotlib绘制三维参数曲线操作示例
- JavaScript使用math.js进行精确计算操作示例
- iOS 使用百度图表插件Echarts
- PHP使用JpGraph绘制折线图操作示例【附源码下载】
- javascript对象的使用和属性操作示例详解
- 百度Echarts图表JS插件的使用
- 【ECharts】百度图表插件ECharts使用
- 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,不依赖任何库和插件,有演示demo
- 百度的ECharts使用示例
- JavaScript使用享元模式实现文件上传优化操作示例
- Vue使用zTree插件封装树组件操作示例
- React Native使用百度Echarts显示图表的示例代码
- javascript对象的使用和属性操作示例详解
- 百度ECharts使用示例
- 在JSP中如何操作Excel----POI插件的使用