const getLineTooltip = ({ title = '', width = 197, valueTitle = '', data = [] }) => `

${title} ${valueTitle}

${data .map( ({ legend, name, value }) => `

${legend} ${name} ${value}

`, ) .join('')}

` option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, tooltip:{ formatter: `

2020-06-01

实际值 100.00 kWh/辆

` }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', textStyle: { fontSize: 12, fontWeight: 'bolder', // icon: greenFillFocus, }, smooth: true, showAllSymbol: true, showSymbol: true, //symbol: `image://${orangeFillFocus}`, symbolSize: 22, label: { show: true, distance: 4, position: ['-300%', '-110%'], formatter: function(params) { var val1 = params.value || 0; return '{color1|' + val1 * 100 + '}{color2| % }'; }, rich: { color1: { color: '#fff', backgroundColor: 'black', borderColor: '#FAAE29', border: 1, lineHeight: 24, height: 24, padding: [0, 6, 0, 6], borderWidth: 1, borderRadius: [3, 0, 0, 3], }, color2: { color: '#fff', backgroundColor: '#FAAE29', borderColor: '#FAAE29', lineHeight: 24, height: 24, borderWidth: 1, borderRadius: [0, 3, 3, 0], padding: [0, 4, 0, 1], }, }, }, itemStyle: { lineStyle: { width: 2, color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#78ffc8', // 0% 处的颜色 }, { offset: 0.5, color: '#1ff39d', // 50% 处的颜色 }, { offset: 1, color: '#125037', // 100% 处的颜色 }, ], global: false, // 缺省为 false }, shadowColor: '#000', shadowBlur: 10, shadowOffsetY: 40, }, }, }] };

带提示折线图