环状图

 

一.引入JS文件，echarts.min.js

 

 

 

二.在body中创建div，这个div也就是用来显示的位置

 

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

 

三.写入js代码

 

<script type="text/javascript">

option = {

    title:{

        text:'共XXX单',

        left:'center',

        top:'center',

    },

    tooltip: {

        trigger: 'item',

        formatter: "{a} <br/>{b}: {c} ({d}%)"

    },

    series: [

        {

            name:'访问来源11',

            type:'pie',

            radius: ['50%', '70%'],

            avoidLabelOverlap: false,

            label: {

                normal: {

                    show: true,

                    position: 'center'

                },

                emphasis: {

                    show: true,

                    textStyle: {

                        fontSize: '30',

                        fontWeight: 'bold'

                    }

                }

            },

            // 使用数据线

            label:{

                    normal:{

                            formatter: '{b} 占{d}% \n 共{c}单'      // 模板变量有 {a}, {b}，{c}, {d}，分别表示系列名，数据名，数据值，百分比。

 

                    }

            },

            labelLine: {

                normal: {

                    show: true,

                    position: 'outside',

                }

            },

            data:[

                {value:335, name:'直接访问'},

                {value:310, name:'邮件营销'},

                {value:234, name:'联盟广告'},

                {value:135, name:'视频广告'},

                {value:1548, name:'搜索引擎'}

            ]

        }

    ]

};

 

</script>

 

 

 

 

四.在div之后，再次写入js代码，用来引用

 

<script type="text/javascript">

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption(option);

//异步加载数据

/* $.get('data.json').done(function (data) {

    // 填入数据

    myChart.setOption({

        xAxis: {

            data: data.categories

        },

        series: [{

            // 根据名字对应到相应的系列

            name: '销量',

            data: data.data

        }]

    });

}); */

</script>