vchart 坐标轴标题_ECharts xAxis配置 x坐标轴名称的文本样式

本文详细介绍了ECharts中xAxis.nameTextStyle属性,用于自定义坐标轴名称的文本样式,包括颜色、字体风格、粗细、大小、对齐方式、背景色、边框等。通过这些设置,可以实现个性化的坐标轴标题样式。
摘要由CSDN通过智能技术生成

xAxis.nameTextStyle   |   Object

坐标轴名称的文字样式。

xAxis.nameTextStyle.color   |   Color

坐标轴名称的颜色,默认取 axisLine.lineStyle.color。

xAxis.nameTextStyle.fontStyle   |   string

[ default: 'normal' ]

坐标轴名称文字字体的风格

可选:

'normal'

'italic'

'oblique'

xAxis.nameTextStyle.fontWeight   |   string

[ default: normal ]

坐标轴名称文字字体的粗细

可选:

'normal'

'bold'

'bolder'

'lighter'

100 | 200 | 300 | 400...

xAxis.nameTextStyle.fontFamily   |   string

[ default: 'sans-serif' ]

坐标轴名称文字的字体系列

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

xAxis.nameTextStyle.fontSize   |   number

[ default: 12 ]

坐标轴名称文字的字

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<template> <v-chart ref="vChartRef" :option="option" autoresize></v-chart> </template> <script setup> import {ref, defineProps, watch} from 'vue' import VChart from 'vue-echarts' import * as echarts from 'echarts' const props = defineProps({ data: { type: Object } }) const option = ref() watch( () => props.data, () => { //解决警告 There is a chart instance already initialized on the dom. // VChart.dispose(document.getElementById('LineBar')) console.log(props.data); let xLabel = props.data.legend; let L1 =props.data.L1; let L0 = props.data.L0; initChart(xLabel,L1,L0) } ) const initChart=(xLabel,L1,L0)=>{ option.value={ tooltip: { trigger: 'item', }, legend: { data:xLabel }, grid: { top:'15%', left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: true, axisLine: { //坐标轴轴线相关设置。数学上的x轴 show: true, lineStyle: { color: '#233653' } }, axisLabel: { //坐标轴刻度标签的相关设置 textStyle: { color: 'rgba(51,51,51,.6)', padding: 5, fontSize: 12 } }, splitLine: { show: false, lineStyle: { color: '#192a44' } }, axisTick: { show: false }, data: xLabel }, yAxis: [ { type: 'value', name: '万元', splitLine: { show: false, lineStyle: { type: 'dashed' } }, axisLine: { show: false, lineStyle: { color: '#233653' } }, axisLabel: { show: true, textStyle: { color: 'rgba(51,51,51,.6)', padding: 10 } }, axisTick: { show: false } }, { type: 'value', name: '%', splitLine: { show: false, lineStyle: { type: 'dashed' } }, axisLine: { show: false, lineStyle: { color: '#233653' } }, axisLabel: { show: true, textStyle: { color: 'rgba(51,51,51,.6)', padding: 10 } }, axisTick: { show: false } } ], series: [ { name: '营业收入', type: 'line', symbolSize: 5, // 设置折线上圆点大小 symbol: 'circle', // 设置拐点为实心圆 yAxisIndex: 0, data: L1, itemStyle: { color: '#669AFF', }, }, { name: '入住率', type: 'line', symbolSize: 5, // 设置折线上圆点大小 symbol: 'circle', // 设置拐点为实心圆 yAxisIndex: 1, data:L0, itemStyle: { color: '#62D158', }, } ] } } </script> <style lang="scss" scoped></style>我想给两根折线添加图例,请问要怎么办
06-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值