测试用例 XML解析 微服务 微信直播 tkinter cakephp soap highcharts ant 百度seo关键词优化 河南普通话 pmp培训视频 less官网 最新更新国内最快的dns 内存计算 java接口 java编程 数据结构java版 java编程入门 java基础学习 java初学者 java接口的使用 java获取当前年月 java时间戳转换 java类方法 java中的map 蓝牙运动耳机排行榜 pushstate m4a转mp3格式转换器 键盘模拟器 js延迟加载的方式 图片放大软件 flash基础 远程桌面管理软件 视频后期处理软件 华为杂志锁屏怎么设置 qq浏览器全屏 jsps2寸照片制作 regedit打不开 js正则表达式
当前位置: 首页 > 学习教程  > 编程学习

Echarts——一个简单的嵌套饼图

2021/1/9 2:17:05 文章标签: 复合条饼图

</!DOCTYPE html> <html> <head><meta charset"utf-8"><title>QQ部星座分布图</title><script src"http://echarts.baidu.com/dist/echarts.js"></script> </head> <body><div id"ma…

 
</!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QQ部
    星座分布图</title>
    <script src="http://echarts.baidu.com/dist/echarts.js"></script>
</head>
<body>
    <div id="main" style="width:800px;height:800px"></div>
    
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },

            series: [
                {
                    name:'星座',
                    type:'pie',
                    selectedMode: 'single',
                    radius: ['75%', '96%'],

                    label: {
                        normal: {
                            position: 'inside',
                            fontSize: 20,
                            color:'',
                            fontFamily:'Microsoft Yahei'
                        }
                    },
                    data:[
                        {value:4, name:'双子座'},
                        {value:3, name:'白羊座'},
                        {value:3, name:'金牛座'},
                        {value:2, name:'天蝎座'},
                        {value:2, name:'双鱼座'},
                        {value:2, name:'处女座'},
                        {value:2, name:'射手座'},
                        {value:1, name:'摩羯座'},
                        {value:1, name:'天秤座'},
                        {value:1, name:'水瓶座'},
                        {value:1, name:'狮子座'}
                    ]
                },
                {
                    name:'姓名',
                    type:'pie',
                    radius: ['30%', '70%'],
                    label: {
                        normal: {
                            position:'inside',
                            align:'right',
                            fontSize: 18,
                            fontFamily:'Microsoft YaHei',
                            color:"#FFEFE0"
                        }
                    },
                    data:[
                        {value:1, name:'X1'},
                        {value:1, name:'X2'},
                        {value:1, name:'X3'},
                        {value:1, name:'X4'},
                        {value:1, name:'M1'},
                        {value:1, name:'M2'},
                        {value:1, name:'M3'},
                        {value:1, name:'N1'},
                        {value:1, name:'N2'},
                        {value:1, name:'N3'},
                        {value:1, name:'D1'},
                        {value:1, name:'D2'},
                        {value:1, name:'D3'},
                        {value:1, name:'F1'},
                        {value:1, name:'F2'},
                        {value:1, name:'F3'},
                        {value:1, name:'G1'},
                        {value:1, name:'A1'},
                        {value:1, name:'W1'},
                        {value:1, name:'E1'},
                        {value:1, name:'E2'},
                        {value:1, name:'E3'}
                    ]
                },
                {
                    name:'部门',
                    type:'pie',
                    radius: ['0%', '25%'],
                    label: {
                        normal: {
                            position: 'center',
                            fontSize: 22,
                            fontFamily:'Microsoft YaHei',
                            color:'#80F0E3'
                        }
                    },
                    data:[
                        {value:22, name:'QQ部'}
                    ]
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

显示效果如下:

解释:

  1.  设置网页标题:
    1. <title>QQ部星座分布图</title>
  2. 导入在线的echarts库:
    1. <script src="http://echarts.baidu.com/dist/echarts.js"></script>
  3. 设置页面尺寸:
    1. <div id="main" style="width:800px;height:800px"></div>
  4. 初始化echarts实例:
    1. var myChart = echarts.init(document.getElementById('main'));
  5. 设置图表内容:
    1. var option = {}
  6. 在echarts实例中载入option:
    1. myChart.setOption(option);
  7. 对option的解释
    1. 包含了一个tooltip——用于动态显示数据标签,和三个series,series的类型为“pie”饼图。
    2. tooltip的显示格式为:formatter: "{a} <br/>{b}: {c} ({d}%)",即显示数字和百分比。
    3. radius用于设置饼图的内外范围,如:radius: ['75%', '96%']。
    4. 接下来设置标签的文本格式和数据内容即可。

转载于:https://www.cnblogs.com/shadrach/p/8119483.html


本文链接: http://www.dtmao.cc/news_show_1100428.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?