从入门到精通：Echarts 图表常用配置项全攻略

已于 2025-05-22 14:11:32 修改
阅读量1.1k 收藏 32
点赞数 26
分类专栏： echarts 文章标签： 前端 echarts
于 2025-03-17 08:48:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Shids_/article/details/145591696
版权

前言

相信不少同学在使用 Echarts 图表时避免不了要调整一些配置项，但对于很多初学者来说，面对 Echarts 众多的配置项可能会感到无从下手。别担心，本文将带大家全面了解 Echarts 图表常用的配置项，从基础到进阶，一步步揭开数据可视化的神秘面纱，让你轻松驾驭 Echarts。

一、xAxis/yAxis 相关

1.1 修改x/y轴线及字体颜色

在 x/y 轴中定义 axisLine 配置项进行修改即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    xAxis: {
        axisLine: {
            lineStyle: {
                color: "blue"
            }
        },
    },
    yAxis: {
        axisLine: {  
            lineStyle: {
                color: "blue",
            }
        },
    },
}

实现效果

在这里插入图片描述

1.2 x/y轴添加描述文字

在 x/y 轴加一个 name 属性即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    yAxis: {
        name: "（万辆）",
    },
}

实现效果

在这里插入图片描述

1.3 去掉背景分隔线

在 y 轴中定义 splitLine 配置项，将 show 设置为 false 即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    yAxis: {
        splitLine: {
            show: false
        },
    },
}

实现效果

在这里插入图片描述

1.4 设置x/y轴文字倾斜

在 x/y 轴中加上 axisLabel 配置项，加上 rotate 属性设置需要的角度值即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    xAxis: {
        axisLabel: {
            rotate: 40,
        },  
    },
}

实现效果

在这里插入图片描述

1.5 x轴字数过多展示省略号

在 x 轴中加上 axisLabel 配置项，使用 formatter 方法格式化处理即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    xAxis: {
		axisLabel: {
		  formatter: function (value) {
		    if (value.length > 4) {
 		     return `${value.slice(0, 4)}...`;
 		   }
 		   return value;
		  },
		},
    },
}

实现效果

在这里插入图片描述

1.6 数据量大时为x/y轴添加滚动条

在 option 中定义 dataZoom 配置项设置其中属性即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    dataZoom: [
        {
            type: 'slider',//类型
            show: true,//显示
            yAxisIndex: [0],//使用y轴的index,默认值为0
            start: 0, //数据窗口范围的起始百分比
            end: 100//数据窗口范围的结束百分比
        },
    ],
 }

实现效果

在这里插入图片描述

1.7 隐藏x/y轴刻度线

在 x/y 轴中定义 axisTick 配置项设置 show 属性即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
	xAxis: {
    	axisTick: {
        	show: false,
    	},
	},
 }

实现效果

在这里插入图片描述

1.8 显示x/y坐标轴轴线

在 x/y 轴中定义 axisLine 配置项设置 show 属性即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
	yAxis: {
    	axisLine: {
        	show: false,
    	},
	},
 }

实现效果

在这里插入图片描述

1.9 y轴坐标不为小数

在 y 轴中定义 minInterval 配置项，将其设置为 1 即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
	yAxis: {
    	minInterval: 1, // 设置成1保证坐标轴分割刻度显示成整数。
	},
 }

实现效果

在这里插入图片描述

1.10 数据起点从x/y轴原点（0刻度）开始

在 x/y 轴中定义 boundaryGap 配置项，将其设置为 false 即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
	xAxis: {
  		type: "category",
  		data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  		boundaryGap: false
	},
}

实现效果

在这里插入图片描述

1.11 x/y轴标记画线

在 series 轴中定义 markLine 配置项，定义画线的规则即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
  series: [
    {
      markLine: {
        data: [
          {
            xAxis: "Indonesia",
            lineStyle: { color: "blue", type: "solid" },
          },
          {
            xAxis: "China",
            lineStyle: { color: "blue", type: "solid" },
          },
        ],
        symbol: "none", // 标线两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定
        label: { show: false },
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
};

实现效果

在这里插入图片描述

1.12 y轴根据数据动态调整范围（不从 0 开始）

在 yAxis 轴中添加 min 和 max 配置项，定义规则从而更直观地展示数据的变化。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
    min: (value) => Math.max(0, value.min - 5), // 最小值下探 5 个单位并确保最小值不小于 0
    max: (value) => value.max + 5, // 最大值上探 5 个单位
  },
  label: {
    show: true,
  },
  series: [
    {
      data: [83, 88, 89, 87, 90, 85, 95, 92],
      type: "bar",
    },
  ],
};

实现效果

在这里插入图片描述

二、series 相关

2.1 修改图形颜色

在 series 中定义 color 配置项设置颜色即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
	series: [
	  {
	    type: "bar",
	    color: ["rgb(40,135,193)"],
	  },
	  {
	    type: "bar",
	    color: ["rgb(255,230,15)"],
 	 },
	],
}

实现效果

在这里插入图片描述

2.2 设置柱图的宽度

在 series 中定义 barWidth 配置项设置需要的值即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    series: [
        {type: 'bar', barWidth: 10},
        {type: 'bar', barWidth: 18}
    ]
}

实现效果

在这里插入图片描述

2.3 饼图展示数值及占比

在 series 中定义 itemStyle 配置项，加上 itemStyle 属性，通过 normal 定义图形的默认状态即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    series: [
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    formatter: '{b} : {c} ({d}%)', //b:名称；c：值；d：所占百分比
                },
            }
        },
    ]
}

实现效果

在这里插入图片描述

2.4 饼图指示线显隐

在 series 中定义 labelLine 配置项设置 show 属性为 true 或 false 即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    series: [{
        labelLine: {
            show: false,
          },
    }]
}

实现效果

在这里插入图片描述

2.5 柱图顶端改成圆弧形

在 series 中定义 itemStyle 配置项设置 borderRadius 属性即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    series: [{
    	type: "bar",
        itemStyle:{
        	barBorderRadius:[20,20,0,0] //从左至右依次为上左、上右、下右、下左
    	},
    }]
}

实现效果

在这里插入图片描述

2.6 调整饼图的位置

在 series 中定义 center 配置调整需要的值即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    series: [{
        center: ["30%", "60%"],//水平 垂直
    }]
}

实现效果

在这里插入图片描述

2.7 饼图描述过长显示不全

在 series 中定义 label 配置项，使用 formatter 方法格式化处理即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
  series: [
    {
      label: {
        show: true,
          formatter(v) {
            let text = v.name;
            return text.length < 4 ? text : `${text.slice(0, 4)}\n${text.slice(4)}`;
          },
      },
    },
  ],
};

实现效果

在这里插入图片描述

2.8 柱状图数值显示在柱子上

在 series 中定义 label 配置项，将 show 属性设置为 true 即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
  series: [
    {
      label: {
        show: true,
        // formatter: '{b}\n{c}%', //如果需要单位加上这行代码即可   
      },
    },
  ],
};

实现效果

在这里插入图片描述

2.9 设置面积图渐变色

在 series 中定义 areaStyle 配置项，通过 color 属性设置颜色即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
  series: [
    {
      type: "line",
      smooth: true, //面积图是否改成弧形状
      lineStyle: {
        width: 2, //外边线宽度
        color: "rgb(124,255,255)", //外边线颜色
      },
      areaStyle: {
        //区域填充渐变颜色
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(124,255,255, 0.3)", //0%处颜色
            },
            {
              offset: 1,
              color: "rgba(44,56,74, 1)", //100%处颜色
            },
          ],
        },
      },
    },
  ],
};

实现效果

在这里插入图片描述

2.10 饼图数据太小不显示

在 series 中定义 minAngle 配置项，设置扇区最小角度即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
  series: [
    {
      minAngle: 5,
    },
  ],
};

实现效果

在这里插入图片描述

2.11 标签显示的位置

在 series 中定义 label 配置项，通过 position 属性设置标签位置即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
  series: [
    {
      markLine: {
        data: [
          {
            xAxis: "Indonesia",
            label: {
              position: "middle",
            },
          },
          {
            xAxis: "USABNMK",
            label: {
              position: "insideEndTop",
            },
          },
          {
            xAxis: "India",
            label: {
              position: "end",
            },
          },
          {
            xAxis: "China",
            label: {
              position: "insideStartTop",
            },
          },
        ],
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
};

实现效果

在这里插入图片描述

2.12 控制图表数据的图形符号是否显示

在 series 中定义 showSymbol 配置项，通过 true 和 false 控制即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
	series: [
        showSymbol: false,
     ],
};

实现效果

在这里插入图片描述

2.13 数据不堆叠

在 series 中定义 stack 配置项设置其属性值即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
  series: [
    {
      type: "line",
      stack: "Total", // 设置stack实现数据堆叠效果
      data: [120, 1032, 101, 134, 90, 230, 210],
    },
    {
      type: "line",
      stack: "Total", // 设置stack实现数据堆叠效果
      data: [220, 182, 191, 234, 290, 330, 310],
    },
  ],
};

实现效果

在这里插入图片描述

三、tooltip 相关

3.1 鼠标移入图表屏幕抖动

出现该问题是因为使用 tooltip 配置项后，鼠标悬浮事件频繁触发导致的，解决办法就是在 tooltip 中加上 transitionDuration 属性将值设置为 0 即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    tooltip: {
         transitionDuration:0,//让提示框跟随鼠标提示
      },
}

实现效果

在这里插入图片描述

3.2 提示框浮层的背景颜色

在 option 中定义 tooltip 配置项，通过 backgroundColor 属性设置颜色即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    tooltip: {
         backgroundColor: "black",
      },
}

实现效果

在这里插入图片描述

3.3 提示框浮层内边距

在 option 中定义 tooltip 配置项，通过 padding 属性边距即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    tooltip: {
         padding: [
  			10, // 上
  			20, // 右
  			10, // 下
  			20, // 左
		],
      },
}

实现效果

在这里插入图片描述

3.4 手动触发提示框信息

  1. 定义 showTip 函数，接收 seriesIndex 和 dataIndex 参数，用于指定要显示的提示框对应的系列和数据项索引，调用 myChart.dispatchAction 触发显示提示框；

  2. 图表加载后，用 setTimeout 立即显示首个系列 seriesIndex: 0 第二个数据项 dataIndex: 1，对应 Tue 的提示框；

  3. 监听鼠标移出图表事件 myChart.getZr().on("globalout", ...)，移出时用 setTimeout 再调用 showTip 显示相同提示框。若对该配置项感兴趣『点此』获取更多详细内容。

核心代码

// 手动触发显示tooltip
const showTip = (seriesIndex, dataIndex) => {
  myChart.dispatchAction({
    type: "showTip",
    seriesIndex: seriesIndex,
    dataIndex: dataIndex,
  });
};
// 初始显示提示
setTimeout(() => {
  showTip(0, 1); // dataIndex对应 'Tue'
}, 0);
// 在鼠标移开时触发 showTip
myChart.getZr().on("globalout", () => {
  setTimeout(() => {
    showTip(0, 1); // 对应 'Tue' 对应的数据项索引
  }, 0);
});

完整代码

<template>
  <div class="chartBox">
    <div id="pillarsChart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.pillarsEcharts();
  },
  methods: {
    pillarsEcharts() {
      var myChart = this.$echarts.init(document.getElementById("pillarsChart"));
      let option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      // 手动触发显示tooltip
      const showTip = (seriesIndex, dataIndex) => {
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: seriesIndex,
          dataIndex: dataIndex,
        });
      };
      // 初始显示提示
      setTimeout(() => {
        showTip(0, 1); // dataIndex对应 'Tue'
      }, 0);
      // 在鼠标移开时触发 showTip
      myChart.getZr().on("globalout", () => {
        setTimeout(() => {
          showTip(0, 1); // 对应 'Tue' 对应的数据项索引
        }, 0);
      });
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
  },
};
</script>

实现效果

在这里插入图片描述

四、title 相关

4.1 饼图中间添加文字描述

在 option 中定义 title 和 graphic 配置项，调整需要展示的值即可。若对该配置项感兴趣『点此』获取更多详细内容。

title: {
  text: "80.5%", //展示值
  left: "center",
  top: "50%",
},
graphic: {
  type: "text",
  left: "center",
  top: "44%",
  style: {
    text: "处罚率", //展示值
  },
},

实现效果

在这里插入图片描述

4.2 图表无数据显示“暂无数据”字样

在 option 中定义 title 配置项，通过 show 属性判断是否显示标题，如果数组不为空，则 show 为 false，表示不显示标题，反之显示标题。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
  title: {
    show: !dataList.length, // 如果 dataList 为空，则显示标题
    text: "暂无数据", // 显示的文本
    left: "center", // 水平方向居中
    top: "center", // 垂直方向居中
  },
}

实现效果

在这里插入图片描述

五、legend 相关

5.1 修改图例文字颜色

在 legend 中定义 textStyle 配置项，加上 color 属性设置颜色即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    legend: {
        textStyle: {
            color: 'white'
        },
    },
}

实现效果

在这里插入图片描述

5.2 修改图例的图标形状

在 legend 中定义 icon 配置项，选择符合项目需求的类型即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    legend: {
       icon: "triangle", //控制形状,其中包括 circle，rect，roundRect，triangle，diamond，pin，arrow，none
    },
}

实现效果

在这里插入图片描述

六、grid 相关

6.1 调整图表与图例的间距

在 option 中定义 grid 配置项设置需要的值即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
	grid: {
		left: '5%',
		right: '6%',
		bottom: '3%',
        top: "20%"
	},
}

实现效果

在这里插入图片描述

6.2 调整图表网格的边框线宽

在 option 中定义 grid 配置项，通过 borderWidth 设置需要的值即可。若对该配置项感兴趣『点此』获取更多详细内容。

注意： 此配置项生效的前提是，设置了 show: true。

let option = {
	grid: {
		show: true,
		borderWidth: 10,
	},
}

实现效果

在这里插入图片描述

七、其它

7.1 设置图表背景色

在 option 中定义 backgroundColor 配置项设置颜色即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    backgroundColor: ["rgb(64,158,255)"],
}

实现效果

在这里插入图片描述

7.2 图表添加下载功能

在 option 中定义 toolbox 配置项即可。若对该配置项感兴趣『点此』获取更多详细内容。

let option = {
    toolbox: {
		feature: {
			saveAsImage: {
              title: "保存为图片", //标题可自行调整
              type: "png", //下载为png格式
            },
     	 },
    },
}

实现效果

在这里插入图片描述

7.3 图表切换全屏

在 option 中定义 toolbox 配置项即可。若对该配置项感兴趣『点此』获取更多详细内容。

  • 如果你用的是 svg 图片，复制 svg 标签中 d 的属性值（d=""，引号中的内容拿出来）粘到 icon:"path://" 后面即可；
  • 如果你用的是外链图片，需要这样写： icon:'image://https://s1.ax1x.com/2022/04/19/L0GpM4.png' ，相当于是 image:// + “外链地址”。
let option = {
	 toolbox: {
          show: true,
          feature: {
            myFull: {
              show: true,
              title: "全屏查看",
              icon:
                "path://M708.2 792.2l-97.5-97.7c-11.6-11.6-11.6-30.3 0-41.9l41.9-41.9c11.6-11.6 30.3-11.6 41.9 0l97.6 97.6 85.3-85.3c11.6-11.6 30.3-11.6 41.9-0.1 5.6 5.6 8.7 13.1 8.7 21v254.4c0 16.4-13.3 29.6-29.6 29.6H643.9c-16.4 0-29.6-13.3-29.6-29.6 0-7.8 3.1-15.4 8.6-20.9l85.3-85.3v0.1zM234 708.1l97.5-97.6c11.6-11.6 30.3-11.6 41.9 0l41.9 41.9c11.6 11.6 11.6 30.3 0 41.9l-97.6 97.6 85.3 85.3c11.6 11.6 11.5 30.4-0.1 41.9-5.6 5.5-13.1 8.6-20.9 8.6H127.7c-16.4 0-29.6-13.3-29.6-29.6V643.7c0-16.4 13.3-29.6 29.6-29.6 7.9 0 15.4 3.1 21 8.7l85.3 85.3zM792 318l-97.6 97.6c-11.6 11.6-30.3 11.6-41.9 0l-41.8-41.8c-11.6-11.6-11.6-30.3 0-41.9l97.6-97.6L623 149c-11.6-11.6-11.5-30.4 0.1-41.9 5.6-5.5 13.1-8.6 20.9-8.6h254.4c16.4 0 29.6 13.3 29.6 29.6v254.4c0 16.4-13.3 29.6-29.6 29.6-7.9 0-15.4-3.1-21-8.7L792 318z m-474.3-83.9l97.6 97.6c11.6 11.6 11.6 30.3 0 41.9l-42 42c-11.6 11.6-30.3 11.6-41.9 0L233.8 318l-85.3 85.3c-11.6 11.6-30.4 11.5-41.9-0.1-5.6-5.6-8.7-13.1-8.6-21V127.8c0-16.4 13.3-29.6 29.6-29.6H382c16.4 0 29.6 13.3 29.6 29.6 0 7.9-3.1 15.4-8.7 21l-85.2 85.3z",
              onclick: () => {
                let element = document.getElementById("straight");
                // 浏览器兼容
                if (element.requestFullScreen) {
                  element.requestFullScreen();
                } else if (element.msRequestFullscreen) {
                  element.msRequestFullScreen();
                } else if (element.webkitRequestFullScreen) {
                  element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                  element.mozRequestFullScreen();
                }
                // 退出全屏
                if (element.requestFullScreen) {
                  document.exitFullscreen();
                } else if (element.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (element.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (element.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
	},
}

实现效果

在这里插入图片描述

7.4 图表宽高自适应

主要是通过 resize() 方法实现，核心原理是重新获取容器的尺寸信息，然后根据新的尺寸重新计算图表的布局和绘制参数，最后使用新的参数重新渲染整个图表。

<div id="columnarChart" :style="{ width: '100%', height: '100%' }"></div>

radarEcharts() {
  var myChart = this.$echarts.init(document.getElementById("columnarChart"));
  let option = {};
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
},

实现效果

在这里插入图片描述

相关推荐

⭐ 玩转数据可视化，从入门到精通 Echarts
⭐ 解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)
⭐ 解决element标签组件切换echarts图表宽高丢失问题
⭐ 数据的跃动之美：探索ECharts动态排序柱状图的魔力
⭐ 一文带你快速上手Highcharts框架

解锁编程新姿势：Bolt DIY + Deepseek打造免费代码编写助手
AI新纪元，探索新时代
01-04 2986
Bolt DIY 与 Deepseek 的结合为我们打开了一扇通往全新编程世界的大门。它打破了传统编程的诸多束缚，将开源的力量与智能代码生成技术完美融合，让编程变得更加智能、高效、有趣。无论你是刚刚踏入编程世界的新手，渴望借助 AI 的力量快速入门，还是在编程领域深耕多年的资深开发者，寻求突破创新的契机，都不妨尝试一下这个强大的组合。现在，就让我们怀揣着对编程的热爱和对未来的憧憬，踏上这一编程新征程吧！不知道大家有没有使用过类似的编程辅助工具呢？
本地部署 Bolt.new - 小学生都能轻松搭建AI编程环境
engchina的专栏
12-03 7036
本地部署 Bolt.new - 小学生都能轻松搭建AI编程环境
【攻略】Bolt.diy 云端部署与应用实战：快速生成你的创意助手
热门推荐
weixin_44913594的博客
04-16 21万+
Bolt.diy 作为 AI 创意建站的轻量平台，真正做到了“低代码 + 自然语言 + 快速云端部署”的理念。无论是 AI 开发新手，还是想验证产品创意的开发者，都能在这套解决方案中获得极高的效率提升与自由度。如果你对 AI 产品开发有兴趣，不妨趁现在通过阿里云的免费额度，亲自部署体验一番！
0 代码焦虑！阿里云 Bolt.diy 一键解锁你的专属网站，30 分钟惊艳上线
2301_80863610的博客
04-26 16万+
Bolt.diy 是 Bolt.new 的开源版本，它巧妙地融合了阿里云函数计算 FC 和百炼模型服务，将智能化开发与快速云端部署完美结合。其最大的亮点在于，让建站不再是程序员的专属技能，普通用户仅需通过自然语言描述自己的需求，就能轻松生成完整的网站应用。Bolt.diy 依托阿里云 FC 计算平台，用户无需在本地进行繁琐的环境配置，即可直接在云端部署运行，方便又快捷。一个网站创建下来也就只花个3分钟，快速方便，这要放在前几年，那这个工具已经算的上神器了，都抢着用。
Bolt.diy：更灵活更开放的AI全栈开发工具
AliCloudROS的博客
03-26 1001
它允许用户在浏览器中直接运行完整的 Node.js 环境，并通过自然语言提示快速生成、运行、编辑和部署全栈 Web 应用程序，从而大幅简化开发流程，成为AI辅助编程的标杆。但Bolt.new有一定的封闭性，只能使用官方默认的大语言模型，而且生成的web应用一键部署也是只能部署到Netlify。Bolt.diy是一个开源项目，它原本是Bolt.new项目的一个开源分叉，现在已经发展成为Bolt.new的官方开源版本，它不仅延续了核心功能，功能更强大也更具有灵活性。
一文看懂Bolt.diy：Bolt.new的开源孪生兄弟，更强大更灵活
AI智能体研究
12-27 5848
所以今天再给大家介绍一下Bolt.diy这个开源项目，它原本是Bolt.new项目的一个开源分叉，现在已经发展成为Bolt.new的官方开源版本，给喜欢研究的用户提供了更多的灵活性和开放性。通过本文的介绍，希望读者能够对 Bolt.diy 有更全面的了解，并在实际开发中充分利用这一强大的工具。故事是这样的，Bolt.diy 之前曾被称为 oTToDev 和 Bolt.new ANY LLM，是由开源社区的 Cole Medin 创建的，但迅速发展为一个庞大的社区项目，致力于成为。
Bolt.diy 测评：从零部署到创意实践的全流程体验
dyqd2011的博客
04-23 1263
在工作场景中，我会让Bolt.diy协助我提升工作效率，比如通过输入如“开发一个用户行为分析仪表盘，包含实时数据图表和权限管理模块”等自然语言指令，直接生成React前端+Node.js后端的代码框架。在需求评审阶段快速输出可视化Demo，减少与产品经理的沟通成本；而针对重复性任务（如日志分析、API测试），利用Bolt.diy编写类似“生成Python脚本，每日定时抓取服务器日志并发送异常摘要到Slack”的指令，利用其与百炼模型的集成自动生成脚本逻辑，并通过函数计算FC实现云端部署，缩短部署耗时。
【全栈开发平台】全面解析 StackBlitz 最新力作 Bolt.new：AI 驱动的全栈开发平台
万物皆有灵
11-12 2555
StackBlitz 的 Bolt.new无疑是全栈开发领域的一次重大创新。通过结合 AI 智能与 WebContainers 技术，Bolt.new 为开发者提供了一个高效、便捷、安全的开发平台，彻底颠覆了传统开发环境的配置与使用方式。无论你是资深开发者，还是编程新手，Bolt.new 都能为你带来前所未有的开发体验。未来，随着 Bolt.new 功能的不断完善与生态的日益丰富，它必将成为开发者们不可或缺的得力助手，助力他们在技术创新的道路上乘风破浪。
开源项目安装与配置指南：bolt.diy
gitblog_00450的博客
03-27 490
开源项目安装与配置指南：bolt.diy bolt.diy Prompt, run, edit, and deploy full-stack web applications using any LLM you want! 项目地...
Bolt.new：终极自动化编程工具
XiaoLiuLB的博客
10-06 9325
WebContainers 是一种运行在浏览器中的全栈 Node.js 环境，使用 WebAssembly 技术，不依赖远程服务器。它允许开发者在浏览器中创建和运行 Node.js 应用，并且能够在毫秒内启动这些环境，还可以通过链接分享应用。bolt․new 可以创建漂亮的、准备投入生产的多页应用，带有后端和数据库（如 Supabase），并且可以一键部署到生产环境。秘密就在于 WebContainers，它是我们的微型操作系统，可以在你的浏览器标签中运行完整的 web 开发环境。
Bolt.Cache:多级缓存库
06-19
**Bolt.Cache: 多级缓存库** Bolt.Cache是一个专门为提高应用程序性能而设计的多级缓存库。在软件开发中，缓存是一种重要的技术，它通过存储经常访问的数据来减少对数据库或其他资源的访问，从而显著提升系统的响应...
bolt.nvim：:high_voltage:具有模糊匹配的Neovim超快速多窗格文件管理器
02-02
:high_voltage: bolt.nvim :high_voltage: Neovim的按需过滤文件管理器，着重于速度和可见性 “ Total Commander启发了21世纪的文件管理器” 演示版 导航 键入时，过滤器会自动更新，无需额外的击键。 正在搜寻 ...
bolt.js:闪电般的快速营销奇才
06-08
《Bolt.js：打造闪电般的快速营销利器》 在当今的互联网时代，营销策略与技术紧密结合，成为企业脱颖而出的关键。...如果你希望在数字营销领域抢占先机，不妨尝试一下Bolt.js，感受它的闪电速度和无穷潜力。
指定Docker镜像源，使用阿里云加速异常解决
Phor的博客
05-07 500
因为系统默认没有安装这个命令，这个命令在yum-utils 包里，可以通过命令yum -y install yum-utils 安装。
开发搭载阿里云平台的物联网APP（支持数据接收与发送）
电路巫师把一切不可能变成不可能
05-07 1421
速构建支持阿里云物联网平台双向通信的跨平台APP（兼容Android/iOS/小程序），实现设备监控与远程控制的核心功能。关键点在于正确配置MQTT连接参数和遵循阿里云Alink数据格式规范。备注：本人可有偿提供；
给阿里云MongoDB 的感谢信 ！！成本降低80%
sql server的专栏
05-09 1148
最近我们遇到一个难题，关于降本的问题，熟悉MongoDB的都清楚，一个MongoDB的复制集至少是需要3台主机的，而在云上MongoDB的成本一直都比较高，基于我们的需求，我们希望MongoDB的成本能降低。很多时候，态度决定了很多事情。
阿里云 SLS 多云日志接入最佳实践：链路、成本与高可用性优化
最新发布
阿里巴巴云原生的博客
05-09 1553
本文旨在为企业构建稳定、低成本、高可用的全球日志系统提供全面的实践指导和配置参考。
商业 |阿里云又丢出了核弹
持之以恒
05-09 1136
Qwen3大模型发布。
阿里云2核2g安装nexus
qq_41820986的博客
05-07 704
阿里云2核2g安装nexus。
bolt.nvim：打造Neovim超快速的模糊匹配多窗格文件管理器
- **filter-as-you-type**: 动态过滤是bolt.nvim的核心功能之一，即在用户输入时即时过滤显示的结果。 - **dual-pane**: 再次强调双窗格功能。 - **fuzzy-matching**: 模糊匹配是bolt.nvim的另一个核心特性。 - **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值