echarts柱状图

export default {
name: ‘ToubleDataContrast’,
data() {
return {
name: ‘历史同期隐患排查数据对比’,
option: {
backgroundColor: ‘#2f435e’,
title: {
text: ‘历史同期隐患排查数据对比’,
x: ‘left’,
textStyle: {
color: ‘rgba(218, 218, 218,1)’,
fontSize: 14
}
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: [‘line’, ‘bar’, ‘stack’, ‘tiled’] },
restore: { show: true },
// saveAsImage: { show: true }
}
},
legend: {
left: ‘30%’,
top: ‘10%’,
itemHeight: 5,
data: [‘2017年’, ‘2018年’],
textStyle: {
fontSize: 12,
color: ‘#DEA952’
}
},
textStyle: {
color: ‘rgba(218, 218, 218, 0.6)’,
fontSize: 12
},
tooltip: {
trigger: ‘axis’,
right: ‘10%’
},
grid: {
left: ‘3%’,
right: ‘7%’,
bottom: ‘1%’,
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
show: true
}
}
},
xAxis: [{
type: ‘category’,
splitLine: { // 去除网格
show: false
},
axisLine: { // 轴线颜色
symbol: [‘none’, ‘path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20’],
symbolOffset: 5,
symbolSize: [15, 25],
onZero: false,
lineStyle: {
color: ‘#5F9DD1’,
width: 1
}
},
axisTick: { // 去除刻度线
show: false
},
data: [‘近一月’, ‘近三月’, ‘近半年’, ‘近一年’],
}],
yAxis: [{
type: ‘value’,
splitLine: { // 去除网格
show: true,
lineStyle: {
color: ‘gray’,
}
},
axisLine: {
symbol: [‘none’, ‘path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20’],
symbolOffset: 5,
symbolSize: [15, 25],
onZero: false,
lineStyle: {
color: ‘#5F9DD1’,
width: 1
}
},
axisTick: {
show: false
}
}],
color: [’#DEA952’, ‘#BF4140’],
series: [
{
name: ‘2017年’,
data: [10, 20, 30, 18],
type: ‘bar’,
textStyle: {
fontSize: 12
},
barMaxWidth: 20,
barGap: ‘0%’
},
{
name: ‘2018年’,
data: [15, 18, 32, 42],
type: ‘bar’,
textStyle: {
fontSize: 12
},
barMaxWidth: 20,
barGap: ‘0%’
}
]
}
}
},
mounted() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …arts.init(this.refs.lineChart).setOption(this.option)
})
},
destroyed() { // 离开此组件的操作
window.removeEventListener(‘resize’, function () {
echarts.init(document.getElementById(‘lineChart’)).resize()
}, 20)
},
}