v-chart x轴和y轴文本配置
程序员文章站
2022-07-13 15:59:25
...
<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>
上一篇: JUC 原子类
下一篇: LinkedList源码分析
推荐阅读
-
echarts柱形图X轴Y轴相关配置
-
v-chart x轴和y轴文本配置
-
Winform中设置ZedGraph鼠标悬浮显示举例最近曲线上的点的坐标值和X轴与Y轴的标题
-
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
-
FusionCharts中文教程:自定义图表的X轴和Y轴 fusioncharts教程图表工具数据可视化工具
-
FusionCharts中文教程:自定义图表的X轴和Y轴 fusioncharts教程图表工具数据可视化工具
-
python plt双纵坐标绘图,自定义x轴label,y轴单位和字体,并限制x轴的范围
-
Echarts常见问题之grid说明x,x2,y,y2和x轴间隔显示,y轴高至顶部
-
Winform中设置ZedGraph鼠标悬浮显示举例最近曲线上的点的坐标值和X轴与Y轴的标题
-
配置 echarts 只反转y轴,x轴不反转