Echarts圖表的使用

一次分享會上知道了Echarts這個插件，剛好需要用到就去了解了一下，可以很方便地生成各種圖表，在這裏簡單分享一下如何生成餅狀圖和柱狀圖，如果你想要更好的呈現你的圖，可以去Echarts官網配置項看如何修改。
1.首先你需要去Echarts下載頁面下載需要的版本，我使用的是普通版
2.引入js文件

 <script src="../build/js/echarts.common.min.js"></script>

3.構建一個容器呈現

<div id="main" style="width: 600px;height: 400px;">

</div>

4.柱狀圖與圓餅圖的區別主要在於xAxis和yAxis這兩個屬性，這裏直接貼出兩個的代碼
4.1柱狀圖

 var myChart = echarts.init(document.getElementById('main'));
    var option = {
        title:{
            text:'1.柱狀圖實例'
        },
        tooltip:{},
        legend:{
            data:['張傑單曲循環量']
        },
    xAxis:{
        data:["最美的太陽","明天過後","他不懂","逆戰","我們都一樣","無藥可救"]
    },
     yAxis:{

     },
      series:[{
            name:'張傑單曲循環量',
            type:'bar',
            data:[15,20,10,8,23,40]
      }]

    };
    //使用配置項顯示圖表
    myChart.setOption(option);

效果圖如下：

4.2圓餅圖

 var myCharts = echarts.init(document.getElementById('main'));
    var option = {
        //添加背景色
        backgroundColor:'blue',
        legend:{
            data:['計算機類專業就業比例']
        },
        series : [
            {
                name: '計算機類專業就業比例',
                type: 'pie',
                radius: '55%',
                roseType:'angel',//變爲南丁格爾圖
                data:[
                    {value:235, name:'計算機科學與技術'},
                    {value:274, name:'信息管理'},
                    {value:260, name:'通信工程'},
                    {value:250, name:'物聯網工程'}
                ],

                itemStyle:{
                    //添加陰影
                    emphasis:{
                        shadowBlur:300,
                        shadowColor: 'red'
                    }
                },

            }
        ],
    };

    myCharts.setOption(option);

效果圖如下：

完整代碼文件，默認需要積分，只想分享一下，所以需要的留言就好