关闭

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

标签: echar图表饼状图
663人阅读 评论(0) 收藏 举报
<!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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:832次
    • 积分:27
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档