折线图 对应api：
import React from 'react';
import 'antd/dist/antd.css';
import ReactECharts from "echarts-for-react";
const Line = () => {
const option = {
xAxis: { // x轴
name: 'x轴的值', // 轴名称
nameLocation: 'end', // 名称显示位置。'start'、'middle' / 'center'、'end'
show: true, // 是否显示x轴
position: 'bottom', // 轴位置。'top'、'bottom'
// offset: '', // X轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。
type: 'category', // 轴类型。 'value' 数值轴-连续数据; 'category' 类目轴-离散类目数据，可用xAxis.data 设置类目数据; 'time' 时间轴-连续时序数据; 'log' 对数轴-对数数据。
nameTextStyle: { // 【轴名称的文字样式】
width: 80, // 宽
height: 40, // 高
lineHeight: 40, // 轴名称文字行高
color: '#000', // 轴名称颜色
fontSize: 18, // 轴名称字号
fontWeight: 100, // 轴名称粗细 'normal'、'bold'、'bolder'、'lighter'、100
fontStyle: 'italic', // 轴名称样式 'normal'、'italic'、'oblique'
fontFamily: 'Arial', // 轴名称字体
align: 'center', // 水平对齐方式 'left'、'center'、'right'
verticalAlign: 'middle', // 垂直对齐方式 'top'、'middle'、'bottom'
backgroundColor: '#eee', // 文字块背景色 或者 {image: 'xxx/xxx.png'}
borderColor: '#f00', //
borderWidth: 1, // 轴名称边框宽
borderRadius: 10, // 圆角
padding: [4, 5, 4, 5], // 内边距
shadowColor: 'transparent', // 文字块背景阴影颜色
shadowBlur: 10, // 文字快背景阴影长度
rich: { // 自定义富文本样式 }
},
nameGap: 50, // 坐标轴名称与轴线的距离
nameRotate: -15, // 坐标轴名字旋转，角度值。
inverse: false, // 是否是反向坐标轴-坐标轴的值倒着排(从后往前排)
min: 0, // 坐标刻度最小值。'dataMin'-直接选数据里的最小值。或者函数：function(value){return value.min -20}; 或者类目轴的类目顺序。类目轴 data: ['类A', '类B', '类C'] 中，序数2表示'类C'。
// max: 10, // 最大值
axisLine: { // 【坐标轴轴线设置】
show: true,
symbol: ['none', 'arrow'], // 轴线两边箭头。默认不显示箭头['none', 'none']; 两端都显示箭头['arrow', 'arrow']; 仅右侧有箭头['none', 'arrow']
symbolSize: [10, 20], // 第一个值：箭头宽度; 第二个值：箭头高度。
symbolOffset: 20, // 轴线两边箭头的水平偏移量。数字：两个箭头的偏移量; [100, 200]: 开始端箭头偏移100，末端箭头偏移200。
lineStyle: { // color, width , type , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity
color: 'yellow', // 轴线上的字的颜色
width: 2,
type: 'dashed', // 'solid'-实线; 'dashed'-虚线; 'dotted'-点线
opacity: 0.8,
}
},
axisTick: { // 坐标轴刻度设置
show: true, // 是否显示刻度
alignWithLabel: true, // 类目轴时-刻度居中对齐
inside: false, // 刻度是否朝内。默认朝外
length: 10, // 刻度长度
lineStyle: {
color: 'green', // 轴线刻度的颜色，默认取坐标轴axisLine的颜色
width: 10,
type: 'dotted', // 'solid'-实线; 'dashed'-虚线; 'dotted'-点线
opacity: 0.9
}
},
// minorTick: { // 次刻度设置。无法在类目轴（type: 'category'）中使用。 - - - 次刻度暂时没显示出来
// show: true, // 是否显示次刻度
// splitNumber: 5, // 次刻度线分割数，分割成5段。
// // length: 15, // 次刻度线长度
// lineStyle: {
// color: 'red',
// }
// },
axisLabel: { // 坐标轴刻度标签的相关设置。
show: true, // 坐标刻度是否显示
rotate: 0, // 坐标刻度旋转的角度
interval: 0, // 类木轴中才生效。默认采用标签不重叠的策略，间隔显示标签。
// 'auto'; 0-强制显示所有标签; 数字n-隔n个标签显示一个标签; 也可用回调函数控制(idnex:number, value:string) => boolean---第一个参数：类目的index；第二个参数：类目名称。如果跳过，则返回false。
inside: false, // 刻度标签是否朝内。默认朝外。
margin: 20, // 刻度标签与轴线之间的距离
// formatter: '{value} kg', // 刻度标签的内嵌格式。 字符串模板; 回调函数。
formatter: function (value, index) { // 第一个参数：刻度数值（类目）；第二个参数：刻度索引。
const date = new Date(+value);
const texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getFullYear());
}
return texts.join('/');
},
showMaxLabel: true,
textStyle: {
color: function (value, index) {
return value >= 0 ? 'green' : 'red';
}
},
fontStyle: 'italic',
fontSize: 20,
},
splitLine: { // 坐标轴在 grid 区域中的分隔线。
show: true,
},
splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
},
data: [{
value: 1659888000000, // '周一', // 单个类目名称
textStyle: { // 类目标签的文字样式。突出周一
fontSize: 20,
color: 'red'
}
}, 1659974400000, 1660060800000, 1660147200000, 1660233600000, 1660320000000, 1660406400000 ]
//'周二', '周三', '周四', '周五', '周六','周日'],
},
yAxis: { // y轴
name: 'y轴值',
type: 'value'
},
series: [{
smooth: true, // 是否平滑
symbol: 'triangle', // 标记的图形。'circle'-圆形, 'rect', 'roundRect', 'triangle'-三角, 'diamond', 'pin', 'arrow', 'none', 'image://http://xxx.xxx.xxx/a/b.png'
symbolSize: 5, // 标记的大小。 [20, 10]，20-宽，10-高。
symbolRotate: 30, // 标记的旋转角度。+顺时针；-逆时针。
symbolKeepAspect: true, // 是否在缩放时保持该图形的长宽比
cursor: 'pointer', // 鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
data: [150, 230, 224, 218, 135, 170, 260],
type: 'line',
itemStyle: {
color: 'rgb(128, 128, 128)',
}
}]
};
return (
<div>
<ReactECharts option={option} style={{ height: 400 }} />
</div>
)
}
export default Line;
