环状图

最新推荐文章于 2024-07-24 09:58:40 发布

原创最新推荐文章于 2024-07-24 09:58:40 发布 · 399 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

ECharts 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何使用ECharts库创建一个饼图，并通过具体示例展示了如何设置标题、工具提示、标签样式及数据等内容。

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

二.在body中创建div，这个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>