ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

 </head>

 <body>

     <!--为ECharts准备一个具备大小(宽高)的Dom-->

     <div id="main" style="height:400px;"></div>

     <!--ECharts单文件引入-->

     <script src="echarts-all.js"></script>

     <script type="text/javascript">

     //基于准备好的dom,初始化echarts图表

     var myChart=echarts.init(document.getElementById('main'));

     //图表使用

     var option = {

     tooltip : {//提示框,鼠标悬浮交互时的信息提示

         trigger: 'item',//触发类型,默认数据触发,可选为:'axis'

         formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框的提示内容格式

     },

     legend: {//图例,每个图表最多仅有一个图例

         orient : 'vertical',//布局方式,默认为水平布局,可选为:'horizontal'|'vertical'

         x : 'left',//水平安放位置,默认为全图居中,可选为:'center'|'left'|'right'|{number}(x坐标,单位px)

         data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']//图例内容数组,数组项通常为{string},每一项代表一个系列的name，默认布局到达边缘会自动分行(列),传入空字符串''可实现手动分行(列)

     },

     toolbox: {//工具箱,每个图表最多仅有一个工具箱

         show : true,//显示策略,默认只是false.可选为:true显示|false隐藏

         feature : {//启用功能,目前支持feature，工具箱自定义功能回调处理.

             mark : {show: true},//辅助线标志,此处启用.

             dataView : {//打开数据视图，可设置更多属性

                 show: true,

                 readOnly: false//readOnly默认数据视图为只读,可指定readOnly为false打开编辑功能

             },

             magicType : {//动态类型切换,支持直角系下的折线图,柱状图,堆积,平铺转换

                 show: true,

                 type: ['pie', 'funnel'],//饼图,漏斗图

                 option: {//图表选项,包含图表实例任何可配置选项:公共选项,组件选项,数据选项

                     funnel: {//漏斗图配置

                         x: '25%',

                         width: '50%',

                         funnelAlign: 'center',

                         max: 1548

                     }

                 }

             },

             restore : {show: true},//还原,复位原始图表

             saveAsImage : {show: true}//保存图片IE8-不支持,上图icon最右,可设置更多属性.

         }

     },

     calculable : true,//是否启用拖拽重计算特性,默认关闭

     series : [//驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据

         {

             name:'访问来源',//系列名称

             type:'pie',//图表类型,折线图line,散点图scatter,柱状图bar,饼图pie,雷达图radar

             radius : ['50%', '70%'],//半径,支持绝对值px和百分比,百分比计算比,min(width, height)/2*75%,传数组实现环形图,[内半径,外半径]

             itemStyle : {//图形样式,可设置图表内图形的默认样式和强调样式（悬浮时样式）

                 normal : {//默认样式

                     label : {

                         show : false

                     },

                     labelLine : {

                         show : false

                     }

                 },

                 emphasis : {//强调样式

                     label : {

                         show : true,

                         position : 'center',//标签显示位置,地图标签不可指定位置

                         textStyle : {

                             fontSize : '30',

                             fontWeight : 'bold'

                         }

                     }

                 }

             },

             data:[

                 {value:335, name:'直接访问'},

                 {value:310, name:'邮件营销'},

                 {value:234, name:'联盟广告'},

                 {value:135, name:'视频广告'},

                 {value:1548, name:'搜索引擎'}

             ]

         }

         ]

     };

     //为echats对象加载数据

     myChart.setOption(option);

     </script>

 </body>

 </html>

ECharts饼图制作分析的更多相关文章

  1. ECharts饼图试玩

    处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...

  2. 将数据动态加载到Echarts饼图中

    需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...

  3. Vue Echarts 饼图设置默认选中一个

    Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...

  4. ECharts饼图自定义

    [本文出自天外归云的博客园] 实现: 1.饼块可点击(点击饼块跳转到百度) 2.饼块自定义标签显示(显示个数.占比) 3.自定义标签连接线样式(虚线) 前端php代码如下: <!DOCTYPE ...

  5. echarts饼图

    1.添加点击事件并跳转到不同的页面 // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist/' ...

  6. 百度ECHARTS 饼图使用心得 处理data属性

    做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...

  7. echarts饼图--数据交互

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. echarts饼图配置模板

    var option = { title:{ text:'完成人构成分析--申报', //标题的样式 textSytle:{ //颜色 color : '#FF0000', //粗细 // fontW ...

  9. echarts饼图不显示数据为0的数据

    首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关. 如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...

随机推荐

  1. sudo及visudo

    sudo是一种权限管理机制,管理员可以授权普通用户去执行root的操作,而不需要知道root的密码,它依赖于/etc/sudoers这个文件,可以授权给哪个用户在哪个主机上能够以管理员的身份执行什么样 ...

  2. Django的aggregate()和annotate()函数的区别

    aggregate() aggregate()为所有的QuerySet生成一个汇总值,相当于Count().返回结果类型为Dict. annotate() annotate()为每一个QuerySet ...

  3. 基于STM32F103的Max30100心率、血氧检测代码（转载）

    MAX30100是能够读取心率.血氧的传感器,通信方式是通过IIC进行通信.其工作原理是通过红外led灯照射,能够得到心率的ADC值.       MAX30100的寄存器可以分为五类,状态寄存器.F ...

  4. ffmpeg安装配置以及库调用

    参考https://blog.csdn.net/jayson_jang/article/details/52329508 cd ffmpeg ./configure --enable-shared - ...

  5. C语言 字符数组与字符指针比较

    C语言 字符数组与字符指针比较 #include<stdio.h> /* 字符数组会在定以后预先分配内存空间字符串是常量所以会直接把字符串拷贝到数组中, 因为数组地址不同,所以不相等· 字 ...

  6. DecimalFormat的用法

    DecimalFormat 是 NumberFormat 的一个具体子类,用于格式化十进制数字. DecimalFormat 包含一个模式 和一组符符号含义:  0 一个数字 # 一个数字,不包括 0 ...

  7. APIO2018 游记

    day \(-\infty\) \(\sim\) day0 5 月 5 号左右的时候去了趟中北大学,山西省大学生程序设计竞赛.不是太满意,现场 rk3.拿到了充电宝(冲着这个去的,虽然抵不过车费),抽 ...

  8. 从循环里面用QPixmap new对象很耗时联想到的

    1.在循环里面用QPixmap new图片对象延迟很高,这个是通过打时间日志得出的,深层原因还不清楚: 2.自制的图片浏览器在初始化的时候会初始化自己的一个图片列表,所以要用到上面的描述.所有图片的初 ...

  9. 【APUE】Chapter3 File I/O

    这章主要讲了几类unbuffered I/O函数的用法和设计思路. 3.2 File Descriptors fd本质上是非负整数,当我们执行open或create的时候,kernel向进程返回一个f ...

  10. 30分钟快速搭建Web CRUD的管理平台--django神奇魔法

    加上你的准备的时间,估计30分钟完全够用了,因为最近在做爬虫管理平台,想着快速开发,没想到python web平台下有这么非常方便的框架,简洁而优雅.将自己的一些坑总结出来,方便给大家的使用. 准备环 ...