找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发echarts环形图

2018-11-27 22:45:10 分类：教程 阅读(133) 评论(0)
前端开发工具dream
前端开发工具2017
前端的的开发工具

封装一个echarts环形图的函数，两个参数，数据data和id，可改为类名复用。看代码，外部引用echarts.js文件

echarts
配置项：
控制圆的大小宽度：series.radius，例如[‘80%’, ‘90%’]
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Title</title>
    </head>
    <body>
        <div
            id=”demo”
            style=”width: 400px;height: 400px;border: 1px solid antiquewhite;margin:0 auto;background-color:#f5f5f5;”
        ></div>
    </body>
    <script src=”https://cdn.bootcss.com/echarts/3.5.4/echarts.js”></script>
    <script>
        pieShow(75, ‘demo’)
        function pieShow(data, id) {
            var pieId = echarts.init(document.getElementById(id))
            // 指定图表的配置项和数据
            var pieId_option = {
                tooltip: {
                    trigger: ‘item’,
                    formatter: ‘{a} <br/>{b}: {c} ({d}%)’,
                },
                color: [‘#ff7f50’, ‘#243c77’],
                series: [
                    {
                        name: ‘收入完成率’,
                        type: ‘pie’,
                        radius: [‘60%’, ‘80%’],
                        label: {
                            normal: {
                                show: true,
                                position: ‘center’,
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: ’30’,
                                    fontWeight: ‘bold’,
                                },
                            },
                        },
                        itemStyle: {
                            //柱形图圆角，鼠标移上去效果
                            emphasis: {
                                barBorderRadius: [900],
                                pieBorderRadius: [900],
                            },
                            normal: {
                                //柱形图圆角，初始化效果
                                barBorderRadius: [900],
                                pieBorderRadius: [900],
                            },
                        },
                        data: [
                            { value: parseInt(data) },
                            { value: 100 – data },
                        ],
                    },
                ],
            }
            // 使用刚指定的配置项和数据显示图表。
            pieId.setOption(pieId_option)
        }
    </script>
</html>
php和前端开发工具
前端开发 中的开发工具
android app前端开发工具
java做前端开发工具
» 本文来自：前端开发者 » 《前端开发echarts环形图》
» 本文链接地址：https://www.rokub.com/6815.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论