四时宝库

程序员的知识宝库

使用Dify实现Text2Sql功能并输出图表

最近业务需要,研究的dify插件比较多,今天看下两个基础插件:database 和 echarts ,以及看下如何将其应用到对话过程中;

基础概念

Text2sql :是个“翻译官”,你只需要对着电脑大喊:“给我找上个月花500以上的VIP螺蛳粉爱好者!” ,AI自动把这句人话转成SQL代码,数据库秒懂,直接吐结果。本质就是个“人话 → 数据库黑话”的转换器。

Echarts助力Dify,给你的图表加上美颜

简介

在数据可视化的领域,图表不仅仅是数据的展示工具,更是信息传递的桥梁。而在众多数据可视化框架中,ECharts无疑是一个广受欢迎的选择。它不仅功能强大,支持丰富的图表类型,还能提供细致入微的定制化设计,帮助用户创造出既美观又富有表现力的图表。而当ECharts与Dify结合时,带来的不仅是图表的美观,更是让数据展示变得更加直观和易于理解的全新体验。

在 ECharts 图表中设置 Y 轴的显示范围

为了在 ECharts 图表中设置 Y 轴的显示范围,使其显示大于最大值 A 的最接近的整数和小于最小值 B 的最大整数,可以通过设置 yAxis 的 min 和 max 属性来实现。以下是一个具体的例子:

Python可视化神器——pyecharts的超详细使用指南!

Python可视化神器——pyecharts的超详细使用指南!

导读:pyecharts是一款将python与echarts结合的强大的数据可视化工具,本文将为你阐述pyecharts的使用细则。

关于热力图和路径图注意要点(热力图依据)

VUE.js中引入echarts热力图并样式调整



1.热力图数据部分,不需要所有数据都标注,只需要有数据的点位标注即可

Apache ECharts正式毕业,成为 ASF 顶级项目

1 月 26 日,Apache 基金会官方宣布 ECharts 项目正式毕业,成为 Apache 顶级项目。

Apache ECharts 是由百度团队开源,并于 2018 年捐赠给 Apache 基金会。这是一款基于 JavaScript 的数据可视化图标库,可以生产直观、可交互、定制化的数据可视化图表。

java + echart (多条折线图,饼状图,柱状图)

echart用于统计使用,看着很美观且数据描述的很清晰。所以昨天第一次使用,出现了很多问题。

1.多条折线图 折线:line

直接贴代码:后台

public Map<String,Object> pointUselessAnalyze(Integer orgId){

动态 Echarts 温湿度动态变化示意图 背景可以随温度改变哦

效果图


<!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>
 

数据可视化必修课 - 图表篇(数据可视化图表设计)

随着互联网数字化越来越完善,数据可视化这个词的使用频率也越来越高,而图表是数据可视化中最常用的一种表现形式。无论是工作汇报还是后台设计,都离不开图表的使用。然而关于图表类相关的资料太零碎了,不成体系,对于初学者非常不友好,本篇文章我从图表的祖辈开始,把它都给挖了出来,希望对你有帮助。

Vue用echarts写一个拆线图(vue echarts tooltip)

以下是在Vue中使用ECharts创建折线图的示例代码:

    << < 1 2 3 4 5 > >>
    控制面板
    您好,欢迎到访网站!
      查看权限
    网站分类
    最新留言
      友情链接