1. 怎么样让ECharts从后台获取数据并展示
//使用Ajax请求你的servlet或者controller或者action然后获取数据
$.get('Query_RealTimeServlet').done(functionjzdata(result){
//有可能出现没转换成功的json数据再转换一次
varjson=JSON.parse(result);
//用数组存储数据我这边有三个
//xdata是X轴的数据
//ldatardata是表中的两条折线
varxdata=newArray();
varldata=newArray();
varrdata=newArray();
//循环存入数组
for(vari=0;i<json.length;i++){
vartimestr=json[i].updatetime;
xdata.push(timestr.substr(11));
ldata.push(json[i].left_torque);
rdata.push(json[i].right_torque);
}
//将数组中的数据存放
torque_chart.setOption({
xAxis:{
data:xdata
},
series:[
{
name:'左轮',
data:ldata
},
{
name:'右轮',
data:rdata
}
]
});
});
//这一块只是Ajax的请求存放数据前边你还得自己设置你的图表样式比如下边的
//js是我存放JavaScript的文件夹名称你用你自己的
<scripttype="text/javascript"src="js/jquery-3.2.1.min.js"></script>
<scriptsrc="js/echarts.js"></script>
<scriptsrc="js/esl.js"></script>
//初始化XXXecharts图
varXXX=echarts.init(document.getElementById("你要放置echarts图的DIV的ID这个DIV必须有宽高"));
//XXX图的配置项
XXX.setOption({
//设置标题
title:{
text:'自己起个标题',
textStyle:{
color:'#FFFFFF',
fontSize:20,
}
},
//设置图例组件
legend:{
left:'40%',
top:'10%',
data:['L','R']
},
//设置X轴
xAxis:{
name:'time',
nameTextStyle:{
color:'#FFFFFF'
},
type:'category',
//名字与坐标轴的距离
nameGap:'5',
//ajax获取时间
data:[]
},
//设置Y轴
yAxis:{
name:'a',
nameTextStyle:{
color:'#FFFFFF'
},
splitLine:{
show:false,
}
},
//设置图表类型
series:[
//第一条线L
{
type:'line',
name:'L',
itemStyle:{
normal:{
color:'#1F77D1',
}
},
lineStyle:{
normal:{
color:'#1F77D1',
}
},
data:[]
},
//第二条线R
{
type:'line',
name:'R',
itemStyle:{
normal:{
color:'#D35321',
}
},
lineStyle:{
normal:{
color:'#D35321',
}
},
data:[]
}
]
});
//补充Ajax是在设置完图表之后的之后的之后的
设置定时请求每隔1000(1秒)请求一次视你的数据上传频率为准
setInterval(functionxxx(),1000);
2. echarts获取数据库中的数据展示出来 这个怎么实现！
你首先得有个后台程序啊，java或者php，C#也是可以（sqlserver），调取数据库数据返回到前端，然后前端处理，echarts使用呗。
3. 怎么样让ECharts从后台获取数据并展示
这并不难，先将你想要传的数据在后台封装好，然后通过ajax请求将数据传到前台，我不知道你想要传什么数据，比如想要在series中的data里传值，可以用option.series[n].data.push(数组元素);这样通过echarts.setOption(option);就可以将图形展示出来了，还有不懂的可以问我
4. 数据可视化是什么啊怎么做
何为数据可视化?
这里主要是指工作场景中的数据可视化(海报类、信息图不在范围内)。
数据可视化就是承接数据分析之后的数据展示，包括图表设计、动效组合，形成二维图表，三维视图、联动钻取，搭配成大屏……
数据可视化的功能主要体现在两个方面：一是数据展示;二是业务分析。数据展示很好理解，就是将已知的数据或数据分析结果通过可视化图表的方式进行展示，形成报表、看板、dashboard、甚至配合现在流行的大屏展示技术，数据展示的方式也越来越为人所接受和欢迎。业务分析就是在看到图表、dashboard、大屏之后，将所分析的度量和数据有效地转化为有商业价值的见解，使其能够为基于事实所做的决策提供支持。
数据可视化的工具
对于数据可视化，有诸多工具，如：
1、图表类插件：ECharts、Highcharts、D3js等功能都十分强大。
2、数据报表类：Excel、金蝶、FineReport等，对于日常的报表制作，易学实用。
3、可视化BI类：比如cognos、tableau等，更直接地针对业务分析。
以上，前两者是纯粹的可视化图标，后两者涵盖从数据采集、分析、管理、挖掘、可视化在内的一系列复杂数据处理。
如何实现可靠的数据可视化?
数据可视化最终还要回归到“阅读者”，通过传递有指向性的数据，找出问题所在，制定正确决策。所以数据的价值不在于被看到，而在于看到之后所引起的思考和行动。
这里，企业内数据还不同于普通的应用数据，它们大多不是通过算法程序直接产生价值应用于用户，而是通过合理的展示和分析，再经应用者或管理者思考和判断，最后采取行动，从而发挥价值。
1、谁是可视化的受益者
无论你在做一份传统的报表，汇报的PPT还是其他，首先需要搞清楚这是给谁看的，他需要了解哪些事项，关注那些指标，在决策过程中会如何利用你展示的信息和数据，一句话概括就是搞清楚数据分析工作的目标，这一张报表是用来做什么的。后续的数据分析工作和分析报告里所要呈现的全部内容，之后都是要紧紧围绕着这个目标主题而服务的。
2、梳理指标体系
数据可视化是要讲繁杂的各条数据，梳理成指标，围绕每个业务财务、销售、供应链、生产等形成指标体系，最后通过可视化的方式展现，比如回款率、收益效率….
可以说，数据分析工作是否成功，大体就在指标的梳理。这个工作需要数据中心的人员或者BI组的人员深入业务一线去调研需求，拉来数据，建好数仓….
【指标体系分享】
如何针对业务场景做数据分析-零售业管理指标
数据化管理的指标体系大全(一)，店铺与销售
数据化管理的指标体系大全(二)，商品、电商、战略决策
分析生产和库存，靠这一套指标就够了!
将数据可视化与业务方案结合起来
5. 怎么查看echartspanel的使用步骤
创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达
图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交
互组件，支持多图表、组件的联动和混搭展现。
chart是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等
axis直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型
xAxis直角坐标系中的横轴，通常并默认为类目型
yAxis直角坐标系中的纵轴，通常并默认为数值型
grid直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局
legend图例，表述数据和图形的关联
dataRange值域选择，常用于展现地域数据时选择值域范围
dataZoom数据区域缩放，常用于展现大量数据时选择可视范围
roamController缩放漫游组件，搭配地图使用
toolbox辅助工具箱，辅助功能，如添加标线，框选缩放等
tooltip气泡提示框，常用于展现更详细的数据
timeline时间轴，常用于展现同一系列数据在时间维度上的多份数据
series数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
图表名词
名词
描述
line折线图，堆积折线图，区域图，堆积区域图。
bar柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。
scatter散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图
kK线图，蜡烛图。常用于展现股票交易数据。
pie饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。
radar雷达图，填充雷达图。高维度数据展现的常用图表。
chord和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据
force力导布局图。常用于展现复杂关系网络聚类布局。
map地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。
heatmap热力图。用于展现密度分布信息，支持与地图、网络地图插件联合使用。
gauge仪表盘。用于展现关键指标数据，常见于BI类系统。
funnel漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化，常见于BI类系统。
evnetRiver事件河流图。常用于展示具有时间属性的多个事件，以及事件随时间的演化。
treemap矩形式树状结构图，简称：矩形树图。用于展示树形数据结构，优势是能最大限度展示节点的尺寸特征。
venn韦恩图。用于展示集合以及它们的交集。
tree树图。用于展示树形数据结构各节点的层级关系
wordCloud词云。词云是关键词的视觉化描述，用于汇总用户生成的标签或一个网站的文字内容
图表类型
图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表：
单图表类型：line
折线图
堆积折线图
区域图
堆积区域图
单图表类型：bar
柱形图
堆积柱形图
条形图
堆积条形图
单图表类型：scatter
散点图
气泡图
单图表类型：k
K线图
单图表类型：pie
饼图
圆环图
南丁格尔玫瑰图
单图表类型：radar
雷达图
填充雷达图
单图表类型：chord
和弦图
单图表类型：force
力导向布局图。
单图表类型：map
中国地图
全国34个省市自治区
世界地图
子区域模式
标准GeoJson扩展
SVG扩展
单图表类型：heatmap
6. 如何echarts的legend中，鼠标移过去后会出现数据展示的明细提示
可以的。dataRangeStyle=[//0{min:0,max:2000,formatter:function(v,v2){if(v21000){return'高于'+v}else{return'中'}}},//1{orient:'horizontal',//'vertical'min:0,max:2000,formatter:'{value}到{value2}'},//2{text:['高','低'],//文本，默认为数值文本min:0,max:2000},//3{orient:'horizontal',//'vertical'text:['高','低'],//文本，默认为数值文本min:0,max:2000},//4{splitNumber:0,min:0,max:2000},//5{orient:'horizontal',//'vertical'splitNumber:0,min:0,max:2000},//6{splitNumber:0,text:['高','低'],//文本，默认为数值文本min:0,max:2000},//7{orient:'horizontal',//'vertical'splitNumber:0,text:['高','低'],//文本，默认为数值文本min:0,max:2000},//8{calculable:true,min:0,max:2000,formatter:function(v){if(v>1500){returnv+'(高)'}elseif(v<500){returnv+'(低)'}else{returnv+'(中)'};}},//9{orient:'horizontal',//'vertical'calculable:true,min:0,max:2000},//10{color:['red','yellow'],//颜色text:['高','低'],//文本，默认为数值文本calculable:true,min:0,max:2000},//11{orient:'horizontal',//'vertical'color:['red','yellow'],//颜色text:['高','低'],//文本，默认为数值文本calculable:true,min:0,max:2000}]varcur=curIndex++%dataRangeStyle.length;option={title:{text:'当前样式序号:'+cur,subtext:'NO.'+cur},dataRange:dataRangeStyle[cur],series:[{name:'',type:'map',data:[]}]};
7. echarts 怎么展现数据表格
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性 化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表 盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展 现。
模块化单文件引入(推荐)
1
新建一个echarts.html文件，为ECharts准备一个具备大小(宽高)的Dom，
2
新建<script>标签引入模块化单文件echarts.js，
3
新建<script>标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js)，
4
<script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，
5
浏览器中打开ecarts.html，就可以看到以下效果，：
END
标签式单文件引入
新建一个echarts.html文件，为ECharts准备一个具备大小(宽高)的Dom，
新建<script>标签引入echart-all.js，
新建<script>，使用全局变量echarts初始化图表并驱动图表的生成，
浏览器中打开echarts.html，可以看到如下效果，
8. echarts数据展现出来怎么实现在页面输入，搜索的功能
echarts也是靠传入参数后才能渲染出来效果图的，你可以将页面输入搜索的字符串拿去在传入echarts的参数中搜索，然后将搜索后的结果重新传入echarts重新渲染也是可以的。
9. 如何用echarts做地图的数据展现
ECharts开源来自网络商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
ECharts (Enterprise Charts 商业产品图表库)
提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现。
10. 怎么样让ECharts从后台获取数据并展示
//设置ajax访问后台填充饼图
function setChartPie(url,id){
var Chart=require('echarts').init(document.getElementById(id));
Chart.showLoading({text: '正在努力的读取数据中...' });
var label=[];
var value=[];
$.ajax({
url:url,
dataType:"json",
success:function(data){
$.each(data,function(i,p){
label[i]=p['label'];
value[i]={'name':p['label'],'value':p['value']};
});
Chart.hideLoading();
optionPie.legend.data=label;
optionPie.series[0]['data']=value;
optionPie.series[0]['radius']=[0,100];
Chart.setOption(optionPie);
}
});
}