v-chart x轴和y轴文本配置

<template>
  <ve-histogram :data="chartData" width="400px" :extend="extend"></ve-histogram>
</template>

<script>
  export default {
    data () {
        this.extend = {           
         //x轴文本设置
        'xAxis.0.axisLabel.rotate': 45,//x轴文本倾斜
        // 'xAxis.0.axisLine.lineStyle.color': "red",//x轴文本改变颜色
        'xAxis.0.axisLabel.color': 'red',//x轴文本颜色
        'xAxis.0.axisLabel.fontSize': 16,//x轴文本字体大小
        'xAxis.0.axisLabel.fontFamily': 'Arial',//x轴文本字体系列
        'xAxis.0.axisLabel.fontWeight': 'bold',//x轴文本字体粗细
        'xAxis.0.axisLabel.align': 'center',//x轴文本字体位置

                //y轴文本设置
        // 'yAxis.0.axisLine.lineStyle.color': "green",//y轴文本改变颜色
        'yAxis.0.axisLabel.color': "green",//y轴文本改变颜色
      }
      return {
        chartData: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        }
      }
    }
  }
</script>
<style>
.ve-histogram{
    margin: 100px auto
}
</style>
  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值