drawLine () {
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
let numColor = 'rgba(40, 224, 254, 1)'
let circleColor = 'rgba(168,200,255,1)'
let centerCircleColr = '#fff'
let list = [
{
TIME: '2015',
COUNT: 203,
},
{
TIME: '2016',
COUNT: 298,
},
{
TIME: '2017',
COUNT: 586,
},
{
TIME: '2018',
COUNT: 622,
},
{
TIME: '2019',
COUNT: 225,
},
{
TIME: '2020',
COUNT: 239,
},
{
TIME: '2021',
COUNT: 139,
},
]
let xAxisData = []
let seriesData = []
let maxList = []
list.map((item, index) => {
xAxisData.push(item.TIME)
seriesData.push(item.COUNT)
})
let max = Math.max(...seriesData) + 5
list.map((item, index) => {
maxList.push(max)
})
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 255, 233,0)',
},
{
offset: 0.5,
color: 'rgba(255, 255, 255,1)',
},
{
offset: 1,
color: 'rgba(0, 255, 233,0)',
},
],
global: false,
},
},
},
},
grid: {
top: 20,
left: '12%',
right: '5%',
bottom: '15%',
},
xAxis: {
data: xAxisData,
axisLine: {
lineStyle: {
color: 'rgba(16,85,120,1)',
width: '2',
},
},
axisTick: {
alignWithLabel: true,
},
splitLine: {
show: false,
lineStyle: {
color: '#ccc',
},
},
axisLabel: {
// rotate: 30,
textStyle: {
fontWeight: '500',
color: 'rgba(152, 191, 251, 1)',
fontSize: '12px',
},
},
},
yAxis: {
nameTextStyle: {
color: 'rgba(53,107,144,1)',
},
splitLine: {
lineStyle: {
color: 'rgba(86,122,147,0.08)',
},
},
axisTick: {
show: false,
lineStyle: {
color: 'rgba(16,85,120,1)',
},
},
axisLine: {
show: false,
lineStyle: {},
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(152, 191, 251, 1)',
fontSize: '13px',
},
},
},
series: [{
type: 'bar',
z: 1,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(43, 160, 255, 0)',
},
{
offset: 1,
color: '#0f2a5f',
},
],
globalCoord: false,
},
},
},
barWidth: 14,
barGap: 10,
data: maxList,
},
{
data: seriesData,
type: 'line',
symbol: 'circle', //设定为实心点
symbolSize: 10, //圆点大小
smooth: true,
showSymbol: true,
hoverAnimation: true,
animation: true,
label: {
show: true,
position: 'top',
textStyle: {
color: 'rgba(40, 224, 253, 1)',
fontSize: 12,
},
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [{
offset: 0,
color: centerCircleColr,
},
{
offset: 0.2,
color: centerCircleColr,
},
{
offset: 0.21,
color: '#27d1f1',
},
{
offset: 1,
color: '#fff',
},
]), //圆点颜色
borderColor: circleColor,
borderWidth: 2,
lineStyle: {
//折线颜色大小
type: 'solid', //'dotted'虚线 'solid'实线
color: numColor,
width: 1,
borderColor: 'transparent', //拐点边框颜色
},
},
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#175b86'
},
{
offset: 1,
color: '#0d1d4d'
}
], false),
}
},
},
],
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},