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 相关文章推荐
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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
用PHP实现递归循环每一个目录
2010/08/08 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
Python数据集切分实例
2018/12/08 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
用Python开发app后端有优势吗
2020/06/29 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
法律专业自我鉴定
2013/10/03 职场文书
户外婚礼策划方案
2014/02/08 职场文书
商场租赁意向书
2014/07/30 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
奖励申请报告范文
2015/05/15 职场文书
交通事故案件代理词
2015/05/23 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
javascript函数式编程基础
2021/09/15 Javascript