折线图组件封装

  1. 一个折线图
  2. 多个折线图
  3. 堆叠折线图
  4. 面积折线图 ```jsx import { getColor } from ‘../../util’;

function getMarkArea(length, i, itemEvents) { if (i !== 0) return null;

const startP = length > 1 ? 50 : 15; const diff = 10; const markAreas = (itemEvents || []).map((event, index) => { const { name, type, startTime, endTime, message } = event; return [ { name: ${name}:${type}, xAxis: startTime, y: startP + diff index, itemStyle: { borderWidth: 2, borderColor: type === ‘Normal’ ? ‘#5dc859’ : ‘#FF0087’, color: type === ‘Normal’ ? ‘#5dc859’ : ‘#FF0087’, }, }, { name: message, xAxis: endTime, y: startP + diff (index + 1), }, ]; });

return { silent: false, data: markAreas, label: { show: false, width: 60, }, emphasis: { label: { position: ‘bottom’, show: true, }, }, }; }

export function lineOption(props) { const { data, xData, yAxis = false, yAxisIndex, theme, type } = props; const { length } = data; const legendData = data.map(it => it.label);

const _options = { color: getColor(length), yAxis: [ { type: ‘value’, position: ‘left’, // axisLine: { show: true, lineStyle: { color: ‘#c1c5ca41’ } }, axisTick: { show: false }, // 改为虚线网格 splitLine: { lineStyle: { color: ‘#c1c5ca41’, type: ‘dashed’ } }, axisLabel: { color: ‘#9da5b2’, fontSize: ‘11’ }, …(yAxis && yAxis), }, ], xAxis: { type: ‘category’, boundaryGap: false, data: xData, axisTick: { lineStyle: { color: ‘#c1c5ca41’ }, alignWithLabel: true, }, splitLine: { show: false }, axisLine: { lineStyle: { color: ‘rgba(0,0,0,0)’ } }, axisLabel: { color: ‘#9da5b2’, fontSize: 11, overflow: ‘break’ }, }, series: data.map((it, index) => { const serie = { data: it.value, name: it.label, yAxisIndex: it.yAxisIndex, type: ‘line’, symbol: ‘none’, barMaxWidth: 10, lineStyle: { width: 1.5, type: ‘solid’, }, markArea: getMarkArea(length, index), // smooth: true, }; if (type === ‘areaChart’) { serie.areaStyle = { opacity: 0.4, }; } return serie; }), tooltip: { trigger: ‘axis’, backgroundColor: ‘rgba(50,50,50,.8)’, textStyle: { fontSize: 12, color: ‘#ccc’, }, enterable: true, extraCssText: ‘max-height: 300px; overflow: auto;’, }, legend: { type: ‘scroll’, show: length > 1, data: legendData, icon: ‘roundRect’, // left: 16, top: -4, itemWidth: 12, itemHeight: 10, textStyle: { fontSize: 12, color: theme === ‘dark’ ? ‘#fff’ : ‘#333’, }, }, grid: { top: length > 1 ? 40 : 24, right: 8, bottom: 0, left: 0, containLabel: true,// 防止标签溢出 }, };

if (yAxisIndex && typeof yAxisIndex === ‘object’) { _options.yAxis.push(yAxisIndex); }

return _options; } ```

X轴文本超出显示不完整

https://echarts.apache.org/zh/option.html#xAxis.axisLabel.overflow
axisLabel: { color: ‘#9da5b2’, fontSize: 11, overflow: ‘break’ }
设置 overflow: ‘break’ 换行

showMaxLabel: true 显示最后一个标签