新接触的 ECharts 图表框架饼状图

原创 2015年07月07日 11:43:27
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <meta name="author" content="智恒互动">
    <title>ECharts</title>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
     *{padding: 0;margin: 0;}
      .echar{height: 300px;}
     }
    </style>
  </head>
  <body>
    <div class="echar" id="mainechar"></div>
     <script type="text/javascript" src="js/echarts.js"></script> 
     <script type="text/javascript">
       require.config({
         paths:{
          echarts:"./js"
         }
       });
       require(
        [
        'echarts',
        'echarts/chart/pie'  //饼形图
        ],
       function(ec)
       {
         var myecharts=ec.init(document.getElementById("mainechar"));
         option = {
    title : {
        text: '',
        subtext: '',
        x:'center'
    },
    tooltip : {  //鼠标移上的提示
        show:false,
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: { // 颜色 图例
        show:false,
        orient : 'vertical',
        x : 'left',
        data:['直接访问','搜索引擎'],
    },
     color: [  //改变饼图的各个区的渲染色
        '#1790cf','#1bb2d8','#99d2dd','#88b0bb',
        '#1c7099','#038cc4','#75abd0','#afd6dd'
    ],
    toolbox: {   // 右上角的操作组
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'left',
                        max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : false,  // 可以去掉饼图的外层圈圈,默认true
    series : [
        { 
            name:'访问来源',
            type:'pie',
            radius :'70%',           //调整饼图的大小
            center: ['60%', '50%'],  //调整饼图的位置
            data:[
                {value:335, name:'直接访问'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};
         myecharts.setOption(option);
       }
       );
       </script>
  </body>
</html>

百度ECharts---android在线展示统计图表(折线图\柱状图\饼状图)

做金融类型的应用经常会用到数据的统计报表 诸如折线图 ,  K线图, 饼状图,柱状图  既能形象的表述数据的分布 , 同时又增加了数据的可读性 实现思路: 百度Echarts支持安卓移动端的运用 ...
  • sxt_zls
  • sxt_zls
  • 2017年04月17日 10:05
  • 1893

echarts图表——条形图(柱状图)的动态横向显示设置

项目中要用到图表,简单地用echarts.js实现。 效果为: 是简单的无坐标轴显示的图表。 代码: html:js(配置):var length=12;//此处为动态数据的长度 var ...

Android绘图机制(四)——使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美

标签: android开源框架开源框架 2016-01-10 16:51 3155人阅读 评论(1) 收藏 举报  分类: Android(110)  版权声明:本...

完美解决echarts的柱状图和折线图的点击非图表图形元素不会触发事件

在涉及到图标的开发中,相信大家经常会用到echarts,echarts中可以通过on方法添加事件处理函数,可以很方便的实现一些交互。但是直接添加的click事件,只有点击在图形元素上才会触发事件处理函...
  • smk108
  • smk108
  • 2017年11月08日 19:20
  • 229

Echarts制作图表教程一------柱状图

仅供参考

MPAndroidChart开源图表框架—-柱状图(二)

其余文章索引: MPAndroidChart 的第一篇介绍 和MPAndroidChart开源图表框架—-折线图(一)今天抽时间整理了下 MPAndroidChart开源图表框架—-柱状图(二...

基于SpringMVC框架使用ECharts3.0实现折线图,柱状图,饼状图,的绘制(上篇)

基于SpringMVC框架使用ECharts3.0实现折线图,柱状图,饼状图,的绘制 页面部分 @ page language="java" pageEncoding="UTF-8"%...

Android : hellocharts-android-master图表框架集成 及 新手花式教学(干货满满)------柱状图

开发中设计到一个用图表的形式来展现学生成绩的需求,于是果断在github上找相关的开源库,最后锁定了hellocharts-android-master 和 MPAndroidChart-master...

Android 图表开源框架HelloCharts 之 柱状图、折线图、饼状图,Fragment

在网上找到一些开源的框架使用,不是MPAndroidChart,也不是AChartEngine ,而是HelloCharts。 开源地 址:https://github.com/lecho/hel...

Echarts饼状图和折线图

  • 2015年06月18日 17:27
  • 916KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:新接触的 ECharts 图表框架饼状图
举报原因:
原因补充:

(最多只允许输入30个字)