ECharts设置双x轴

news2025/1/31 3:14:21

下面给大家分享一下ECharts的几种功能，循序渐进地实现一个复杂的曲线图。

V1.0：

代码：

let option = {
  title: { text: 'V1.0' },
  legend: { data:['销量'] },
  // x轴的数据
  xAxis: {
    data: ["王","胡歌","曾小贤","吕小布","关谷神奇","阿不思.邓布利多"],
    axisLabel:{ interval: 0 }
  },
  yAxis: {},
  // 可用于指定统计图类型
  series: [{
    name: '销量',
    type: 'line',
    smooth: true,
    data: [5, 20, 36, 10, 30, 190]
  }]
}

效果图：
在这里插入图片描述

设置双x轴：

代码：

let option = {
  title: { text: '设置双x轴' },
  legend: { data:['销量'] },
  // x轴的数据
  xAxis: [{
    data: ["王","胡歌","曾小贤","吕小布","关谷神奇","阿不思.邓布利多"],
    axisLabel:{ interval: 0 }
  }, {
    data: ["王","胡歌","曾小贤","吕小布","关谷神奇","阿不思.邓布利多"],
    axisLabel:{ interval: 0 },
    position: 'bottom',// 很重要，如果没有这个设置，默认第二个x轴就会在图表的顶部
    offset: 40,// X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
  }],
  yAxis: {},
  // 可用于指定统计图类型
  series: [{
    name: '销量',
    type: 'line',
    smooth: true,
    data: [5, 20, 36, 10, 30, 190]
  }]
}

position: 很重要，设置第二条x轴相对于图表的位置，如果没有这个设置，默认第二个x轴就会在图表的顶部
offset: x轴相对于默认位置的偏移，在相同的 position 上有多个x轴的时候有用，值越大距离第一条x轴就越远
效果图：
在这里插入图片描述

优化双x轴：

代码：

let option = {
  title: { text: '优化双x轴' },
  legend: { data:['销量'] },
  grid: { bottom: '40%' },// 组件离容器下侧的距离，值可以是像 20 这样的具体像素值，也可以是像 '20%' 这样相对于容器高宽的百分比
  // x轴的数据
  xAxis: [{
    data: ["王","胡歌","曾小贤","吕小布","关谷神奇","阿不思.邓布利多"],
    axisLabel:{
      interval: 0,
      rotate: 60// 倾斜角度
    }
  }, {
    data: ["王","胡歌","曾小贤","吕小布","关谷神奇","阿不思.邓布利多"],
    axisLabel:{ interval: 0 },
    position: 'bottom',// 很重要，如果没有这个设置，默认第二个x轴就会在图表的顶部
    offset: 90,// X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
    type: 'category',// 坐标轴类型
    axisTick:{ show: false },// 是否显示坐标轴刻度
    axisLine:{ show: false },// 是否显示坐标轴轴线
  }],
  yAxis: {},
  // 可用于指定统计图类型
  series: [{
    name: '销量',
    type: 'line',
    smooth: true,
    data: [5, 20, 36, 10, 30, 190]
  }]
}

grid: { bottom: ‘40%’ },// 组件离容器下侧的距离，值可以是像 20 这样的具体像素值，也可以是像 ‘20%’ 这样相对于容器高宽的百分比
rotate: 倾斜角度
type: 坐标轴类型

  • ‘value’ 数值轴，适用于连续数据。
  • ‘category’ 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
  • ‘time’ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
  • ‘log’ 对数轴。适用于对数数据。

axisTick: 是否显示坐标轴刻度
axisLine: 是否显示坐标轴轴线
效果图：
在这里插入图片描述

x轴添加滚动条：

代码：

let option = {
  title: { text: 'x轴添加滚动条' },
  legend: { data:['销量'] },
  grid: { bottom: '40%' },// 组件离容器下侧的距离，值可以是像 20 这样的具体像素值，也可以是像 '20%' 这样相对于容器高宽的百分比
  // x轴的数据
  xAxis: [{
    data: ["王","胡歌","曾小贤","吕小布","关谷神奇","阿不思.邓布利多","王","胡歌","曾小贤","吕小布","关谷神奇","邓布利多","王","胡歌","曾小贤","吕小布","关谷神奇","邓布利多"],
    axisLabel:{
      interval: 0,
      rotate: 60// 倾斜角度
    }
  }, {
    data: ["王","胡歌","曾小贤","吕小布","关谷神奇","阿不思.邓布利多","王","胡歌","曾小贤","吕小布","关谷神奇","邓布利多","王","胡歌","曾小贤","吕小布","关谷神奇","邓布利多"],
    axisLabel:{ interval: 0 },
    position: 'bottom',// 很重要，如果没有这个设置，默认第二个x轴就会在图表的顶部
    offset: 90,// X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
    type: 'category',// 坐标轴类型
    axisTick:{ show: false },// 是否显示坐标轴刻度
    axisLine:{ show: false },// 是否显示坐标轴轴线
  }],
  // dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。也就是实现滚动条的组件
  dataZoom: {
    start: 0,// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围
    height: 10,// 组件的高度。水平布局默认 30，竖直布局默认自适应。比 top 和 bottom 优先级高
    left: '10%',// 组件离容器左侧的距离
    right: '10%',// 组件离容器右侧的距离
  },
  yAxis: {},
  // 可用于指定统计图类型
  series: [{
    name: '销量',
    type: 'line',
    smooth: true,
    data: [5, 20, 36, 10, 30, 190, 5, 20, 36, 10, 30, 190, 5, 20, 36, 10, 30, 190]
  }]
}

dataZoom: 组件，用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。也就是实现滚动条的组件
start: 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围
height: 组件的高度。水平布局默认 30，竖直布局默认自适应。比 top 和 bottom 优先级高
left: ‘10%’,// 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐
right: ‘10%’,// 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应
效果图：
在这里插入图片描述

优化滚动条：

代码：

let option = {
  title: { text: '优化滚动条' },
  legend: { data:['销量'] },
  grid: { bottom: '40%' },// 组件离容器下侧的距离，值可以是像 20 这样的具体像素值，也可以是像 '20%' 这样相对于容器高宽的百分比
  // x轴的数据
  xAxis: [{
    data: ["王","胡歌","曾小贤","吕小布","关谷神奇","阿不思.邓布利多","王","胡歌","曾小贤","吕小布","关谷神奇","邓布利多","王","胡歌","曾小贤","吕小布","关谷神奇","邓布利多"],
    axisLabel:{
      interval: 0,
      rotate: 60// 倾斜角度
    }
  }, {
    data: ["王","胡歌","曾小贤","吕小布","关谷神奇","阿不思.邓布利多","王","胡歌","曾小贤","吕小布","关谷神奇","邓布利多","王","胡歌","曾小贤","吕小布","关谷神奇","邓布利多"],
    axisLabel:{ interval: 0 },
    position: 'bottom',// 很重要，如果没有这个设置，默认第二个x轴就会在图表的顶部
    offset: 90,// X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
    type: 'category',// 坐标轴类型
    axisTick:{ show: false },// 是否显示坐标轴刻度
    axisLine:{ show: false },// 是否显示坐标轴轴线
  }],
  // dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。也就是实现滚动条的组件
  dataZoom: {
    start: 0,// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围
    height: 0,// 组件的高度。指的不是滚动条本身，而是滚动条下面的组件。水平布局默认 30，竖直布局默认自适应。比 top 和 bottom 优先级高
    left: '10%',// 组件离容器左侧的距离
    right: '10%',// 组件离容器右侧的距离
    bottom: 30,// 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应
    startValue: 0,// 数据窗口范围的起始数值。如果设置了 dataZoom-slider.start 则 startValue 失效
    endValue: 6,// 很重要，页面展示的x轴数据量，6表示页面只有6+1=7条数据，总数据量超过7条滚动条就开始起作用了。数据窗口范围的结束数值。如果设置了 dataZoom-slider.end 则 endValue 失效
    show: true,// 很重要，是否显示组件。如果设置为false，滚动条就没有了，但是数据过滤的功能还存在。默认值是true
    realtime: true,// 很重要，拖动时，是否实时更新图表的视图。如果设置为 false，则只在拖拽结束的时候更新。默认值是true
    backgroundColor: '#ddd',// 组件的背景颜色
    handleStyle: {
      borderColor: '#cacaca',// 图形的描边颜色。支持的颜色格式同 color，不支持回调函数
      borderWidth: '1',// 描边线宽。为 0 时无描边
      shadowBlur: 2,// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
      shadowColor: '#ddd',// 阴影颜色。也就是滚动条左右两个小点的颜色
    },
    showDataShadow: false,// 很重要，是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。默认值是auto，也就是有数据阴影
    showDetail: false,// 很重要，是否显示detail，即拖拽时候滚动条左右是否显示详细数据信息。默认值是true
    xAxisIndex: [0, 1],// 很重要，设置滚动条控制的x轴，[0,1]表示它控制了第一条和第二条x轴，[0]表现为第二条x轴没有滚动条，所有数据都会展示在页面
  },
  yAxis: {},
  // 可用于指定统计图类型
  series: [{
    name: '销量',
    type: 'line',
    smooth: true,
    data: [5, 20, 36, 10, 30, 190, 5, 20, 36, 10, 30, 190, 5, 20, 36, 10, 30, 190]
  }]
}

bottom: 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应
startValue: 数据窗口范围的起始数值。如果设置了 dataZoom-slider.start 则 startValue 失效
endValue: 很重要，页面展示的x轴数据量，6表示页面只有6+1=7条数据，总数据量超过7条滚动条就开始起作用了。数据窗口范围的结束数值。如果设置了 dataZoom-slider.end 则 endValue 失效
show: 很重要，是否显示组件。如果设置为false，滚动条就没有了，但是数据过滤的功能还存在。默认值是true
realtime: 很重要，拖动时，是否实时更新图表的视图。如果设置为 false，则只在拖拽结束的时候更新。默认值是true
backgroundColor: 组件的背景颜色
borderColor: 图形的描边颜色。支持的颜色格式同 color，不支持回调函数
borderWidth: 描边线宽。为 0 时无描边
shadowBlur: 图形阴影的模糊大小。该属性配合shadowColor,shadowOffsetX,shadowOffsetY一起设置图形的阴影效果。示例：

{
shadowColor: ‘rgba(0, 0, 0, 0.5)’,
shadowBlur: 10
}

shadowColor: 阴影颜色。也就是滚动条左右两个小点的颜色
showDataShadow: 很重要，是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。默认值是auto，也就是有数据阴影
showDetail: 很重要，是否显示detail，即拖拽时候滚动条左右是否显示详细数据信息。默认值是true
xAxisIndex: 很重要，设置滚动条控制的x轴，不指定时，当 dataZoom-slider.orient 为 'horizontal’时，默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。示例：

option: {
xAxis: [
{…}, // 第一个 xAxis
{…}, // 第二个 xAxis
{…}, // 第三个 xAxis
{…} // 第四个 xAxis
],
dataZoom: [
{ // 第一个 dataZoom 组件
xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
},
{ // 第二个 dataZoom 组件
xAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 xAxis
}
] }

效果图：
在这里插入图片描述

鼠标悬浮显示数据（V2.0）：

代码：

let option = {
  title: { text: '鼠标悬浮显示数据（V2.0）' },
  legend: { data:['销量'] },
  grid: { bottom: '40%' },// 组件离容器下侧的距离，值可以是像 20 这样的具体像素值，也可以是像 '20%' 这样相对于容器高宽的百分比
  // x轴的数据
  xAxis: [{
    data: ["王","胡歌","曾小贤","吕小布","关谷神奇","阿不思.邓布利多","王","胡歌","曾小贤","吕小布","关谷神奇","邓布利多","王","胡歌","曾小贤","吕小布","关谷神奇","邓布利多"],
    axisLabel:{
      interval: 0,
      rotate: 60// 倾斜角度
    }
  }, {
    data: ["王","胡歌","曾小贤","吕小布","关谷神奇","阿不思.邓布利多","王","胡歌","曾小贤","吕小布","关谷神奇","邓布利多","王","胡歌","曾小贤","吕小布","关谷神奇","邓布利多"],
    axisLabel:{ interval: 0 },
    position: 'bottom',// 很重要，如果没有这个设置，默认第二个x轴就会在图表的顶部
    offset: 90,// X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
    type: 'category',// 坐标轴类型
    axisTick:{ show: false },// 是否显示坐标轴刻度
    axisLine:{ show: false },// 是否显示坐标轴轴线
  }],
  // dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。也就是实现滚动条的组件
  dataZoom: {
    start: 0,// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围
    height: 0,// 组件的高度。指的不是滚动条本身，而是滚动条下面的组件。水平布局默认 30，竖直布局默认自适应。比 top 和 bottom 优先级高
    left: '10%',// 组件离容器左侧的距离
    right: '10%',// 组件离容器右侧的距离
    bottom: 30,// 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应
    startValue: 0,// 数据窗口范围的起始数值。如果设置了 dataZoom-slider.start 则 startValue 失效
    endValue: 6,// 很重要，页面展示的x轴数据量，6表示页面只有6+1=7条数据，总数据量超过7条滚动条就开始起作用了。数据窗口范围的结束数值。如果设置了 dataZoom-slider.end 则 endValue 失效
    show: true,// 很重要，是否显示组件。如果设置为false，滚动条就没有了，但是数据过滤的功能还存在。默认值是true
    realtime: true,// 很重要，拖动时，是否实时更新图表的视图。如果设置为 false，则只在拖拽结束的时候更新。默认值是true
    backgroundColor: '#ddd',// 组件的背景颜色
    handleStyle: {
      borderColor: '#cacaca',// 图形的描边颜色。支持的颜色格式同 color，不支持回调函数
      borderWidth: '1',// 描边线宽。为 0 时无描边
      shadowBlur: 2,// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
      shadowColor: '#ddd',// 阴影颜色。也就是滚动条左右两个小点的颜色
    },
    showDataShadow: false,// 很重要，是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。默认值是auto，也就是有数据阴影
    showDetail: false,// 很重要，是否显示detail，即拖拽时候滚动条左右是否显示详细数据信息。默认值是true
    xAxisIndex: [0, 1],// 很重要，设置滚动条控制的x轴，[0,1]表示它控制了第一条和第二条x轴，[0]表现为第二条x轴没有滚动条，所有数据都会展示在页面
  },
  // 提示框组件，也就是实现鼠标悬浮显示数据的组件
  tooltip: {
    trigger: 'axis',// 触发类型，'axis'是坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
    // 坐标轴指示器配置项，配置指示器类型等
    axisPointer: {
      type: 'shadow'// 指示器类型，'shadow'是阴影指示器
    }
  },
  yAxis: {},
  // 可用于指定统计图类型
  series: [{
    name: '销量',
    type: 'line',
    smooth: true,
    data: [5, 20, 36, 10, 30, 190, 5, 20, 36, 10, 30, 190, 5, 20, 36, 10, 30, 190]
  }]
}

tooltip: 提示框组件，也就是实现鼠标悬浮显示数据的组件，提示框组件可以设置在多种地方：

  • 可以设置在全局，即 tooltip
  • 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
  • 可以设置在系列中，即 series.tooltip
  • 可以设置在系列的每个数据项中，即 series.data.tooltip

trigger: 触发类型，可选：

  • ‘item’

数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。

  • ‘axis’

坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。

  • ‘none’

什么都不触发。
axisPointer: 配置坐标轴指示器的快捷方式。实际上坐标轴指示器的全部功能，都可以通过轴上的 axisPointer 配置项完成（例如 xAxis.axisPointer 或 angleAxis.axisPointer）。但是使用 tooltip.axisPointer 在简单场景下会更方便一些。

注意： tooltip.axisPointer 中诸配置项的优先级低于轴上的 axisPointer 的配置项。

坐标轴指示器是指示坐标轴当前刻度的工具。
type: 指示器类型，可选：

  • ‘line’ 直线指示器
  • ‘shadow’ 阴影指示器
  • ‘none’ 无指示器
  • ‘cross’ 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。

效果图：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/407663.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Vue3使用axios的配置教程详解

Vue3使用axios的配置教程详解

1.安装 npm install --save axios vue-axios2.在src根目录创建service文件夹。然后创建axios.js 2.1在axios.js添加拦截器,请求拦截:initAxios.interceptors.request;响应拦截:initAxios.interceptors.response import axios from "axios";const initAxios axios.…
阅读更多...
用idea创建vue项目

用idea创建vue项目

目录 一、安装node.js （1）下载安装包 （2）测试node.js是否安装成功 （3）安装vue和全局vue-cli 二、idea安装vue.js插件 三、创建vue项目 四、修改配置文件 五、配置idea运行的环境 一、安装node.js …
阅读更多...
ERROR: npm v9.4.1 is known not to run on Node.js v8.13.0.

ERROR: npm v9.4.1 is known not to run on Node.js v8.13.0.

前面全是废话，大家可以直接看序号8下面的nvm的命令以及序号11之后的问题解决，希望能帮助到你们！是个什么问题呢？昨天领导给了个前后端分离的项目，让不才我搭建一下环境，我兴高采烈的拿着项目搭建手册按照文…
阅读更多...
微信小程序开发 app.json全局配置

微信小程序开发 app.json全局配置

JSON 是一种数据格式，在实际开发中，JSON 总是以配置文件的形式出现。app.json 是当前小程序的全局配置，可以通过app.json对小程序项目进行设置所有页面路径、窗口外观、界面表现、底部 tab 等。{"pages": ["pages/index/index…
阅读更多...
vue中实现文件批量打包压缩下载（以及下载跨域问题分析）

vue中实现文件批量打包压缩下载（以及下载跨域问题分析）

上次做了一个选择多个数据生成多个二维码并下载，当时项目催的紧，就简单写了个循环生成二维码下载，一次性会下载很多文件，特别难整理； 刚好这次项目又遇到类似这种功能，需要一次性批量下载多个文件&#xf…
阅读更多...
浅谈uniapp的flex布局

浅谈uniapp的flex布局

文章目录1 flex布局1.1 flex-direction1.2 flex-wrap1.3 justify-content1.4 align-items1.5 align-content属性1.6 其他项目属性1.6.1 order属性1.6.2 flex-grow属性1.6.3 flex-shrink属性1.6.4 flex属性1 flex布局 ​ flex是Flexible Box的缩写，意为”弹性布局”…
阅读更多...
TypeError: this.$message is not a function报错情况解决

TypeError: this.$message is not a function报错情况解决

在最近负责的一个前端项目中，使用this.$message报错了，之前也没注意，然后这次抽空看了一下问题 报错原因是因为我用了这种提示写法： 首先，我最开始是用基础写法： 但是这种写法有个弊端，就是如…
阅读更多...
【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇

【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇

⌚️⌚️⌚️个人格言：时间是亳不留情的，它真使人在自己制造的镜子里照见自己的真相! 📖Git专栏：📑Git篇🔥🔥🔥 📖JavaScript专栏：📑js实用技巧篇…
阅读更多...
腾讯地图api使用——地图选点自动定位到当前位置

腾讯地图api使用——地图选点自动定位到当前位置

WebService API | 腾讯位置服务 用户在使用腾讯地图api时，需先申请腾讯位置服务API Key，该key在调用时用于唯一标识开发者身份。 1.自动获取当前位置 引入以下js文件 https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js //获…
阅读更多...
FAST_LIO_SAM 融入后端优化的FASTLIO SLAM 系统 前端：FAST_LIO2 后端：LIO_SAM

FAST_LIO_SAM 融入后端优化的FASTLIO SLAM 系统 前端：FAST_LIO2 后端：LIO_SAM

FAST_LIO_SAM Front_end : fastlio2 Back_end : lio_sam Videos : FAST-LIO-SAM Bilibili_link Source code : FAST_LIO_SAM Related worked 1.FAST-LIO2为紧耦合的lio slam系统，因其缺乏前端，所以缺少全局一致性，参考lio_sam的后端部分&…
阅读更多...
Vue3 reactive丢失响应式问题

Vue3 reactive丢失响应式问题

问题描述&#xff1a;使用 reactive 定义的对象&#xff0c;重新赋值后失去了响应式&#xff0c;改变值视图不会发生变化。 测试代码&#xff1a; <template><div><p>{{ title }}</p><ul><li v-for"(item, index) in tableData" …
阅读更多...
【小程序】组件化开发的基本使用(一)

【小程序】组件化开发的基本使用(一)

文章目录小程序组件化开发基本使用小程序组件化思想自定义组件的过程组件样式实现细节小程序组件化开发基本使用 小程序组件化思想 组件插槽定义使用 小程序在刚刚推出时是不支持组件化的, 也是为人诟病的一个点&#xff1a; 但是从v1.6.3开始, 小程序开始支持自定义组件开发…
阅读更多...
如何创建一个简易的HTML网页框架

如何创建一个简易的HTML网页框架

背景&#xff1a; 在我们初步学习了web前端开发的一些知识时&#xff0c;我们可能会考虑构建一个简单的html网站&#xff0c;但是&#xff0c;如何着手去开始我们的网站&#xff0c;对于新手来说可能是个问题。 在这篇文章中&#xff0c;我将介绍我在构建一个简易的网页时&am…
阅读更多...
Vue2中使用axios的三种方法

Vue2中使用axios的三种方法

第一种 原始方法 直接在项目中使用(不建议使用) 这种方法最简单粗暴 优点&#xff1a;不需要做封装&#xff0c;不需要做配置傻瓜式操作&#xff0c;不需要做异步处理 缺点&#xff1a;代码太繁琐&#xff0c;当遇到请求过多的时候&#xff0c;这样写不适合读写 注意&#…
阅读更多...
使用videojs播放m3u8视频

使用videojs播放m3u8视频

vue3使用videojs 播放m3u8格式视频 videojs是一个播放视频的js库&#xff0c;可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频。流媒体传输协议(hls)定义了用来控制播放的m3u8文件 m3u8是一个文本文件(播放列表文件)&#xff0c;里面的内容就是被播放的音视频文件路…
阅读更多...
vue3 - 组件注册和组件通信（setup语法糖）

vue3 - 组件注册和组件通信（setup语法糖）

这里介绍的是vue3中组件的注册和组件通信父传子&#xff0c;子传父。 前提&#xff1a;用的是vue3版本且使用了setup语法糖 <script setup> .....<script> 1&#xff0c;组件注册 1.1&#xff0c;全局注册&#xff1a; 全局注册需要在 在main.js中进行注册&#x…
阅读更多...
SpringBoot整合调用微信模板方法实现微信公众号消息通知推送，Java实现微信公众号给关注用户推送自定义消息通知（手把手从0到1）

SpringBoot整合调用微信模板方法实现微信公众号消息通知推送，Java实现微信公众号给关注用户推送自定义消息通知（手把手从0到1）

目录 概述 公众号给关注用户推送自定义消息 一、申请公众号模板消息 二、获取安装“web开发者工具” 三、微信网页授权说明 四、微信网页授权 - 流程时序图 五、HTTPClient 实现微信公众号消息推送与发布&#xff08;四步走&#xff09; 六、通过weixin-java-mp SDK实现…
阅读更多...
flex布局（弹性盒子一）

flex布局（弹性盒子一）

目录 一、弹性盒子的开启 二、弹性盒子的不同样式 1.flex-direction&#xff1a;子项目的排列方向 2.flex-wrap&#xff1a;子项目多行 3. flex-flow 是flex-direction和flex-wrap的一起指定&#xff08;简写&#xff09; 一、弹性盒子的开启 设置内容区的样式&#xff1a…
阅读更多...
Vue组件库实现按需引入可以这么做

Vue组件库实现按需引入可以这么做

本文为Varlet组件库源码主题阅读系列第七篇&#xff0c;读完本篇&#xff0c;可以了解到如何通过unplugin-vue-components插件来为你的组件库实现按需引入。 手动引入 前面的文章中我们介绍过Varlet组件库的打包流程&#xff0c;最后会打包成几种格式&#xff0c;其中module和…
阅读更多...
JavaScript对象

JavaScript对象

文章目录前言一、对象1.1什么是对象1.2为什么需要对象二、创建对象的三种方式1.利用字面量创建对象2.对象的调用2.1变量、属性、函数、方法总结3.利用new Object创建对象3.1利用构造函数创建对象4.new关键字总结前言 一、对象 1.1什么是对象 现实生活中&#xff1a;万物皆对象…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023