zqy233的前端学习笔记

主题

回到顶部
索引

折线图

所有实例代码均可在ehcarts的background环境中直接运行

设置线条不同颜色

json
option = {
  color:['pink','skyblue'],
}

option = {
  color:['pink','skyblue'],
}

去掉节点/平滑曲线

js
option = {
  ...
  series: [
    {
      symbol:'none', //去掉折线图中的节点
      smooth: false  //true 为平滑曲线，false为直线
      data: [45, 35, 28, 22, 18, 32],
      type: "line",
    }
  ]
}

option = {
  ...
  series: [
    {
      symbol:'none', //去掉折线图中的节点
      smooth: false  //true 为平滑曲线，false为直线
      data: [45, 35, 28, 22, 18, 32],
      type: "line",
    }
  ]
}

设置线条下方渐变色

js
option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [45, 35, 28, 22, 18, 32],
      type: "line",
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#2F9CFE'
            },
            {
              offset: 1,
              color: '#ffffff'
            }
          ],
          global: false
        }
      }
    }
  ]
}

option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [45, 35, 28, 22, 18, 32],
      type: "line",
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#2F9CFE'
            },
            {
              offset: 1,
              color: '#ffffff'
            }
          ],
          global: false
        }
      }
    }
  ]
}
json

去除折线上小圆点

js
option = {
  color:['pink','skyblue'],
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      symbol: "none",
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
       symbol: "none",
      data: [110, 220, 124, 118, 335, 117, 160],
      type: 'line'
    }
  ]
}

option = {
  color:['pink','skyblue'],
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      symbol: "none",
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
       symbol: "none",
      data: [110, 220, 124, 118, 335, 117, 160],
      type: 'line'
    }
  ]
}

分段区域色

js
option = {
  yAxis: {
     show:true
  },
  xAxis: {
    axisLine: {
      show: false // y轴线消失
    },
    axisTick: { show: false },
    type: 'category',
    boundaryGap: false,
    data: [1,2,3,4,5]
  },
  series: [
    {
      smooth: true,
      symbol: 'none',
      type: 'line',
      color: 'rgba(24, 144, 255, 0.3)',
      areaStyle: {
        color: 'rgba(24, 144, 255, 0.1)'
      },
      data: [0, 1, '-', '-', '-']
    },
    {
      smooth: true,
      symbol: 'none',
      type: 'line',
      color: 'rgba(24, 144, 255, 0.3)',
      areaStyle: {
        color: 'rgba(24, 144, 255, 1)'
      },
      data: ['-', 1, 3, '-', '-']
    },
    {
      smooth: true,
      symbol: 'none',
      type: 'line',
      color: 'rgba(24, 144, 255, 0.3)',
      areaStyle: {
        color: 'rgba(24, 144, 255, 0.7)'
      },
      data: ['-', '-', 3, 3, '-']
    },
    {
      smooth: true,
      symbol: 'none',
      type: 'line',
      color: 'rgba(24, 144, 255, 0.3)',
      areaStyle: {
        color: 'rgba(24, 144, 255, 0.3)'
      },
      data: ['-', '-', '-', 3, 0]
    }
  ]
}


option = {
  yAxis: {
     show:true
  },
  xAxis: {
    axisLine: {
      show: false // y轴线消失
    },
    axisTick: { show: false },
    type: 'category',
    boundaryGap: false,
    data: [1,2,3,4,5]
  },
  series: [
    {
      smooth: true,
      symbol: 'none',
      type: 'line',
      color: 'rgba(24, 144, 255, 0.3)',
      areaStyle: {
        color: 'rgba(24, 144, 255, 0.1)'
      },
      data: [0, 1, '-', '-', '-']
    },
    {
      smooth: true,
      symbol: 'none',
      type: 'line',
      color: 'rgba(24, 144, 255, 0.3)',
      areaStyle: {
        color: 'rgba(24, 144, 255, 1)'
      },
      data: ['-', 1, 3, '-', '-']
    },
    {
      smooth: true,
      symbol: 'none',
      type: 'line',
      color: 'rgba(24, 144, 255, 0.3)',
      areaStyle: {
        color: 'rgba(24, 144, 255, 0.7)'
      },
      data: ['-', '-', 3, 3, '-']
    },
    {
      smooth: true,
      symbol: 'none',
      type: 'line',
      color: 'rgba(24, 144, 255, 0.3)',
      areaStyle: {
        color: 'rgba(24, 144, 255, 0.3)'
      },
      data: ['-', '-', '-', 3, 0]
    }
  ]
}

渐变区域色

js
 areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(241, 191, 104)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "white", // 100% 处的颜色
                    },
                  ],
                },
              },

 areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(241, 191, 104)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "white", // 100% 处的颜色
                    },
                  ],
                },
              },

主动关闭某个折线

js
this.chartLine.on("legendselectchanged", () => {
  this.options.legend.selected[""] = false
  this.chartLine.setOption(this.options)
})

this.chartLine.on("legendselectchanged", () => {
  this.options.legend.selected[""] = false
  this.chartLine.setOption(this.options)
})

设置单位

js
 yAxis: {
          type: "value",
          name: "单位：万千瓦",
          axisLabel: {
            color: "#444343"
          },
          max: function (value) {
            return Math.floor(value.max * 1.10);
          },
          min: function (value) {
            return Math.floor(value.min / 1.10);
          },
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          }
        },

 yAxis: {
          type: "value",
          name: "单位：万千瓦",
          axisLabel: {
            color: "#444343"
          },
          max: function (value) {
            return Math.floor(value.max * 1.10);
          },
          min: function (value) {
            return Math.floor(value.min / 1.10);
          },
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          }
        },

示例1-渐变区域色折线图

js
option = {
  color: ['#6A99FA'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#000'
      }
    }
  },
  grid: {
    top: 100,
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '来访人数',
      type: 'line',
      data: [500, 132, 101, 134, 90, 230, 210],
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#E0EAFE' 
            },
            {
              offset: 1,
              color: '#fff' 
            }
          ]
        }
      }
    }
  ]
};

option = {
  color: ['#6A99FA'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#000'
      }
    }
  },
  grid: {
    top: 100,
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '来访人数',
      type: 'line',
      data: [500, 132, 101, 134, 90, 230, 210],
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#E0EAFE' 
            },
            {
              offset: 1,
              color: '#fff' 
            }
          ]
        }
      }
    }
  ]
};

示例2-多折线图

js
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        show: true
      }
    }
  },
  legend: {
    top: 35,
    data: ['退役军人', '现役军人', '军人家属', '陪同人员', '其他人员']
  },
  grid: {
    top: 100,
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '退役军人',
      type: 'line',
      data: [500, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '现役军人',
      type: 'line',
      data: [0, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '军人家属',
      type: 'line',
      data: [0, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '陪同人员',
      type: 'line',
      data: [0, 332, 301, 334, 390, 330, 1]
    },
    {
      name: '其他人员',
      type: 'line',
      data: [0, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};


option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        show: true
      }
    }
  },
  legend: {
    top: 35,
    data: ['退役军人', '现役军人', '军人家属', '陪同人员', '其他人员']
  },
  grid: {
    top: 100,
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '退役军人',
      type: 'line',
      data: [500, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '现役军人',
      type: 'line',
      data: [0, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '军人家属',
      type: 'line',
      data: [0, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '陪同人员',
      type: 'line',
      data: [0, 332, 301, 334, 390, 330, 1]
    },
    {
      name: '其他人员',
      type: 'line',
      data: [0, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

Released under the MIT License.

Copyright © 2022.4-2024.7