2023学年完整公开课版Echarts标题设置

Echarts标题设置1、了解Echarts基本设置

2、根据文档了解标题设置Echarts基本设置

简单介绍一下标题配置项

标题设置

标题设置的常用属性Echarts支持许多基本配置项，包括标题、图例、x和y坐标轴的设置等。对于这些配置，我们定义一个字典就可以了在创建和显示图表时，传入刚才定义好配置字典就可以Echarts基本配置varoption={title:{text:'ECharts入门示例'},xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis:{},};myChart.setOption(option);官方文档/option.html#title标题组件，包含主标题和副标题。ECharts2.x中单个ECharts实例最多只能拥有一个标题组件。ECharts3中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。标题设置title标题简单介绍一下标题配置项下面是设置标题时一些常用的属性：title.show：boolean类型[default:true]，是否显示标题组件。title.text：string类型[default:'']，主标题文本，支持使用\n换行。title.link：string类型[default:'']，主标题文本超链接。title.target：string类型[default:'blank']，指定窗口打开主标题超链接。可选：'self'当前窗口打开，'blank'新窗口打开。title.textStyle：Object类型，该配置项主要用来设置标题字体的样式，以键值对的格式进行配置。在绘制Echarts图表时经常需要修改的标题样式：color、fontSize、width、height等。其中国富文本标题也有相同的设置，其设置具体在subtextStyle中。标题设置的常用属性title.subtext：string类型[default:'']，副标题文本，支持使用\n换行。title.sublink：string类型[default:'']，副标题文本超链接，通过配置富文本超链接的信息，可实现点击富文本标题时进行页面跳转。title.subtarget：string类型[default:'blank']指定窗口打开副标题超链接，可选：'self'当前窗口打开，'blank'新窗口打开。title.textAlign：string类型[default:'auto']，整体（包括text和subtext）的水平对齐。可选值：'auto'、'left'、'right'、'center'。title.left、title.top、title.right、title.bottom:string,number类型[default:'auto']，grid组件离容器左侧、上侧、右侧、下侧的距离。其值可以是像20这样的具体像素值，可以是像'20%'这样相对于容器高宽的百分比。其中left的值可以是'left','center','right'，top的值可以是'top','midd