说明
echarts绘制一个简单的折线图
效果图
let xAxisArr = [];
for(var i = 0; i > -7; i--) {//获取最近7天的日期
xAxisArr.push(Deal.getBeforeDate(i));
}
const bargraph = {
title: {
show: true,//标题显示
text: '走势图',
padding: 10,
textStyle: {
fontSize:14
}
},
tooltip: {
trigger:'axis',
backgroundColor: '#ffffff',
formatter: "{b}数量:{c}",
textStyle:{
color: "#ffffff",
},
axisPointer: {
type: 'line',
lineStyle: {
width:0
}
},
borderColor: "#fff",
borderWidth: 1,
padding: 10,
extraCssText: "background: linear-gradient(to right, #60CEFA, #6D8CF5);",
},
xAxis: {
type: 'category',
data: xAxisArr.reverse(),
axisLine:{
lineStyle:{
color:'#E9EFF7',
}
},
axisLabel: {
textStyle: { //改变刻度字体样式
color: '#B1B1B1'
}
}
},
grid: {
left: '3%',
right: '3%',
bottom: '6%',
top: '20%',
containLabel: true
},
yAxis: {
type: 'value',
scale: true,
min: 0,
axisLine:{
lineStyle:{
color:'#E9EFF7',
}
},
splitLine: {
lineStyle: {
color: ['#E7EEF6']
}
},
axisLabel: {
textStyle: { //改变刻度字体样式
color: '#B1B1B1'
}
}
},
series: [{
type: 'line',
data: [10,5,1,15,10,20,10],
smooth: true,
symbol:'emptyCircle',
symbolSize:8,
showSymbol:true,
lineStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#BCECFD'
}, {
offset: 1,
color: '#B2CBFA'
}]),
},
itemStyle: {
normal: {
color: '#357DF6',
},
emphasis: {
borderWidth: 5,
borderColor: "transparent"
}
}
},{
type: 'line',
data: [10,5,1,15,10,20,10],
smooth: true,
symbol:'image://'+circle,
symbolSize:16,
showSymbol:false,
itemStyle: {
normal: {
color: "transparent",//折线点的颜色
lineStyle: {
color: 'transparent'
}
}
}
},{
type: 'bar',
data: [20,20,20,20,20,20,20],
yAxisIndex:0,
barWidth : 30,
barGap: '-100%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#EBFAFE'
}, {
offset: 1,
color: '#F0F3FE'
}]),
}
}
},{
type: 'bar',
data: [10,5,1,15,10,20,10],
barWidth : 30,
itemStyle: {
normal: {
color:'transparent'
},
emphasis: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
offset: 0,
color: 'transparent'
},{
offset: 0.45,
color: 'transparent'
},{
offset: 0.47,
color: '#5EC4FA'
},{
offset: 0.55,
color: '#6C8DF5'
},{
offset: 0.56,
color: 'transparent'
},{
offset: 1,
color: 'transparent'
}]),
}
}
}]
}
this.setState({
bargraph:bargraph
})