学习Echarts setOption()之title对象属性使用

Posted ITseahorseL

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习Echarts setOption()之title对象属性使用相关的知识,希望对你有一定的参考价值。

1.各个属性使用
官网API:https://echarts.apache.org/zh/option.html#title.top

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.js"></script>
</head>

<body>
    <div id="main" style="width:600px;height:400px;"></div>
</body>
<script>
    var myChart = echarts.init(document.getElementById("main"));

    var option = 
        title: 
            //1.是否显示标题组件
            //show:false,
            //2.主标题文本text
            text: "SHL Titlevzxvzxvzxcvxcv",
            //3.副标题文本subtext,支持使用 \\n 换行
            subtext: "SHL Title",
            //4.title 组件离容器左侧的距离
            left: "center",
            //5.title 组件离容器上侧的距离
            top: "center",
            textStyle: 
                //宽度
                width: 100,
                //6.设置主标题文本样式
                fontSize: 30,
                //文字本身的描边宽度
                textBorderWidth: 40,
                //文字本身的描边颜色
                textBorderColor: "red",
                //文字本身的描边类型
                textBorderType: "dotted",
                //文字超出宽度是否截断或者换行
                ellipsis: "...",
                //文字超出宽度是否截断或者换行,配置width时有效
                overflow: "truncate",
            ,
            //整体(包括 text 和 subtext)的水平对齐
            textAlgin: "center",
            //整体(包括 text 和 subtext)的垂直对齐
            textVertialAlign: "auto",
            //是否触发事件 可绑定事件
            triggerEvent: false,
            //主副标题之间的间距
            itemGap: 40,
            subtextStyle: 
                //7.设置副标题文本subtext样式
                fontSize: 20
            ,
            //设置背景颜色
            backgroundColor: 'rgba(400,300,200,1)',
            //8.主标题文本超链接
            link: "https://blog.csdn.net/ITseahorseL/article/details/124299316?spm=1001.2014.3001.5501",
            //指定窗口打开主标题超链接 值为self时为当前窗口打开
            //为blank值时在新窗口打开
            target: "blank"
        ,
        series: [
            
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data: [
                    
                        label: 
                            // 在文本中,可以对部分文本采用 rich 中定义样式。
                            // 这里需要在文本中使用标记符号:
                            // `styleName|text content text content` 标记样式名。
                            // 注意,换行仍是使用 '\\n'。
                            formatter: [
                                'title|a',
                                //'b|这段文本采用样式b这段用默认样式x|这段用样式x'
                            ].join('\\n'),
                            //在 rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果
                            rich: 
                                verticalAlign: "bottom",
                                //style_name 比如a 可以通过标签名选择用哪个标签名下的样式
                                a: 
                                    verticalAlign: "bottom",
                                
                            

                        
                    
                ]
            
        ],
    

    myChart.setOption(option);
</script>

</html>

以上是关于学习Echarts setOption()之title对象属性使用的主要内容,如果未能解决你的问题,请参考以下文章

echarts学习总结:一个页面存在多个echarts图形,图形自适应窗口大小

echarts学习总结

echarts学习

echarts生成的图表大小怎么随屏幕的大小改变自适应

Echarts图 刷新后无变化

Echarts学习笔记