echarts 圓形圖、柱狀圖

首先引入echarts的js包

<script type="text/javascript" src="js/esl.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>

然后先准備一個容器，存放echarts畫好的圖，也就是定義一個存放canvas畫布div

 

<div id="main" style="width:100%;height:350px;></div>

 

接下來路徑配置和開始畫之前的一些准備，

 

 

<script type="text/javascript">
       // 路徑配置
       require.config({
             paths: {
                    'echarts': 'js/echarts',
                    'echarts/chart/pie': 'js/echarts'
              }
        });
      
        require(
             [
                  'echarts',
                  'echarts/chart/pie' // 使用柱狀圖就加載bar模塊，按需加載
              ],
              function(ec) {
                  // 基於准備好的dom，初始化echarts圖表
                  var myChart = ec.init(document.getElementById('main'));
                    
                   option = {
                        //代碼主要部分
              　　　};
                   // 為echarts對象加載數據 
                   myChart.setOption(option);
           }
     );
</script>

 

接下來就在    option={}； 這里面寫最重要的代碼部分 

 

　　下面這個鏈接是echarts官網的一個例子鏈接，http://echarts.baidu.com/demo.html#bar-stack

另外附上一段我自己寫的圓環和柱狀圖：

1.圓環

option = {
     title: {
           text: '2017年度市級運動員統計匯總',
           subtext: '',
            x: 'center'
      },
      tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
            orient: 'horizontal',
            x: 'center',
            y: '260px',
            data: ['普通運動員', '重點人數', '輸送人數', '退役人數']
      },
      toolbox: {
            show: true25       },
      calculable: true,
      series: [{
            name: '訪問來源',
            type: 'pie',
            radius: ['25%','55%'],
            center: ['50%', '50%'],
            data: [
                 { value: 100, name: '普通運動員' },
                 { value: 200, name: '重點人數' },
                 { value: 400, name: '輸送人數' },
                 { value: 800, name: '退役人數' },
            ]
        }],
        color:['#f05a4b','#f49902','#1dab91','#0078d7']
 };

2.柱狀圖

option = {
      tooltip: {
           trigger: 'axis'
      },
      toolbox: {
           feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
       },
       legend: {
             x: 'center',
             y: '320px',
             data:['預計成績','實際成績']
        },
        xAxis: [
            {
                 type: 'category',
                 data: ['田徑','游泳','舉重','網球','羽毛球','乒乓球','跆拳道']                               
            }
        ],
        yAxis: [
             {
                   type: 'value',
                   name: '（獎牌數）',
              }
        ],
        series: [
              {
                   name:'預計成績',
                   type:'bar',
                   data:[2,5,6,7,5,2,8],
                   itemStyle: {
                        //柱形圖圓角，鼠標移上去效果，如果只是一個數字則說明四個參數全部設置為那么多
                         normal: {
                              //柱形圖圓角，初始化效果
                               barBorderRadius:[2, 2, 0, 0]
                         }
                    },
                    barGap:'0%'
           },
           {
                name:'實際成績',
                type:'bar',
                data:[5,4,10,4,5,6,4],
                itemStyle: {
                      //柱形圖圓角，鼠標移上去效果，如果只是一個數字則說明四個參數全部設置為那么多
                      normal: {
                            //柱形圖圓角，初始化效果
                            barBorderRadius:[2,2, 0, 0]
                      }
                },
                barGap:'0%'
            }
      ],
      color:['#0078d7','#f49902']
 };

 

最后別忘了這一句，很重要，要不然就顯示不出來了。

 myChart.setOption(option);

 

運行效果圖：

 

 ==================================================================================================================