小谷最近学习echarts各种收集,百度到的样式修改。
在柱子上方显示数值:

label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: 'black'
}
},
}

调整柱子的宽度:

barWidth : 45,

调整y轴的步长极限:
设置y轴的名称的样式:

yAxis: {name:'金额',
fontSize : 30,
max: 500,
nameLocation:'middle' },

echarts:在柱子上方显示数值,调整柱子的宽度,调整y轴的步长极限, 设置y轴的名称的样式_App

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
name: 'hello',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
legend: {
x: 'left',
// orient: 'vertical'//图例纵向排列,如果没有默认横向
},
tooltip: {name:'谷姑姑'},
dataset: {
source: [
['月份', '订单数', '订单金额'],
['2月', 150, 30,],
['3月', 83.1, 73.4,0],
['4月', 86.4, 65.2,0],
['5月', 72.4, 53.9,0]
]
},
xAxis: {type: 'category',
},
yAxis: {name:'金额',
fontSize : 30,
max: 500,
nameLocation:'middle' },
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [{
type: 'bar',

barWidth : 45,
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: 'black'
}
},
}},
{type: 'bar',
barWidth : 45,
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: 'black'
}
}
}},



],
});
}
}
}