ECharts 饼图

来源:互联网 发布:淘宝折扣设置在哪里 编辑:程序博客网 时间:2024/04/30 18:05

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
   <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

     <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
  var option={
   series : [
    {
     name: '访问来源',
     type: 'pie',
     radius: '55%',
     data:[
      {value:400, name:'搜索引擎'},
      {value:335, name:'直接访问'},
      {value:310, name:'邮件营销'},
      {value:274, name:'联盟广告'},
      {value:235, name:'视频广告'}
     ]
    }
   ]
  };
        myChart.setOption(option);
    </script>
</body>

</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
   <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

     <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
  var option={
   series : [
    {
     name: '访问来源',
     type: 'pie',
     
     radius: '55%',
     data:[
      {value:400, name:'搜索引擎'},
      {value:335, name:'直接访问'},
      {value:310, name:'邮件营销'},
      {value:274, name:'联盟广告'},
      {value:235, name:'视频广告'}
     ],
     roseType: 'angle'
    }
   ]
  };
        myChart.setOption(option);
    </script>
</body>

</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
   <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

     <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
  var option={
   series : [
    {
     name: '访问来源',
     type: 'pie',
     
     radius: '55%',
     data:[
      {value:400, name:'搜索引擎'},
      {value:335, name:'直接访问'},
      {value:310, name:'邮件营销'},
      {value:274, name:'联盟广告'},
      {value:235, name:'视频广告'}
     ],
     roseType: 'angle'
    }
   ],
   itemStyle: {
    normal: {
     // 阴影的大小
     shadowBlur: 200,
     // 阴影水平方向上的偏移
     shadowOffsetX: 0,
     // 阴影垂直方向上的偏移
     shadowOffsetY: 0,
     // 阴影颜色
     shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
   }
  };
        myChart.setOption(option);
    </script>
</body>

</html>








0 0
原创粉丝点击