<div id="columnar-chart" style="width: 400px; height: 200px"></div>
init () {
const columnarChart = this.$echarts.init(document.getElementById('columnar-chart'), null, { renderer: 'svg' })
let option = {
barWidth: 14,
barCategoryGap: 58,
grid: {
bottom: 22,
left: 30,
right: 0,
top: 20
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
splitNumber: 58,
axisTick: {
show: true,
interval: 0,
},
axisLabel: {
show: true,
interval: 0
}
},
yAxis: {
type: 'value',
position: 'left',
splitNumber: 3
},
series: [
{
type: 'bar',
itemStyle: {
color: this.$echarts.graphic.LinearGradient(
0, 1, 0, 0,
[
{ offset: 0, color: '#3F96E6' },
{ offset: 1, color: '#11AEEE' }
]
)
},
label: {
show: true,
color: '#666',
fontSize: 12,
position: 'top'
},
data: [120, 200, 150, 80, 70, 110, 130]
}
]
}
columnarChart.clear();
setTimeout(() => {
columnarChart.setOption(option)
}, 100)
}