效果图
不显示折线图上的拐点方法 ，3个都可以使用，代码中有显示在什么位置使用。
symbolSize:0,
symbol:“none”,
showSymbol:false,
代码：
var mess = ["00:00", "03：00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00", "24:00"];
var mess3 = preData;
var mess4 = curData;
var option = {
legend: {
show: true,
itemWidth: 20,
itemHeight: 10,
itemGap: 10,
textStyle: {
fontSize: 10,
color: "#ccc",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(0, 255, 233,0)",
},
{
offset: 0.5,
color: "rgba(255, 255, 255,1)",
},
{
offset: 1,
color: "rgba(0, 255, 233,0)",
},
],
global: false,
},
},
},
},
grid: {
top: "25%",
left: "10%",
right: "5%",
bottom: "25%",
},
xAxis: {
data: mess,
axisTick: {
show: false,//是否显示坐标轴刻度。
},
boundaryGap: false,//x轴留白，默认是true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间
axisLine: {
show: true,
lineStyle: {
color: "#414965",
},
},
axisLabel: {
interval: 1,
textStyle: {
color: "#7089ba",
fontSize: 12,
},
margin: 10, //刻度标签与轴线之间的距离。
},
},
yAxis: {
name:unit,
nameTextStyle: {
color: "#fff",
},
splitLine: { //是否显示分隔线
show: true,
lineStyle: {
color: "#414965",
opacity: 0.3,
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: "#7089ba",
fontSize: 12,
},
},
splitNumber: 3//坐标轴的分割段数
},
series: [
{
name: "今日",
type: "line",
smooth: true, //是否平滑
showAllSymbol: false,//不显示折线图的拐点
symbol: "circle",
symbolSize: 2,
lineStyle: {
normal: {
color: "#44b6fe",
},
},
itemStyle: {
color: "#44b6fe",
},
tooltip: {
show: true,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{
offset: 0,
color: "rgba(53,194,246,0.7)",
},
{
offset: 1,
color: "rgba(53,194,246,0.1)",
},
],
false
),
shadowBlur: 20,
},
},
data: mess4,
markPoint: {
symbolSize: 30,
data: [
{ type: "max", name: "最大值" },
{ type: "min", name: "最小值" },
],
},
},
{
name: "昨日",
type: "line",
smooth: true, //是否平滑
showAllSymbol: false,
symbol: "circle",
symbolSize: 2,
lineStyle: {
normal: {
color: "#ad16ff",
},
},
itemStyle: {
color: "#ad16ff",
},
tooltip: {
show: true,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{
offset: 0,
color: "rgba(179,64,242,0.7)",
},
{
offset: 1,
color: "rgba(179,64,242,0.1)",
},
],
false
),
shadowColor: "rgba(179,64,242, 0)",
shadowBlur: 20,
},
},
data: mess3,
markPoint: {
symbolSize: 30,
data: [
{ type: "max", name: "最大值" },
{ type: "min", name: "最小值" },
],
},
},
],
};
到此这篇关于基于Echart实现折线图的绘制详解的文章就介绍到这了,更多相关Echart折线图内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具！
