1. Summarize the trend chart

(1) Legend componentlegend

Legend: {selectedMode: false, // Remove Orient: 'horizontal',// display top: 0, left: 15, padding: [1, 0], data: FontSize: '11px', color: '#999999', lineHeight: 15,}, icon: 'circle', itemGap: 8, // Change the size of the circle itemWidth: 8, // Change the width of the circle},Copy the code
  • legend. type

The type of legend. Optional value: ‘plain’ Plain legend. The default is a normal legend. Scroll to turn a page. It can be used when the number of legends is large.

  • legend. icon

Icon of legend item: ‘circle’, ‘rect’, ’roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘None’

  • legend. data

An array of legends

  • legend. orient

The layout orientation of the legend list. ‘horizontal’, ‘vertical’

  • legend. padding

Legend inner margin, unit px, default inner margin in each direction is 5, accept array set upper right lower left margin respectively.

  • legend. itemGap

The interval between each item of the legend. For horizontal layout, it is horizontal interval, and for vertical layout, it is longitudinal interval.

  • legend. itemWidth

The graphic width of the legend tag. (Width of icon)

  • legend. itemHeight

Figure height of legend marker. (Height of icon)

  • legend. selectedMode 

Legend selection mode, controls whether the series display state can be changed by clicking legend. Legend selection is enabled by default and can be set to false. True: Click an item of the legend to disappear

(2) Tooltip components

Tooltip: {the trigger: 'axis, axisPointer: {/ / coordinate indicator, axis trigger effective type:' the line ', / / the default value is straight line, optional for: 'the line' | 'shadow' graphics.linestyle: {color: 'rgba(0,0,0,0.1)'}}, textStyle: {color: '#999999', fontSize: 10, lineHeight: 20, }, backgroundColor: ' #FFFFFF', extraCssText: 'z-index:0; Box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); padding: 5px 10px; ', // Add CSS style formatter to float layer: function(params) { let time = params[0].name; domStr += '<div>' + '<p style="line-height: 20px;" >' + time + '</p>'; for(let i = 0; i < params.length; i++) { let param = params[i]; let seriesName = param.seriesName; // let value = param.value; // if(! value) { return; } let mark = _this.handleTip(seriesName, Number(value)); domStr += '<div style="display: flex; align-items: center; justify-content: space-between; font-size: 12px; line-height: 20px;" >' + '<p>' + '<span style="margin-right: 5px; width:24px; display: inline-block; font-weight: 700; '+' ${mark === 'high'? 'color:#FA6400' : mark === 'low'? 'color: #29CCB1' : 'color: #333333'}` + '">' + value + '</span>' + '<span style="font-size: 10px; padding: 1px 2px; margin-right: 10px; border-radius: 2px; '+' ${mark === 'high'? 'background: #FFF3EB; Color :#FA6400' : mark === 'low'? 'background: #E6FAF7; color: #29CCB1' : ''}` + '">' + `${mark ? mark : ''}` + '</span>' + '</p>' + '<p>' + seriesName + '</p>' + '</div>'; } domStr += '</div>'; return domStr; }},Copy the code

(3) Y-axis

YAxis: {name: unitLabel[healthRecordType],// Set y axis name nameGap: 20, // the distance between the axis name and the axis. NameTextStyle: {padding: [0, 0, 0, -20]}, min: 0, Max: vMax, // Max: Math.ceil(verticalMax * (1 + 0.2)), // splitNumber: 5,// Number of y splitlines interval: vMax / 5, type: 'value', axisTick: {// Make sure the calibration line and label on the coordinate axis show: false, // remove the calibration line alignWithLabel: true}, axisLine: {// Remove the Y-axis show: false, lineStyle: {color: '#999' }, textStyle: { color: '#999', fontSize: '12', align: 'right' } } },Copy the code

(4) X-axis

The handling of time

HandleDate = () => {let date = []; let oneDay = 24 * 3600 * 1000; let base = new Date(); for (var i = 0; i < 30; i++) { let model = base - oneDay * i; var now = new Date(model); let dateStr = moment(now).format('YYYY-MM-DD'); date.push(dateStr); } return date.reverse(); }Copy the code

Echarts x axis

XAxis: {type: 'category', boundaryGap: true, // Whitespace policies on both sides of the coordinate axes interval: 'auto', data: dateList, show: true, axisTick: {// Make sure the calibration line and label on the coordinate axis show: false, // remove the calibration line alignWithLabel: true}, axisLine: {// remove the x axis show: false, lineStyle: {color: '#999'}, textStyle: {color: '#999', fontSize: '12',}}, axisLabel: { function (value) { let dateStr = moment(value).format('MMDD'); return dateStr; }}},Copy the code

(5) the grid

The position of the line chart

grid: { 
    top: '20%', 
    left: '16px', 
    right: '16px', 
    bottom: '5%', 
    containLabel: true 
},
Copy the code