趋势上升echarts 折线配置项内容和展示
配置项如下
// See https://github.com/ecomfe/echarts-stat
echarts.registerTransform(ecStat.transform.regression);
myChart.resize({width:208,height:96})
const data_ori = [
['2020-11-23', 0],
['2020-11-24', 0],
['2020-11-25', 0],
['2020-11-26', 0],
['2020-11-27', 0],
['2020-11-28', 0],
['2020-11-29', 0],
['2020-11-30', 0],
['2020-12-01', 0],
['2020-12-02', 0],
['2020-12-03', 0],
['2020-12-04', 0],
['2020-12-05', 0],
['2020-12-06', 0],
['2020-12-07', 0],
['2020-12-08', 0],
['2020-12-09', 0],
['2020-12-10', 0],
['2020-12-11', 0],
['2020-12-12', 0],
['2020-12-13', 0],
['2020-12-14', 0],
['2020-12-15', 0],
['2020-12-16', 0],
['2020-12-17', 0],
['2020-12-18', 0],
['2020-12-19', 0],
['2020-12-20', 0],
['2020-12-21', 0],
['2020-12-22', 0],
['2020-12-23', 0],
['2020-12-24', 0],
['2020-12-25', 0],
['2020-12-26', 0],
['2020-12-27', 0],
['2020-12-28', 0],
['2020-12-29', 0],
['2020-12-30', 0],
['2020-12-31', 0],
['2021-01-01', 0],
['2021-01-02', 0],
['2021-01-03', 0],
['2021-01-04', 0],
['2021-01-05', 0],
['2021-01-06', 0],
['2021-01-07', 3],
['2021-01-08', 28],
['2021-01-09', 107],
['2021-01-10', 124],
['2021-01-11', 94],
['2021-01-12', 86],
['2021-01-13', 82],
['2021-01-14', 75],
['2021-01-15', 66],
['2021-01-16', 55],
['2021-01-17', 55],
['2021-01-18', 57],
['2021-01-19', 34],
['2021-01-20', 52],
['2021-01-21', 31],
['2021-01-22', 47],
['2021-01-23', 39],
['2021-01-24', 51],
['2021-01-25', 44],
['2021-01-26', 52],
['2021-01-27', 29],
['2021-01-28', 27],
['2021-01-29', 29],
['2021-01-30', 33],
['2021-01-31', 34],
['2021-02-01', 43],
['2021-02-02', 45],
['2021-02-03', 36],
['2021-02-04', 48],
['2021-02-05', 40],
['2021-02-06', 22],
['2021-02-07', 28],
['2021-02-08', 37],
['2021-02-09', 31],
['2021-02-10', 31],
['2021-02-11', 20],
['2021-02-12', 14],
['2021-02-13', 20],
['2021-02-14', 11],
['2021-02-15', 19],
['2021-02-16', 22],
['2021-02-17', 26],
['2021-02-18', 16],
['2021-02-19', 17],
['2021-02-20', 26],
['2021-02-21', 19],
['2021-02-22', 28],
['2021-02-23', 35],
['2021-02-24', 26],
['2021-02-25', 15],
['2021-02-26', 30],
['2021-02-27', 16],
['2021-02-28', 22],
['2021-03-01', 20],
['2021-03-02', 21],
['2021-03-03', 28],
['2021-03-04', 14],
['2021-03-05', 17],
['2021-03-06', 19],
['2021-03-07', 19],
['2021-03-08', 20],
['2021-03-09', 13],
['2021-03-10', 13],
['2021-03-11', 22],
['2021-03-12', 4],
['2021-03-13', 15],
['2021-03-14', 20],
['2021-03-15', 29],
['2021-03-16', 19],
['2021-03-17', 15],
['2021-03-18', 19],
['2021-03-19', 18],
['2021-03-20', 10],
['2021-03-21', 8],
['2021-03-22', 16],
['2021-03-23', 7],
['2021-03-24', 21],
['2021-03-25', 11],
['2021-03-26', 8],
['2021-03-27', 3],
['2021-03-28', 9],
['2021-03-29', 2],
['2021-03-30', 8],
['2021-03-31', 7],
['2021-04-01', 10],
['2021-04-02', 0],
['2021-04-03', 19],
['2021-04-04', 4],
['2021-04-05', 7],
['2021-04-06', 2],
['2021-04-07', 15],
['2021-04-08', 7],
['2021-04-09', 14],
['2021-04-10', 15],
['2021-04-11', 5],
['2021-04-12', 12],
['2021-04-13', 2],
['2021-04-14', 1],
['2021-04-15', 13],
['2021-04-16', 3],
['2021-04-17', 1],
['2021-04-18', 206],
['2021-04-19', 200],
['2021-04-20', 202],
['2021-04-21', 202],
['2021-04-22', 200],
['2021-04-23', 200],
['2021-04-24', 202],
['2021-04-25', 237],
['2021-04-26', 218],
['2021-04-27', 217],
['2021-04-28', 220],
['2021-04-29', 231],
['2021-04-30', 219],
['2021-05-01', 217],
['2021-05-02', 219],
['2021-05-03', 215],
['2021-05-04', 216],
['2021-05-05', 211],
['2021-05-06', 219],
['2021-05-07', 231],
['2021-05-08', 213],
['2021-05-09', 219],
['2021-05-10', 218],
['2021-05-11', 214],
['2021-05-12', 214],
['2021-05-13', 219],
['2021-05-14', 212],
['2021-05-15', 220],
['2021-05-16', 210],
['2021-05-17', 216],
['2021-05-18', 219],
['2021-05-19', 217],
['2021-05-20', 225],
['2021-05-21', 207]
];
const data_01 = data_ori.map((cur,Index) => ([Index+1,cur[1]]))
// console.log(data_01)
option = {
// backgroundColor:'#F2F2F2',
dataset: [{source:data_ori},{
source: data_01
}, {
fromDatasetIndex: 1,
transform: {
type: 'ecStat:regression',
}
}],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
formatter:params => {
console.log(params)
}
},
grid:{
left:16,
top:0,
right:32,
bottom:8
},
xAxis: [{
splitLine: {
show:false
},
type:'category',
axisLine:{onZero:false},
axisLabel:{
show:false
},
},{show:false}],
yAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLabel:{
show:false
},
axisLine:{
show:false,
},
axisTick:{show:false},
// min:80
},
series: [{
name: '趋势线',
datasetIndex:0,
xAxisIndex:0,
type: 'line',
symbolSize:0,
lineStyle:{
width:2
},
areaStyle:{
opacity:0.1,
origin: 'start',
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0.8, color: 'red' },
{ offset: 0.98, color: '#fff' },
// { offset: 1, color: '#3AD235' }
]
}
},
}, {
name: '回归线',
type: 'line',
datasetIndex: 2,
xAxisIndex:1,
symbolSize: 0.1,
symbol: 'circle',
lineStyle:{
color:"red",
width:1
},
label: { show: false, fontSize: 12 },
labelLayout: { dx: -20 },
encode: { label: 2, tooltip: 1 }
}]
};
截图如下
