2025年05月11日
最近业务需要，研究的dify插件比较多，今天看下两个基础插件：database 和 echarts ，以及看下如何将其应用到对话过程中；
Text2sql ：是个“翻译官”，你只需要对着电脑大喊：“给我找上个月花500以上的VIP螺蛳粉爱好者！” ，AI自动把这句人话转成SQL代码，数据库秒懂，直接吐结果。本质就是个“人话 → 数据库黑话”的转换器。
2025年05月11日
在数据可视化的领域，图表不仅仅是数据的展示工具，更是信息传递的桥梁。而在众多数据可视化框架中，ECharts无疑是一个广受欢迎的选择。它不仅功能强大，支持丰富的图表类型，还能提供细致入微的定制化设计，帮助用户创造出既美观又富有表现力的图表。而当ECharts与Dify结合时，带来的不仅是图表的美观，更是让数据展示变得更加直观和易于理解的全新体验。
2025年05月11日
为了在 ECharts 图表中设置 Y 轴的显示范围，使其显示大于最大值 A 的最接近的整数和小于最小值 B 的最大整数，可以通过设置 yAxis 的 min 和 max 属性来实现。以下是一个具体的例子：
2024年08月16日
导读：pyecharts是一款将python与echarts结合的强大的数据可视化工具，本文将为你阐述pyecharts的使用细则。
2024年08月16日
1 月 26 日，Apache 基金会官方宣布 ECharts 项目正式毕业，成为 Apache 顶级项目。
Apache ECharts 是由百度团队开源，并于 2018 年捐赠给 Apache 基金会。这是一款基于 JavaScript 的数据可视化图标库，可以生产直观、可交互、定制化的数据可视化图表。
2024年08月16日
echart用于统计使用，看着很美观且数据描述的很清晰。所以昨天第一次使用，出现了很多问题。
1.多条折线图 折线：line
直接贴代码：后台
public Map<String,Object> pointUselessAnalyze(Integer orgId){
2024年08月16日
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 初始化移动浏览显示 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 在IE运行最新的渲染模式 -->
<title>久爱物联网温度曲线示意图</title>
<style type="text/css">
.wdline {
height: 300px;
min-width: 350px;
width: 100% !important;
}
</style>
</head>
<body>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type='text/javascript'>
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 指定图表的配置项和数据初始化数据（如果不写将空白无法推送数据）
var dataTM = ['0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0'];//维度的个数 决定横向坐标轴数量
var dataWD =[0,0,0,0,0.0,0,0,0,0,0.0,0,0];
var dataSD =[0,0,0,0,0.0,0,0,0,0,0.0,0,0];
option = {
title: {
text: '久爱物联网',//图表标题
subtext: 'jiuai.ltd',
fontSize: 10,
//x:'center'//标题位置定义，默认left
},
tooltip: {
trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中
//控制提示框内容输出格式
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
},
formatter: '<font color=#00FFFF>● </font>时间:{b0}<br/><font color=#FF3333>● </font>{a0} {c0}' +
'<br/><font color=#53FF53>● </font>{a1} {c1}'
},
dataZoom: [
{
show: false,
type: 'slider', //支持鼠标滚轮缩放
start: 0, //默认数据初始缩放范围为10%到90%
end: 100
},
{
show: false,
type: 'inside', //支持单独的滑动条缩放
start: 0, //默认数据初始缩放范围为10%到90%
end: 100
}
],
legend: { //图表上方的类别显示 图例
show:true,
data:['温度(℃)','湿度(%)']//必须和 series 中定义的一样
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
backgroundColor: 'rgba(255,255,255,0.1)',// 背景颜色RGB,透明度0-1
xAxis: {
type: 'category',//category
boundaryGap: true,
name:'时间轴',
splitLine: {
show: false
},
axisLabel: {
color: '#fff',
fontSize: 12
},
//data: dataTM
data: (function (){
var now = new Date();
var res = [];
var len = 12;
while (len--) {
res.unshift(now.toLocaleTimeString('chinese',{hour12:false}).replace(/^\D*/,''));
now = new Date(now - 1000);
}
return res;
})()
},
yAxis:
[{
type: 'value',
name : '温度℃',
max: 100,//y轴最大值
min: -10,
axisLabel :
{//y标签格式
//color: '#fff',
//fontSize: 12,
//formatter: '{value} ℃' //y轴显示格式 控制输出格式
}
},{
type: 'value',
name : '湿度RH%',
max: 100,//y轴最大值
min: 0,
axisLabel :
{//y标签格式
//color: '#fff',
fontSize: 12,
//formatter: '{value} RH%' //y轴显示格式 控制输出格式
}
}],
series: [
{
name:'温度(℃)',//图例名称
data: dataWD,
type: 'bar',
symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
smooth: true//true 为平滑曲线，false为直线
},
{
name:'湿度(%)',
type:'line',
// showSymbol: false,
symbol:'circle',//去掉折线图中的节点
hoverAnimation: true,
data:dataSD
}
]
};
require(
[
'echarts',
'echarts/chart/line',//需要折线图则加载line模块
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec)
{//if (option && typeof option === "object")
myChart = ec.init(document.getElementById('wd_echarts'));
myChart.setOption(option);
});
//定时刷新数据(10秒)
appcount=1;
setInterval(function () {
var option = myChart.getOption();
var axisData = (new Date()).toLocaleTimeString('chinese',{hour12:false});//.replace(/^\D*/, '')
var data0 = option.series[0].data;//温度
var data1 = option.series[1].data;//湿度
var dhtwd=(Math.random() * 45 + 1).toFixed(1);
//动态更新值
data0.shift();//温度
data0.push(dhtwd - 0);
if(dhtwd<27)option.backgroundColor='rgba(188,188,255,0.8)';//不同温度区域 背景色随着变
if(dhtwd>=27)option.backgroundColor='rgba(255,230,205,0.8)';
if(dhtwd>=30)option.backgroundColor='rgba(255,200,0,0.8)';
if(dhtwd>=35)option.backgroundColor='rgba(255,150,0,0.8)';
data1.shift();//湿度
data1.push((Math.random() * 100 + 0).toFixed(1) - 0);
option.xAxis[0].data.shift();//x坐标轴
option.xAxis[0].data.push(axisData);
//固定替换数据区
// option.series[0].data = dataWD;
// option.series[1].data = dataSD;
myChart.setOption(option);//更新
}, 5000);
</script>
<center><h3>久爱物联网 Echarts 动态温湿度示意图</h3></center>
<div id="wd_echarts" class="wdline"></div>
<div style="color: #dddddd;">
<li>
久爱物联网 Echarts 动态示意图，可以随温度变背景色的曲线图
</li>
<li>
时间轴做了处理支持24小时制（一般随系统格式显示的）更新频率5秒钟
</li>
</div>
</body>
</html>
2024年08月16日
随着互联网数字化越来越完善，数据可视化这个词的使用频率也越来越高，而图表是数据可视化中最常用的一种表现形式。无论是工作汇报还是后台设计，都离不开图表的使用。然而关于图表类相关的资料太零碎了，不成体系，对于初学者非常不友好，本篇文章我从图表的祖辈开始，把它都给挖了出来，希望对你有帮助。