echarts-------餅形圖


首先echarts是一個可以提供給用戶體驗效果更好的一個圖形界面, Canvas 類庫 ZRender

1、下載echarts的js,可以在官方網址進行下載echarts.min.js

2、將下載下來的echarts.min.js放到新建一個js文件夾

3、創建一個html頁面

項目文件擺放路徑如圖所示

 

4、進行編碼

  1. 首先在html中引入echarts.min.js
    1.   <script src="js/echarts.min.js"/>

  2.設置一個存放餅形圖的DOM,需要設置DOM的width,height,這樣echarts就不需要設置了,需要echarts重新設置

    1.   <div id="main" style="width : 1000px ; height : 400 px ;"/>

  3.初始化echarts,創建echarts的實例

    1.   var myecharts=echarts.init(document.getElementById("main"));

  4.設置數據項和圖標

       1.  var option={...}(見代碼)

  5.將數據項和圖標顯示到餅形圖上

      1.  myecharts.setOption(option);

表現形式見下圖,鼠標點擊會出現效果

 

 

代碼見下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>echars map</title>
<!-- 引入echarts.js的js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 創建一個DOM -->
<div id="div" style="width:1000px;height:400px;"></div>
 <script type="text/javascript">
 //獲取DOM
 var myecharts=echarts.init(document.getElementById("div"));
 var option=({
     title:{
         text:'餅形圖',//主標題文本,支持\n換行
         subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',//副文本
            sublink : 'http://esa.un.org/wpp/Excel-Data/population.htm',//副文本鏈接
         left:'center',//離容器左側的距離
         top:'top'//距離容器上測的距離
     },
     backgroundColor: '#2c343c',//背景顏色
     textStyle: {
                 color: 'rgba(255, 255, 255, 0.3)'//文字的顏色
             },
     series : [
         {
             name: '訪問來源',
             type: 'pie',//每個系列,通過type決定自己的系列型號
             radius: '55%',
             data:[
                 {value:400, name:'搜索引擎'},
                 {value:335, name:'直接訪問'},
                 {value:310, name:'郵件營銷'},
                 {value:274, name:'聯盟廣告'},
                 {value:235, name:'視頻廣告'}
             ],
             roseType: 'angle',

             itemStyle: {//圖形樣式 normal,emphasis
                 emphasis: {
                     shadowBlur: 200,
                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
             },
             label: {//餅形圖上的文本標簽
                 normal: {
                     textStyle: {
                         color: 'rgba(255, 255, 255, 0.3)'
                     }
                 }
             },
             labelLine: {//標簽的視覺引導線
                 normal: {
                     lineStyle: {
                         color: 'rgba(255, 255, 255, 0.3)'
                     }
                 }
             }

         }
     ]
 });
 myecharts.setOption(option);
 </script>
<!-- 
1.引入echarts.min.js
2.准備DOM
3.初始化echars實例
4.准備數據項
5.調用setOption方法將數據和圖標顯示在圖表上
 -->
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM