echarts title 配置

曾经终败给现在 2022-10-15 09:53 169阅读 0赞

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
      
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
      
    <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>

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts 图表标题(title)系列使用详解

title 说明：图表标题。 1 title.show 说明：是否显示标题组件。默认值：true。可选值：（1） true，显示标题。（2） fa

淡淡的烟草味﹌/ 2023年10月06日 13:17/ 0 赞/ 21 阅读

相关 ECharts 使用series.title.offsetCenter设置仪表盘标题位置

1 使用详解 series.title.offsetCenter 说明：标题位置。相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是

Dear 丶/ 2023年10月05日 11:03/ 0 赞/ 59 阅读

相关 ECharts 图表标题(title)系列设置

title:{ show:true,//false text:"图表标题",//主标题文本 textStyle:{

分手后的思念是犯贱/ 2023年10月05日 10:46/ 0 赞/ 23 阅读

相关 Echarts 饼图中间添加文字、title、graphic

![80f1af2b445c47eebb3058fdcb46f05b.png][] // 指定图表的配置项和数据 var option = {

落日映苍穹つ/ 2023年09月23日 16:07/ 0 赞/ 143 阅读

相关 echarts使用title代替坐标轴名称

坐标轴名称的位置，随着名称长度、坐标轴最值长度的变化，属实难以控制，所以尝试使用title取代： option = { title: [{

心已赠人/ 2022年12月27日 11:23/ 0 赞/ 216 阅读

相关 echarts title 配置

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></

曾经终败给现在/ 2022年10月15日 09:53/ 0 赞/ 170 阅读

相关 ECharts配置项之title(标题)

1.标题居中 //left的值为'left', 'center', 'right' title:{ left:'center' }

本是古典何须时尚/ 2022年09月12日 01:47/ 0 赞/ 269 阅读

相关 echarts学习之组件title笔记

echarts学习之组件title笔记 > 首先看到这个单词，就明白是标题的意思，没错它就是标题，这没什么可说的，还是直接进入正题，讲讲关于echarts组件titile

我就是我/ 2022年05月22日 09:07/ 0 赞/ 217 阅读

相关 echarts之title-textAlign （居中）

原文出处：[https://blog.csdn.net/huanbia/article/details/50394515][https_blog.csdn.net_huanbi

旧城等待，/ 2022年05月19日 04:42/ 0 赞/ 486 阅读

相关 echarts 通用配置title

title:{ text:'标题显示', textStyle:{ 标题样式 color:'red'

绝地灬酷狼/ 2021年07月24日 18:50/ 0 赞/ 492 阅读