Echarts学习笔记之title组件（2）

最新推荐文章于 2023-09-26 11:08:14 发布

tscn1

最新推荐文章于 2023-09-26 11:08:14 发布

阅读量235

点赞数

分类专栏： echarts 文章标签： echarts 前端

本文链接：https://blog.csdn.net/tscn1/article/details/116141861

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

setOption

学习官网文档中配置项的一些笔记记录。

title

标题组件，包含主标题和副标题。里面有很多属性，具体可以查看官网。

代码实操

<div class="echarts"></div>
<script>
    //title组件的属性使用
    const myEchartsInstance = echarts.init(document.getElementsByClassName('echarts')[0]);
    myEchartsInstance.setOption({
        title: {
            id: '', //组件id
            show: true, //是否显示title
            text: 'Most Frequent Repeats\n', //主标题文本，支持使用 \n 换行。
            link: 'https://www.baidu.com', //主标题文本超链接
            target: 'blank', //指定窗口打开主标题超链接
            textStyle: { //主标题样式
                color: 'red',
                fontSize: 20,
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                // lineHeight:0,//rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight
                // width: //如果不定义 rich 属性，则不能指定 width 和 height
                textBorderColor: 'black',
                textBorderWidth: 1,
                textShadowColor: 'black',
                textShadowBlur: 2,
                textShadowOffsetX: 5,
                textShadowOffsetY: 5,
                rich: { //可以自定义富文本样式

                }
            },
            subtext:'副标题',
            subtextStyle:{
                // verticalAlign: 'top',
            },
            textAlign:'left',//主标题和副标题的对齐方式 会导致文字看不见
            triggerEvent:false,//是否触发事件，默认false
            padding:[5,10,15,20],//标题内边距
            itemGap:30,//主标题和副标题之间的距离
            top:0,//title 组件离容器上侧的距离。
            backgroundColor:"grey",//标题背景色，默认透明。
            borderColor:'red',//标题的边框颜色
            borderWidth:1,//标题的边框线宽。默认为0
            borderRadius:[10,20,30,40],//圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。
            shadowBlur:10,
            shadowColor:'black',
            shadowOffsetX:10,
            shadowOffsetY:10

        },
        legend: { //图例
            data: ['Frequency'],
        },
        xAxis: { //x轴的配置
            data: ['A', 'AC', 'AAAAT', 'AGGG', 'GC']
        },
        yAxis: {},
        series: { //系列列表
            name: 'Frequency', //与legend.data一致
            type: 'bar', //图表的类型
            data: ['10', '23', '100', '300', '2000'], //图表的数据
        }
    })
</script>