drawLine () {
var that = this
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
var option = {
color: ['rgba(0, 204, 255, 1)',
'rgba(39, 120, 255, 1)',
'rgba(72, 176, 255, 1)',
'rgba(91, 207, 255, 1)',
'rgba(108, 227, 255, 1)',
'rgba(119, 240, 240, 1)',
'rgba(129, 163, 243, 1)',
'rgba(243, 170, 104, 1)',
'rgba(245, 232, 140, 1)',
'rgba(162, 143, 218, 1)',
'rgba(162, 238, 250, 1)',
'rgba(38, 116, 255, 1)',
'rgba(73, 177, 255, 1)',
],
grid: {
left: '5%',
right: '3%',
top: '15%',
bottom: '10%',
containLabel: true
},
legend: {
top: 10,
right: 20,
itemWidth: 14,
itemHeight: 14,
textStyle: {
color: '#fff',
},
data: ['所外就医', '在所数量']
},
tooltip: {
show: true,
},
xAxis: [
{
data: ['女子', '九台', '康复', '朝阳沟', '奋进', '苇子沟', '吉林市', '延边', '通化', '白城', '辽源', '松原', '白山'],
axisLine: {
lineStyle: {
color: '#3d5269'
}
},
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(150, 175, 220, 1)',
fontSize: 12
}
},
{
data: ['女子', '九台', '康复', '朝阳沟', '奋进', '苇子沟', '吉林市', '延边', '通化', '白城', '辽源', '松原', '白山'],
axisLine: {
lineStyle: {
color: '#3d5269'
}
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
},
],
yAxis: [
{
nameTextStyle: {
color: 'rgba(150, 175, 220, 1)',
fontSize: 13
},
axisLine: {
show: false,
lineStyle: {
color: '#3d5269'
}
},
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(150, 175, 220, 1)',
fontSize: 13
},
splitLine: {
show: true,
lineStyle: {
color: '#2d3d53'
}
},
yAxisIndex: 0
}],
series: [
{
name: '所外就医',
type: 'bar',
barWidth: 10,
zlevel: 2,
itemStyle: {
normal: {
color: 'rgba(20, 83, 199, 1)'
}
},
label: {
normal: {
show: false,
fontSize: 18,
fontWeight: 'bold',
color: '#ffffff',
position: 'top',
}
},
data: [600, 790, 900, 130, 600, 800, 800, 600, 790, 900, 130, 600, 800]
},
{
name: '在所数量',
type: 'bar',
barWidth: 10,
zlevel: 2,
xAxisIndex: 1,
itemStyle: {
normal: {
color: 'rgba(38, 233, 154, 1)'
}
},
label: {
normal: {
show: false,
fontSize: 18,
fontWeight: 'bold',
color: '#ffffff',
position: 'top',
}
},
data: [100, 190, 100, 110, 100, 100, 100, 100, 190, 100, 100, 100, 100]
},
{
name: '在所数量',
type: 'line',
smooth: true, //是否平滑
showAllSymbol: true,
symbol: 'circle',
yAxisIndex: 0,
symbolSize: 10,
lineStyle: {
normal: {
color: 'rgba(255, 222, 0, 1)',
},
},
zlevel: 3,
label: {
show: false,
position: 'top',
textStyle: {
color: 'rgba(255, 222, 0, 1)',
}
},
itemStyle: {
color: 'rgba(255, 222, 0, 1)',
borderColor: '#fff',
borderWidth: 1,
},
data: [600, 790, 900, 130, 600, 800, 800, 600, 790, 900, 130, 600, 800]
},
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},
