JavaScript使用百度ECharts插件绘制饼图操作示例


Posted in Javascript onNovember 26, 2019

本文实例讲述了JavaScript使用百度ECharts插件绘制饼图操作。分享给大家供大家参考,具体如下:

百度ECharts是一款由百度前端团队开发与维护的,基于HTML5的开源JavaScript图表库。E是Enterprise的简称,意思是商业级数据图表。

本文简述使用ECharts绘制饼图(Pie Chart)的过程,下图为使用ECharts绘制的饼图实例。

JavaScript使用百度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.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
js登录弹出层特效
Mar 07 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
vue如何判断dom的class
Apr 26 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 #Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 #Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 #Javascript
vue中keep-alive,include的缓存问题
Nov 26 #Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 #Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 #jQuery
原生js实现贪食蛇小游戏的思路详解
Nov 26 #Javascript
You might like
无线电的诞生过程
2021/03/01 无线电
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
transform python环境快速配置方法
2018/09/27 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python实现五子棋游戏
2019/06/18 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
工程预算与管理应届生求职信
2013/10/06 职场文书
函授自我鉴定
2013/11/06 职场文书
员工考核管理制度
2014/02/02 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
毕业生政审意见范文
2015/06/04 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技