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

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title></title>
  6.  </head>
  7.  <body>
  8.      <!--为ECharts准备一个具备大小(宽高)的Dom-->
  9.      <div id="main" style="height:400px;"></div>
  10.      <!--ECharts单文件引入-->
  11.      <script src="echarts-all.js"></script>
  12.      <script type="text/javascript">
  13.      //基于准备好的dom,初始化echarts图表
  14.      var myChart=echarts.init(document.getElementById('main'));
  15.  
  16.      //图表使用
  17.      var option = {
  18.      tooltip : {//提示框,鼠标悬浮交互时的信息提示
  19.          trigger: 'item',//触发类型,默认数据触发,可选为:'axis'
  20.          formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框的提示内容格式
  21.      },
  22.      legend: {//图例,每个图表最多仅有一个图例
  23.          orient : 'vertical',//布局方式,默认为水平布局,可选为:'horizontal'|'vertical'
  24.          x : 'left',//水平安放位置,默认为全图居中,可选为:'center'|'left'|'right'|{number}(x坐标,单位px)
  25.          data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']//图例内容数组,数组项通常为{string},每一项代表一个系列的name，默认布局到达边缘会自动分行(列),传入空字符串''可实现手动分行(列)
  26.      },
  27.      toolbox: {//工具箱,每个图表最多仅有一个工具箱
  28.          show : true,//显示策略,默认只是false.可选为:true显示|false隐藏
  29.          feature : {//启用功能,目前支持feature，工具箱自定义功能回调处理.
  30.              mark : {show: true},//辅助线标志,此处启用.
  31.              dataView : {//打开数据视图，可设置更多属性
  32.                  show: true,
  33.                  readOnly: false//readOnly默认数据视图为只读,可指定readOnly为false打开编辑功能
  34.              },
  35.              magicType : {//动态类型切换,支持直角系下的折线图,柱状图,堆积,平铺转换
  36.                  show: true,
  37.                  type: ['pie', 'funnel'],//饼图,漏斗图
  38.                  option: {//图表选项,包含图表实例任何可配置选项:公共选项,组件选项,数据选项
  39.                      funnel: {//漏斗图配置
  40.                          x: '25%',
  41.                          width: '50%',
  42.                          funnelAlign: 'center',
  43.                          max: 1548
  44.                      }
  45.                  }
  46.              },
  47.              restore : {show: true},//还原,复位原始图表
  48.              saveAsImage : {show: true}//保存图片IE8-不支持,上图icon最右,可设置更多属性.
  49.          }
  50.      },
  51.      calculable : true,//是否启用拖拽重计算特性,默认关闭
  52.      series : [//驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据
  53.          {
  54.              name:'访问来源',//系列名称
  55.              type:'pie',//图表类型,折线图line,散点图scatter,柱状图bar,饼图pie,雷达图radar
  56.              radius : ['50%', '70%'],//半径,支持绝对值px和百分比,百分比计算比,min(width, height)/2*75%,传数组实现环形图,[内半径,外半径]
  57.              itemStyle : {//图形样式,可设置图表内图形的默认样式和强调样式（悬浮时样式）
  58.                  normal : {//默认样式
  59.                      label : {
  60.                          show : false
  61.                      },
  62.                      labelLine : {
  63.                          show : false
  64.                      }
  65.                  },
  66.                  emphasis : {//强调样式
  67.                      label : {
  68.                          show : true,
  69.                          position : 'center',//标签显示位置,地图标签不可指定位置
  70.                          textStyle : {
  71.                              fontSize : '30',
  72.                              fontWeight : 'bold'
  73.                          }
  74.                      }
  75.                  }
  76.              },
  77.              data:[
  78.                  {value:335, name:'直接访问'},
  79.                  {value:310, name:'邮件营销'},
  80.                  {value:234, name:'联盟广告'},
  81.                  {value:135, name:'视频广告'},
  82.                  {value:1548, name:'搜索引擎'}
  83.              ]
  84.          }
  85.          ]
  86.      };
  87.  
  88.      //为echats对象加载数据
  89.      myChart.setOption(option);
  90.      </script>
  91.  </body>
  92.  </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. 路由器基础配置之ppp封装下的pap,chap认证

    我们将以上面的拓扑图完成本次实验,路由器的默认封装为HDLC,要求为把路由器全被更改为ppp封装,并在router3与router4之间用pap认证,在router4与router5之间用chap认证 ...

  2. Python基础——字典和有序字典

    字典 说明: 在 Python 中, 字典 是一系列 键 — 值对 .每个键都与一个值相关联,你可以使用键来访问与之相关联的值.与键相关联的值可以是数字.字符串.列表乃至字典.事实上,可将任何 Pyt ...

  3. Git配置技巧及常用命令总结

    如果你想精通Git,直接到 Git官网 把这本ProGit掌握已足以Pro Git 配置用户信息 user和email,--global参数全局配置,当然你也可以不加此参数,不同的项目用不同的用户名和 ...

  4. 【转载】vue.js实现格式化时间并每秒更新显示功能示例

    引用:https://www.jb51.net/article/143351.htm 这篇文章主要介绍了vue.js实现格式化时间并每秒更新显示功能,结合实例形式分析了vue.js时间格式化显示与基于 ...

  5. Scala语法（三）

    模式匹配 1)match val a = 1 val b=a match { *// a match { }返回值赋予变量 b case 1 => "red" case 2 ...

  6. 09 mongoDB基础（进阶）

    mongoDB基础 阶段一.认识mongodb 1.mongodb 组织数据的基本形式 MongoDB————>数据库————>集合————>文档 mysql:表:行和列:字段 运用 ...

  7. （数据科学学习手札19）R中基本统计分析技巧总结

    在获取数据,并且完成数据的清洗之后,首要的事就是对整个数据集进行探索性的研究,这个过程中会利用到各种描述性统计量和推断性统计量来初探变量间和变量内部的基本关系,本篇笔者便基于R,对一些常用的数据探索方 ...

  8. SIMD数据并行（四）——三种结构的比较

    在计算机体系中,数据并行有两种实现路径:MIMD(Multiple Instruction Multiple Data,多指令流多数据流)和SIMD(Single Instruction Multip ...

  9. 隐式Dijkstra：在状态集合中用优先队列求前k小

    这种技巧是挺久以前接触的了,最近又突然遇到几道新题,于是总结了一下体会. 这种算法适用的前提是,标题所述的"状态集合"大到不可枚举(否则枚举就行了qaq) ...

  10. codevs 1214 线段覆盖/1643 线段覆盖 3

    1214 线段覆盖/1214 线段覆盖  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold       题目描述 Description 给定x轴上的N(0< ...