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 相关文章推荐
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
js简单倒计时实现代码
Apr 30 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 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 采集书并合成txt格式的实现代码
2009/03/01 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
轮播图组件js代码
2016/08/08 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
javascript self对象使用详解
2016/10/18 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
jQuery替换节点元素的操作方法
2018/03/18 jQuery
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
python with提前退出遇到的坑与解决方案
2018/01/05 Python
详解django三种文件下载方式
2018/04/06 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
软件配置管理有什么好处
2015/04/15 面试题
家佳咖啡店创业计划书
2013/12/27 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
职业规划实施方案
2014/06/10 职场文书
单位消防安全责任书
2014/07/23 职场文书
师德师风学习材料
2014/12/19 职场文书
营业员岗位职责
2015/02/11 职场文书
申请吧主发表的感言
2015/08/03 职场文书
施工现场安全管理制度
2015/08/05 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python