应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。
常见的数据可视化库:
D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
ECharts.js 百度出品的一个开源 Javascript 数据可视化库
Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
AntV 蚂蚁金服全新一代数据可视化解决方案 等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的关系
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
官网地址:https://www.echartsjs.com/zh/index.html
echarts体验
下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0
使用步骤(5大步骤):
1.引入echarts 插件文件到html页面中
2.准备一个具备大小的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
3.初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
4.指定配置项和数据(option)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
5.将配置项设置给echarts实例对象
myChart.setOption(option);
这是要求同学们知道以下配置每个模块的主要作用干什么的就可以了
series
系列列表。每个系列通过 type 决定自己的图表类型
大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
xAxis:直角坐标系 grid 中的 x 轴
boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
yAxis:直角坐标系 grid 中的 y 轴
grid:直角坐标系内绘图网格。
title:标题组件
tooltip:提示框组件
legend:图例组件
color:调色盘颜色列表
数据堆叠,同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
option = {
// color设置我们线条的颜色 注意后面是个数组
color: ['pink', 'red', 'green', 'skyblue'],
// 设置图表的标题
title: {
text: '折线图堆叠123'
},
// 图表的提示框组件
tooltip: {
// 触发方式
trigger: 'axis'
},
// 图例组件
legend: {
// series里面有了 name值则 legend里面的data可以删掉
},
// 网格配置 grid可以控制线形图 柱状图 图表大小
grid: {
left: '3%',
right: '4%',
bottom: '3%',
// 是否显示刻度标签 如果是true 就显示 否则反之
containLabel: true
},
// 工具箱组件 可以另存为图片等功能
toolbox: {
feature: {
saveAsImage: {}
}
},
// 设置x轴的相关配置
xAxis: {
type: 'category',
// 是否让我们的线条和坐标轴有缝隙
boundaryGap: false,
data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
},
// 设置y轴的相关配置
yAxis: {
type: 'value'
},
// 系列图表配置 它决定着显示那种类型的图表
series: [
{
name: '邮件营销',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
1.官网实例
官网默认为我们提供了大量的案例,我们需要使用那一种只需要直接点击打开后复制他们的相关配置,然后按照我上面说的5大步骤进行使用即可。
2.社区Gallery
官方自带的图例,可能在很多时候并不能满足我们的需要,在社区这里可以找到一些基于echart的高度定制好的图表,相当于基于jquery开发的插件,这里是基于echarts开发的第三方的图表。
本案例中使用了地图模拟飞行的案例就是从社区中进行引用的,
参考社区的例子:https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)
实现步骤:
第一需要下载china.js提供中国地图的js文件
第二个因为里面代码比较多,我们新建一个新的js文件 myMap.js 引入
使用社区提供的配置即可。
代码已经上传至我的码云如有需要的小伙伴可自行下载:
https://gitee.com/jiuyueqi/echarts
ps:最后呢,如果大家看完楼主的文章觉得对echarts的学习和了解有所帮助,麻烦大家路过点个赞点个关注呗!楼主后续还会继续更新有关前端方面的面试题资料或者其他方面的知识。
————————————————
版权声明:本文为CSDN博主「程序猿玖月柒」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_45257157/java/article/details/106300587
如何在网页前端里可视化你的知识图谱
最近费尽千辛万苦构造了一份可以用(大概)的知识图谱,并且把要利用知识图谱做的领域命名实体识别和一些推荐的功能做成Web版的demo,顺带想实现一些可视化知识图谱的功能。
(凭啥知识图谱就只能在Neo4j里自嗨,不能来前端show一下,歧视吗(¬_¬))
找了做前端图表展示的开源库,D3.js和Echarts都能做,我拿Echarts实现了一下功能,先看一下在现在项目里一个基于知识图谱查询的实际效果:
接下里看看如何的实现:
<script src="/static/js/echarts.common.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.min.js"></script>给要展示的图准备一个Dom:
<!-- 为ECharts准备一个具备大小的Dom --> <div class = "col-md-12"> <div class="panel panel-default "> <header class="panel-heading"> 关系图 : </header> <div class = "panel-body "> <div id="graph" style="width: 100%;height:600px;"></div> </div> </div> </div>
data = [ {name:'苹果',category:1,id:0}, {name:'梨子',catagory:1,id:1}, {name:'水果',category:2,id:2} ] links = [ {source:0,target:2,category:0,value:'属于',symbolSize:10}, {source:1,target:2,category:0,value:'属于',symbolSize:10} ]
var myChart = echarts.init(document.getElementById('graph')); option = { title: { text: '' }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', label: { normal: { show: true, textStyle: { fontSize: 12 }, } }, legend: { x: "center", show: false }, series: [ { type: 'graph', layout: 'force', symbolSize: 45, focusNodeAdjacency: true, roam: true, edgeSymbol: ['none', 'arrow'], categories: [{ name: '查询实体', itemStyle: { normal: { color: "#009800", } } }, { name: 'instance', itemStyle: { normal: { color: "#4592FF", } } }, { name: 'class', itemStyle: { normal: { color: "#C71585", } } }], label: { normal: { show: true, textStyle: { fontSize: 12, }, } }, force: { repulsion: 1000 }, edgeSymbolSize: [4, 50], edgeLabel: { normal: { show: true, textStyle: { fontSize: 10 }, formatter: "{c}" } }, data: data, links: links, lineStyle: { normal: { opacity: 0.9, width: 1.3, curveness: 0, color:"#262626", } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);这样就成功实现了一个简单的图谱可视化:
————————————————
版权声明:本文为CSDN博主「游离态GLZ不可能是金融技术宅」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_37477357/article/details/104857495
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
最近遇到一个作业,要求使用 Echarts 散点图,本来这个图是很容易的,官网上也有很多的教程。但是如果可以动态的更新 Echarts 散点图就更好了。我本身对 js 不感兴趣,经过不停的查找资料最终实现了这一功能。
我的项目是 Servlet + jsp + Echarts。先从 Servlet 入手,我们的项目需要传递的数值是 x 坐标和 y 坐标。我首先写了一个 JavaBean
julie.java
package JavaBean;
public class julei {
public julei(double x, double y) {
this.x = x;
this.y = y;
}
double x;
public double getX() {
return x;
}
public void setX(double x) {
this.x = x;
}
public double getY() {
return y;
}
public void setY(double y) {
this.y = y;
}
double y;
@Override
public String toString() {
return "[" + this.x + "," + this.y + "]";
}
}
Servlet中的代码,因为使用的是 json 来传递的数据,所以 json 相关的包还是少不了的。
BackServlet
package Servlet;
import JavaBean.Readtxt;
import JavaBean.julei;
import org.json.JSONArray;
import org.json.JSONObject;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@javax.servlet.annotation.WebServlet("/BackServlet")
public class BackServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
List<julei> list = new ArrayList<>();
try {
list = Readtxt.out();//这是我们项目中的一个类,不重要。
}catch (Exception e)
{
System.out.println(e.toString());
}
JSONArray jsonArray = new JSONArray(list);
System.out.println(jsonArray.toString());
//最重要的就是这一句,将数据发送给谁来申请的位置
response.getWriter().write(jsonArray.toString());
}
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
}
}
好了,现在到了最重要的前端方面了。
index.jsp
正常声明散点图,只要把data声明为空就好。
var myChart = echarts.init(document.getElementById('man'));
var option = {
title : {
text: '死亡分布图',
},
xAxis: {axisTick: {//决定是否显示坐标刻度
alignWithLabel: true,
show:true
},},
yAxis: {},
series: [{
symbolSize: 20,
data: [],
type: 'scatter'
}]
};
myChart.setOption(option);
数据接收部分:
var num = [];
var gao = new Array();
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,其他操作须等请求完成才可执行)
url : "BackServlet", //请求发送到TestServlet
data : {},
dataType : "json", //返回数据形式为json
//7.请求成功后接收数据name+num两组数据
success : function(result) {
//result为服务器返回的json对象
if (result) {
//8.取出数据存入数组
for (var i = 0; i < result.length; i++) {
gao.push([result[i].x,result[i].y]);//这一句很重要,它将数据转化为了正确的格式。
}
myChart.hideLoading(); //隐藏加载动画
//9.覆盖操作-根据数据加载数据图表
myChart.setOption({
series : [ {
// 根据名字对应到相应的数据
data : gao//在这里对data进行赋值。
} ]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
完毕
我把整个jsp都放上来了,但是里面的 css 还有 js 就不放了,重点是传数据的那一部分。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>LOL数据分析</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src='js/echarts.js'></script>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div class="bgcolor">
<div style="z-index:100;" id="dowebok">
<!--第一屏-->
<div class="section">
<div class="ly-box01">
<img class="ly-img01" src="img/logol.png" style="width:100%;height:100%">
</div>
</div>
<!--第三屏-->
<div class="section">
<div class="timeline"></div>
<div class="timepoint21"></div>
<div class="ly-box11">
<div id="man" style=" width: 600px;height: 500px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var value=[];
$.ajaxSettings.async=false;
var myChart = echarts.init(document.getElementById('man'));
var option = {
title : {
text: '死亡分布图',
},
xAxis: {axisTick: {//决定是否显示坐标刻度
alignWithLabel: true,
show:true
},},
yAxis: {},
series: [{
symbolSize: 20,
data: [],
type: 'scatter'
}]
};
myChart.setOption(option);
var num = [];
var gao = new Array(4);
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,其他操作须等请求完成才可执行)
url : "BackServlet", //请求发送到TestServlet
data : {},
dataType : "json", //返回数据形式为json
//7.请求成功后接收数据name+num两组数据
success : function(result) {
//result为服务器返回的json对象
if (result) {
//8.取出数据存入数组
for (var i = 0; i < result.length; i++) {
gao.push([result[i].x,result[i].y]);
}
// document.write(gao);
myChart.hideLoading(); //隐藏加载动画
//9.覆盖操作-根据数据加载数据图表
myChart.setOption({
series : [ {
// 根据名字对应到相应的数据
data : gao
} ]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</div>
<div class="ly-triangle21"></div>
</div>
<!--试验-->
<ul class="bg-bubbles">
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
</ul>
</div>
<audio src="music/1.mp3" autoplay="autoplay" loop="loop" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/diy.js"></script>
</body>
</html>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
Echarts 标签中文本内容太长的时候怎么办 ?
interval
坐标轴刻度标签的显示间隔(在类目轴中有效哦),默认会采用标签不重叠的方式显示标签(也就是默认会将部分文字显示不全)
一开始我没设置 因为标签文本过长的原因他就自动不显示全部
被遮挡住就让grid 组件离容器向上移动 把grid中的bottom的值调大一些
- 1对文本进行倾斜
在xAxis.axisLabe中修改rotate的值
xAxis: {
data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据 name:"123",//坐标轴名称。 nameLocation:'end',//坐标轴名称显示位置。 axisLabel : {//坐标轴刻度标签的相关设置。 interval:0, rotate:"45" }
},
可以设置为0强制显示所有标签,如果设置为1,表示隔一个标签显示一个标签,如果为3,表示隔3个标签显示一个标签,以此类推
grid:{//直角坐标系内绘图网格 show:true,//是否显示直角坐标系网格。[ default: false ] left:"20%",//grid 组件离容器左侧的距离。 right:"30px",
borderColor:"#c45455",//网格的边框颜色 bottom:"20%" // },
- 2.换行显示
在xAxis.axisLabel中 使用formatter回调函数实现换行
axisLabel : {//坐标轴刻度标签的相关设置。 formatter : function(params){ var newParamsName = "";// 最终拼接成的字符串 var paramsNameNumber = params.length;// 实际标签的个数 var provideNumber = 4;// 每行能显示的字的个数 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话,需要显示几行,向上取整 /**
* 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
*/ // 条件等同于rowNumber>1 if (paramsNameNumber > provideNumber) { /** 循环每一行,p表示行 */ for (var p = 0; p < rowNumber; p++) { var tempStr = "";// 表示每一次截取的字符串 var start = p * provideNumber;// 开始截取的位置 var end = start + provideNumber;// 结束截取的位置 // 此处特殊处理最后一行的索引值 if (p == rowNumber - 1) { // 最后一次不换行 tempStr = params.substring(start, paramsNameNumber);
} else { // 每一次拼接字符串并换行 tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串 }
} else { // 将旧标签的值赋给新标签 newParamsName = params;
} //将最终的字符串返回 return newParamsName
}
}
同样和换行一个道理,只是这个是单个文字换行
在xAxis.axisLabel中 使用formatter回调函数实现换行
axisLabel: { interval: 0,
formatter:function(value) {
return value.split("").join("\n"); } }
在xAxis.axisLabel中 使用formatter回调函数实现换行
axisLabel : {//坐标轴刻度标签的相关设置。 clickable:true,//并给图表添加单击事件 根据返回值判断点击的是哪里 interval : 0,
formatter : function(params,index){ if (index % 2 != 0) { return '\n\n' + params;
} else { return params;
}
}
}
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
1.效果如上,官方示例简化
2.force1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ECharts"> <meta name="author" content="kener.linfeng@gmail.com"> <title>ECharts · Example</title> <script src="./js/echarts.js"></script> </head> <body> <div id="main" class="main" style="width: 800px;height: 800px"></div> <script src="./echartsExample.js"></script> </body> </html>
3.echartsExample.js
var myChart; var domMain = document.getElementById('main'); function requireCallback (ec) { echarts = ec; if (myChart && myChart.dispose) { myChart.dispose();
} myChart = echarts.init(domMain); window.onresize = myChart.resize; myChart.setOption(option, true); window.onresize = myChart.resize;
} var option = { title : { text: '人物关系:乔布斯', subtext: '数据来自人立方', x:'right', y:'bottom' }, tooltip : { trigger: 'item', formatter: '{a} : {b}' }, toolbox: { show : true, feature : { restore : {show: true}, magicType: {show: true, type: ['force', 'chord']}, saveAsImage : {show: true}
}
}, legend: { x: 'left', data:['家人','朋友']
}, series : [
{ type:'force', name : "人物关系", ribbonType: false, categories : [
{ name: '人物' },
{ name: '家人' },
{ name:'朋友' }
], itemStyle: { normal: { label: { show: true, textStyle: { color: '#333' }
}, nodeStyle : { brushType : 'both', borderColor : 'rgba(255,215,0,0.4)', borderWidth : 1 }, linkStyle: { type: 'curve' }
}, emphasis: { label: { show: false // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE }, nodeStyle : { //r: 30 }, linkStyle : {}
}
}, useWorker: false, minRadius : 15, maxRadius : 25, gravity: 1.1, scaling: 1.1, roam: 'move', nodes:[
{category:0, name: '乔布斯', value : 10, label: '乔布斯\n(主要)'},
{category:1, name: '丽萨-乔布斯',value : 2},
{category:1, name: '保罗-乔布斯',value : 3},
{category:1, name: '克拉拉-乔布斯',value : 3},
{category:1, name: '劳伦-鲍威尔',value : 7},
{category:2, name: '史蒂夫-沃兹尼艾克',value : 5},
{category:2, name: '奥巴马',value : 8},
{category:2, name: '比尔-盖茨',value : 9},
{category:2, name: '乔纳森-艾夫',value : 4},
{category:2, name: '蒂姆-库克',value : 4},
{category:2, name: '龙-韦恩',value : 1},
], links : [
{source : '丽萨-乔布斯', target : '乔布斯', weight : 1, name: '女儿'},
{source : '保罗-乔布斯', target : '乔布斯', weight : 2, name: '父亲'},
{source : '克拉拉-乔布斯', target : '乔布斯', weight : 1, name: '母亲'},
{source : '劳伦-鲍威尔', target : '乔布斯', weight : 2},
{source : '史蒂夫-沃兹尼艾克', target : '乔布斯', weight : 3, name: '合伙人'},
{source : '奥巴马', target : '乔布斯', weight : 1},
{source : '比尔-盖茨', target : '乔布斯', weight : 6, name: '竞争对手'},
{source : '乔纳森-艾夫', target : '乔布斯', weight : 1, name: '爱将'},
{source : '蒂姆-库克', target : '乔布斯', weight : 1},
{source : '龙-韦恩', target : '乔布斯', weight : 1},
{source : '克拉拉-乔布斯', target : '保罗-乔布斯', weight : 1},
{source : '奥巴马', target : '保罗-乔布斯', weight : 1},
{source : '奥巴马', target : '克拉拉-乔布斯', weight : 1},
{source : '奥巴马', target : '劳伦-鲍威尔', weight : 1},
{source : '奥巴马', target : '史蒂夫-沃兹尼艾克', weight : 1},
{source : '比尔-盖茨', target : '奥巴马', weight : 6},
{source : '比尔-盖茨', target : '克拉拉-乔布斯', weight : 1},
{source : '蒂姆-库克', target : '奥巴马', weight : 1}
]
}
]
}; var echarts; require.config({ paths: { echarts: './js' }
}); launchExample(); var isExampleLaunched; function launchExample() { if (isExampleLaunched) { return;
} // 按需加载 isExampleLaunched = 1; require(
[ 'echarts', 'echarts/chart/force', 'echarts/chart/chord',
], requireCallback );
}
4.目录文件结构
蓝蓝 http://www.lanlanwork.com