码迷,mamicode.com
首页 > 其他好文 > 详细

echarts标准饼图(二)——标题(title)配置

时间:2016-11-21 18:55:06      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:mina   center   aaa   fonts   文本   新窗口   size   htm   独立   

 标题(title)配置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- jquery cdn引入 -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <!-- echarts 引入 -->
    <script src="echarts.js"></script>
    <style type="text/css">
    </style>
</head>
<body>
<div id="main" style="width:500px;height:500px;"></div>

<script>
    var myChart=echarts.init(document.getElementById(main));
    //init初始化接口,返回ECharts实例,其中dom为图表所在节点
       
    var option = {
        //标题
        title : {
            show:true,//显示策略,默认值true,可选为:true(显示) | false(隐藏)
            text: 主标题,//主标题文本,‘\n‘指定换行
            link:‘‘,//主标题文本超链接,默认值true
            target: null,//指定窗口打开主标题超链接,支持‘self‘ | ‘blank‘,不指定等同为‘blank‘(新窗口)
            subtext: 副标题,//副标题文本,‘\n‘指定换行
            sublink: ‘‘,//副标题文本超链接
            subtarget: null,//指定窗口打开副标题超链接,支持‘self‘ | ‘blank‘,不指定等同为‘blank‘(新窗口)
            x:center//水平安放位置,默认为‘left‘,可选为:‘center‘ | ‘left‘ | ‘right‘ | {number}(x坐标,单位px)
            y: top,//垂直安放位置,默认为top,可选为:‘top‘ | ‘bottom‘ | ‘center‘ | {number}(y坐标,单位px)
            textAlign: null,//水平对齐方式,默认根据x设置自动调整,可选为: left‘ | ‘right‘ | ‘center
            backgroundColor: rgba(0,0,0,0),//标题背景颜色,默认‘rgba(0,0,0,0)‘透明
            borderColor: #ccc,//标题边框颜色,默认‘#ccc‘
            borderWidth: 0,//标题边框线宽,单位px,默认为0(无边框)
            padding: 5,//标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距
            itemGap: 10,//主副标题纵向间隔,单位px,默认为10
            textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontFamily: Arial, Verdana, sans...,
                fontSize: 12,
                fontStyle: normal,
                fontWeight: normal,
            },
            subtextStyle: {//副标题文本样式{"color": "#aaa"}
                fontFamily: Arial, Verdana, sans...,
                fontSize: 12,
                fontStyle: normal,
                fontWeight: normal,
            },
            zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas,相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层,canvas对象增多会消耗更多的内存和性能,并不建议设置过多的zlevel,大部分情况可以通过二级层叠控制z实现层叠控制。
            z: 6,//二级层叠控制,默认6,同一个canvas(相同zlevel)上z越高约靠顶层。
        },


        //提示框,鼠标悬浮交互时的信息提示
        tooltip : {
            trigger: item,
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        //图例,每个图表最多仅有一个图例
        legend: {
            orient: vertical,
            left: left,
            data: [第一部分,第二部分,第三部分,第四部分]
        },
        // 系列列表,每个系列通过 type 决定自己的图表类型
        series : [
            {
                name: 访问,
                type: pie,
                radius : 62%,
                center: [50%, 65%],/
                minAngle:15,
                data:[
                    {name:"第一部分",value:4},
                    {name:"第二部分",value:7},
                    {name:"第三部分",value:3},
                    {name:"第四部分",value:1},
                ],
                itemStyle: {
                    normal:{
                        label:{
                            show:true,
                            formatter: "{b} :\n  {c} \n ({d}%)",
                            position:"inner"
                        }
                    }
                }
            }
        ],
    };
    myChart.setOption(option);// 为echarts对象加载数据
</script>
</body>
</html>

 

echarts标准饼图(二)——标题(title)配置

标签:mina   center   aaa   fonts   文本   新窗口   size   htm   独立   

原文地址:http://www.cnblogs.com/web520/p/6086038.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!