1. echarts 股票分时图怎么看
force1.html还有就是多看一下,它的API。
2. echarts 怎么异步添加数据
<script src="~/Scripts/NewEcharts/echarts.js"></script>
<script type="text/javascript">
var myChart;
$(function () {
load();
});
function load() {
require.config({
paths: {
//echarts: '../Scripts/Echartsjs'
echarts: '../Scripts/NewEcharts'
}
});
require(
[
'echarts',
'echarts/chart/bar'
//'echarts/chart/line'
//'echarts/chart/map'
],
DrawEchart
);
}
function DrawEchart(ec) {
//--- 折柱 ---
myChart = ec.init(document.getElementById('EchartsDiv'));
//图表显示提示信息
myChart.showLoading({
text: "图表数据正在努力加载..."
});
//定义图表
var option = {
tooltip: {
trigger: 'axis'
},
//color: '#66B3FF',
animation: false,
addDataAnimation: false,
calculable: true,
xAxis: [
{
type: 'value',
boundaryGap: [0, 0.01]
}
],
yAxis: [
{
splitLine: {
show: false
},//分隔线
//splitArea: { show: false },//分隔区域
type: 'category',
// data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
data:[]
}
],
series: [
{
name: '资源使用情况',
color: '#66B3FF ',
type: 'bar',
// data: [18203, 23489, 29034, 104970, 131744, 630230]
data:[]
}
]
};
//通过Ajax获取数据
$.ajax({
type: "post",
async: false, //同步执行
url: "/Report/GetVMUsedInfo",
dataType: "json", //返回数据形式为json
data: {rnd:Math.random()},
success: function(result) {
if (result) {
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
option.yAxis[0].data = result.yAxis;
option.series[0].data = result.series;
myChart.hideLoading();
myChart.setOption(option);
}
},
error: function(errorMsg) {
alert("图表请求数据失败啦!");
}
});
//myChart.hideLoading();
//myChart.setOption(option);
}
</script>
返回用的是 json数据;
后台使用的Asp.net MVC,使用了匿名类(主要是为了方便),
var newObj = new
{
yAxis =result.Data.DanweiList,
series= result.Data.ApplyVMEventList
};
return Json(newObj, JsonRequestBehavior.AllowGet);
3. 怎么在echarts·example操作介绍
1、 在echarts官网下载包,解压后,将文件Echarts\echarts-2.2.7\echarts-2.2.7\doc\example\www\js\echarts.js文件拷贝,放到eclipse中。
2、 创建jsp页面即可
注意:1)红色表示是框架,换不同的样式也不用动的
2)option是换样式的,如柱状图等等,具体代码参考网络官网
3)本例中的x值是控制上图中左侧文字与左边的距离大小
4)需要在body中给其一个容器。
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:600px;"></div>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ page language="java" import="java.util.*,java.lang.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>日志管理</title>
<meta name="decorator" content="default"/>
<meta charset="utf-8">
<!-- ECharts单文件引入 -->
<!-- <script src="http://echarts..com/build/dist/echarts.js"></script> -->
<script src="${ctxStatic }/js/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
// echarts: 'http://echarts..com/build/dist'
echarts: '${ctxStatic }/js/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: '40px',
data:['指令发布','案件讨论','每日警情','每周警情','信息共享','日常互助','考核通报','前科重点人员','高危人员','刑嫌人员','在逃相对关系人','在逃人员','DNA比中分析','银联司法','电信诈骗串并','视频串并','协同办案','以案查物','以物查案(手机分析)','以物查案(电脑分析)','以物查案(贵重物品分析)','以物查案(车辆分析)']
},
series: [
{
name:'信息来源',
type:'pie',
selectedMode: 'single',
radius: [0, '25%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data:[
//{value:${xtdl}, name:'系统登录', selected:true},
{value:${zl+tl+mr+mz}, name:'合成作战'},
{value:${xx+khtb+rchz}, name:'互助专栏'},
{value:${qkzd+gwry+xxry+ztxd+ztry+dnabz}, name:'人员分析'},
{value:${jass+dxzp+vod+xtba}, name:'串并案分析'},
{value:${yacw+sjfx+dnfx+gzwp+clfx}, name:'物品分析'}
]
},
{
name:'信息来源',
type:'pie',
radius: ['30%', '55%'],
data:[
{value:${zl}, name:'指令发布'},
{value:${tl}, name:'案件讨论'},
{value:${mr}, name:'每日警情'},
{value:${mz}, name:'每周警情'},
{value:${xx}, name:'信息共享'},
{value:${rchz}, name:'日常互助'},
{value:${khtb}, name:'考核通报'},
{value:${qkzd}, name:'前科重点人员'},
{value:${gwry}, name:'高危人员'},
{value:${xxry}, name:'刑嫌人员'},
{value:${ztxd}, name:'在逃相对关系人'},
{value:${ztry}, name:'在逃人员'},
// {value:${xtdl}, name:'系统登录'},
{value:${dnabz}, name:'DNA比中分析'},
{value:${jass}, name:'银联司法'},
{value:${dxzp}, name:'电信诈骗串并'},
{value:${vod}, name:'视频串并'},
{value:${xtba}, name:'协同办案'},
{value:${yacw}, name:'以案查物'},
{value:${sjfx}, name:'以物查案(手机分析)'},
{value:${dnfx}, name:'以物查案(电脑分析)'},
{value:${gzwp}, name:'以物查案(贵重物品分析)'},
{value:${clfx}, name:'以物查案(车辆分析)'}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li ><a href="${ctx}/sys/log/list">日志列表</a></li>
<li class="active"><a href="${ctx}/sys/log/view"><b>日志视图</b></a></li>
</ul>
<form:form id="searchForm" modelAttribute="bean" action="${ctx}/sys/log/view" method="post" class="breadcrumb form-search">
<b>重点模块访问数据统计 [系统总登录次数:<span style="color:green;">${xtdl}</span>]</b>
</form:form>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:600px;"></div>
</body>
</html>
4. 如何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:[]}]};
5. 类似echarts还有哪些图表
类似echarts小程序的图表组件列举:
1、fusionCharts
(5)echarts股票信息扩展阅读
制作图表时要注意:
1、要有自身的表达特性,尤其对时间、空间等概念的表达和一些抽象思维的表达具有文字和言辞无法取代的传达效果。图表要具有表达的准确性,对所示事物的内容、性质或数量等处的表达应该准确无误。
2、要有信息表达的可读性,在图表认识中应该通俗易懂,尤其是用于大众传达的图表。
3、制作图表要有艺术性,图表是通过视觉的传递来完成,必须考虑到人们的欣赏习惯和审美情趣,这也是区别于文字表达的艺术特性。
6. echarts是做什么的
1、 Echarts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11),Chrome,Firefox,Safari等。
2、底层依赖轻量级Canva+库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
3、ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。
(6)echarts股票信息扩展阅读
echarts的优点:
1、国人开发,文档全,便于开发和阅读文档。
2、图表丰富,可以适用各种各样的功能。
echarts的缺点:
1、移动端使用略卡,毕竟是PC端的东西,移植到移动端肯定多多少少有些问题吧,或许跟自己水平也有一定的关系。
2、echarts不失为一款比较适合我们这种码农使用的框架。
3、echarts就不贴代码了。毕竟文档很全。
7. Echarts连接mysql数据的实例
varmyChart;
//创建ECharts图表方法
functionDrawEChart(ec){
//---折柱---
myChart=ec.init(document.getElementById('main'));
//图表显示提示信息
myChart.showLoading({
text:"图表数据正在努力加载..."
});
//定义图表options
varoptions={
title:{
text:"通过Ajax获取数据呈现图标示例",
subtext:"www.stepday.com",
sublink:"http://www.stepday.com/myblog/?Echarts"
},
tooltip:{
trigger:'axis'
},
legend:{
data:[]
},
toolbox:{
show:true,
feature:{
mark:false
}
},
calculable:true,
xAxis:[
{
type:'category',
data:[]
}
],
yAxis:[
{
type:'value',
splitArea:{show:true}
}
],
series:[]
};
//通过Ajax获取数据
$.ajax({
type:"post",
async:false,//同步执行
url:"/Ajax/GetChartData.aspx?type=getData&count=12",
dataType:"json",//返回数据形式为json
success:function(result){
if(result){
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组这里需要是xAxis[i]的形式
options.xAxis[0].data=result.category;
options.series=result.series;
options.legend.data=result.legend;
myChart.hideLoading();
myChart.setOption(options);
}
},
error:function(errorMsg){
alert("不好意思,大爷,图表请求数据失败啦!");
}
});
}
参考:http://www.stepday.com/topic/?906
8. Echarts,柱状图点击事件。
varchart=echarts.init(dom);
chart.on('click',function(params){
console.log('你点击的是:'+params.seriesName);
//dosomething
});
可以使用点击事件完成你的需求。
9. 怎么查看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
10. 类似echarts 的报表工具有哪些
1、fusionCharts:FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是lash图形方案提供商。
FusionCharts free 是一个跨平台,跨浏览器的flash图表组件解决方案,能够ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, HTML页面以及PPT调用。
2、highcharts:Highcharts 是一个用纯JavaScript编写的一个图表库, web应用程序添加有交互性的图表。
3、ActiveReports是一款NET 平台的报表控件,工作于HTML5 / WinForm / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和报表开发工作需求。
(10)echarts股票信息扩展阅读:
综合几年的客户反馈情况,我们认为最重要的有如下几点:
1、报表设计工具要灵活方便,能胜任任意复杂的报表形式
2、系统应能处理不同结构的报表
3、绝对应采用B/S架构的报表平台
报表采集需要有基层和中级层级参与,如果采用单机版软件,则有很多问题。
1)需要层层下发报表格式和报表软件,降低任务部署效率。
2)如果运行中报表格式更新了,又要层层下发。万一某些下级没有更新,那就只有一个字“悲惨”。
3)下级要安装报表软件,严重增加总部的服务压力。
4、系统应提高强大的报表运算和审核校对能力
5、系统应能自动管理数据库
6、一定要考虑到上线后的报表指标体系还是要变的
7、系统的分析功能一定要强大
8、一定要支持二次开发,来满足某些极个性化的需求
9、 用户自定义报表制作,能够满足终端用户在使用过程中的编辑需求。