JS Echarts 配置以及使用
2017-03-07 14:16
330 查看
<1> 引入 Els.js
<2> 准备一个具有宽高的 dom 容器
<div id="main" style="width: 100%; height: 10rem;"></div>
<3> 引入 Echarts
<4> 调用绘图组件
<6> 上述代码中的 option 可以到 官网中查找自己想要的图形, 复制代码替换 官网地址 http://echarts.baidu.com/examples.html
<2> 准备一个具有宽高的 dom 容器
<div id="main" style="width: 100%; height: 10rem;"></div>
<3> 引入 Echarts
require.config({ paths: { 'echarts': '../Js/Echarts', 'echarts/chart/pie': '../Js/Echarts' } });
<4> 调用绘图组件
require( [ 'echarts', 'echarts/chart/pie' ], function(ec){ var domMain = ec.init($('#main')[0]); option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; domMain.setOption(option); } );
<6> 上述代码中的 option 可以到 官网中查找自己想要的图形, 复制代码替换 官网地址 http://echarts.baidu.com/examples.html
相关文章推荐
- 在apache配置文件中使用IfDefine以及IfModule指令来快速更改配置
- SQL Explorer配置以及基本使用
- 【原】Boost下载安装编译配置使用指南(含Windows、Linux以及ARM Linux)
- Grub安装、配置以及使用实例汇总讲解
- 使用 cacti 批量监控服务器以及其 PHP 运作环境配置
- Control Study->AdRotator广告控件显示自定义配置文件中广告以及与DataGrid控件结合使用显示图片(示例代码下载)
- RedHat5上配置YUM方法以及YUM的使用方法
- 文字编辑器FCKeditor 简介以及基本配置和使用方法
- FCKeditor是使用非常广泛的HTML编辑器,本文从 ASP.NET 的使用场景对 FCKeditor 与 FCKeditor.NET 的配置、功能扩展(如自定义文件上传子目录、自定义文件名、上传图片的后期处理等)、以及安全性进行初步的阐述。
- [转]php mail函数在win下的使用,以及配置win下的sendmail
- 使用Log4j为项目配置日志输出应用详解以及示例演示的实现分析
- Quartz.net官方开发指南 第十课: 配置、资源使用以及SchedulerFactory
- Quartz.net官方开发指南 第十课: 配置、资源使用以及SchedulerFactory
- svn服务安装和配置 以及搭配Eclips插件使用(总结)
- Quartz.net官方开发指南 第十课: 配置、资源使用以及SchedulerFactory
- 关于tomcat/jdk/Jcreator配置和使用的全面讲解以及常见问题解答
- Quartz.net官方开发指南 第十课: 配置、资源使用以及SchedulerFactory
- Control Study->AdRotator广告控件显示自定义配置文件中广告以及与DataGrid控件结合使用显示图片(示例代码下载)
- busybox下mdev的使用以及mdev.conf的规则配置
- VisualSVN Server以及TortoiseSVN客户端的配置和使用方法