核心文件引入
模块化框架
requirejs.config({
paths:{
'jquery' : "../jquery/2.1.0/jquery.min",
'echarts':'../js/echarts.min',
'highstock':'../js/libs/highcharts/highstock',
'ZeroClipboard' : '../js/ZeroClipboard',
'indexjs':'../js/index',
'scroll':'../js/scroll',
'tab':'../js/tab',
'select':'../js/selectlist',
'poshytip' : "js/src/poshytip",
'copy':'../js/copy',
'bar' : "js/src/bar",
'barTwo' : "js/src/barTwo",
'line' : "js/src/line",
'pie' : "js/src/pie",
'pieTwo' : "js/src/pieTwo",
'indexChart' : 'js/src/indexChart'
}
});
简介
是一个由纯 javascript 实现的强大的数据可视化工具，提供了一整套图形语法，以数据为驱动完成数据到图形空间的映射，是为大数据时代而准备的强大的可视化工具。
柱状图案例一
13
12
11
10
9
8
7
6
1个月
2个月
3个月
4个月
5个月
6个月
7个月
8个月
9个月
10个月
11个月
12个月
使用
requirejs.config({
paths:{
jquery : "../jquery/2.1.0/jquery.min",
poshytip : "js/src/poshytip",
bar : "js/src/bar"
}
});
require(['poshytip','bar'], function(a,b){
});
柱状图案例二
使用
requirejs.config({
paths:{
'jquery' : "../jquery/2.1.0/jquery.min",
'echarts':'../js/echarts.min',
'ZeroClipboard' : '../js/ZeroClipboard',
'indexjs':'../js/index',
'scroll':'../js/scroll',
'tab':'../js/tab',
'select':'../js/selectlist',
'poshytip' : "js/src/poshytip",
'copy':'../js/copy',
'bar' : "js/src/bar",
'line' : "js/src/line",
'pie' : "js/src/pie",
'indexChart' : 'js/src/indexChart'
}
});
require(['ZeroClipboard'],function (a) {
})
require(['indexjs','scroll','tab','select'],function($){
});
require(['copy'],function($){
});
require(['poshytip','bar'], function(a,b){
});
require(['line'], function(a){
});
require(['pie'], function(a){
});
require(['indexChart'], function(t){
var result ={
"maxIncome": 10,
"incomeData": [
{
"date": "2016-10-15",
"income": 0
},
{
"date": "2016-10-16",
"income": 0
},
{
"date": "2016-10-17",
"income": 10
},
{
"date": "2016-10-18",
"income": 0
},
{
"date": "2016-10-19",
"income": 5
},
{
"date": "2016-10-20",
"income": 1
},
{
"date": "2016-10-21",
"income": 2
},
{
"date": "2016-10-22",
"income": 3
},
{
"date": "2016-10-23",
"income": 8
},
{
"date": "2016-10-24",
"income": 0
},
{
"date": "2016-10-25",
"income": 0
},
{
"date": "2016-10-26",
"income": 0
},
{
"date": "2016-10-27",
"income": 0
},
{
"date": "2016-10-28",
"income": 0
},
{
"date": "2016-10-29",
"income": 0
},
{
"date": "2016-10-30",
"income": 0
},
{
"date": "2016-10-31",
"income": 0
},
{
"date": "2016-11-01",
"income": 0
},
{
"date": "2016-11-02",
"income": 0
},
{
"date": "2016-11-03",
"income": 0
},
{
"date": "2016-11-04",
"income": 0
},
{
"date": "2016-11-05",
"income": 0
},
{
"date": "2016-11-06",
"income": 0
},
{
"date": "2016-11-07",
"income": 0
},
{
"date": "2016-11-08",
"income": 0
},
{
"date": "2016-11-09",
"income": 0
},
{
"date": "2016-11-10",
"income": 0
},
{
"date": "2016-11-11",
"income": 0
},
{
"date": "2016-11-12",
"income": 0
},
{
"date": "2016-11-13",
"income": 1
},
{
"date": "2016-11-14",
"income": 3
},
{
"date": "2016-11-15",
"income": 4
},
{
"date": "2016-11-16",
"income": 0
},
{
"date": "2016-11-17",
"income": 0
},
{
"date": "2016-11-18",
"income": 7
},
{
"date": "2016-11-19",
"income": 2
},
{
"date": "2016-11-20",
"income": 0
},
{
"date": "2016-11-21",
"income": 0
},
{
"date": "2016-11-22",
"income": 0
},
{
"date": "2016-11-23",
"income": 0
},
{
"date": "2016-11-24",
"income": 0
},
{
"date": "2016-11-25",
"income": 0
},
{
"date": "2016-11-26",
"income": 0
},
{
"date": "2016-11-27",
"income": 0
},
{
"date": "2016-11-28",
"income": 0
},
{
"date": "2016-11-29",
"income": 0
},
{
"date": "2016-11-30",
"income": 0
},
{
"date": "2016-12-01",
"income": 0
},
{
"date": "2016-12-02",
"income": 0
},
{
"date": "2016-12-03",
"income": 0
},
{
"date": "2016-12-04",
"income": 0
},
{
"date": "2016-12-05",
"income": 0
},
{
"date": "2016-12-06",
"income": 0
},
{
"date": "2016-12-07",
"income": 0
},
{
"date": "2016-12-08",
"income": 1
},
{
"date": "2016-12-09",
"income": 0
},
{
"date": "2016-12-10",
"income": 7
},
{
"date": "2016-12-11",
"income": 0
},
{
"date": "2016-12-12",
"income": 6
},
{
"date": "2016-12-13",
"income": 6
},
{
"date": "2016-12-14",
"income": 6
},
{
"date": "2016-12-15",
"income": 5
},
{
"date": "2016-12-16",
"income": 7
},
{
"date": "2016-12-17",
"income": 8
},
{
"date": "2016-12-18",
"income": 6
},
{
"date": "2016-12-19",
"income": 10
}
]
}
var indexData = {
success: true,
maxIncome: result.maxIncome,
status: 3,
data: result.incomeData
};
return new t({
renderWrap: "#J_indexChart",
width: 910,
height: 160,
data: indexData
})
});
柱状图案例三
-
交易金额单位（万元）
-
交易笔数单位（万笔）
使用
requirejs.config({
paths:{
'jquery' : "../jquery/2.1.0/jquery.min",
'echarts':'../js/echarts.min',
'highstock':'../js/libs/highcharts/highstock',
'ZeroClipboard' : '../js/ZeroClipboard',
'indexjs':'../js/index',
'scroll':'../js/scroll',
'tab':'../js/tab',
'select':'../js/selectlist',
'poshytip' : "js/src/poshytip",
'copy':'../js/copy',
'bar' : "js/src/bar",
'barTwo' : "js/src/barTwo",
'line' : "js/src/line",
'pie' : "js/src/pie",
'indexChart' : 'js/src/indexChart'
}
});
require(['ZeroClipboard'],function (a) {
})
require(['indexjs','scroll','tab','select'],function($){
});
require(['copy'],function($){
});
require(['poshytip','bar'], function(a,b){
});
require(['barTwo'], function(a){
});
require(['line'], function(a){
});
require(['pie'], function(a){
});
require(['indexChart'], function(t){
var result ={
"maxIncome": 10,
"incomeData": [
{
"date": "2016-10-15",
"income": 0
},
{
"date": "2016-10-16",
"income": 0
},
{
"date": "2016-10-17",
"income": 10
},
{
"date": "2016-10-18",
"income": 0
},
{
"date": "2016-10-19",
"income": 5
},
{
"date": "2016-10-20",
"income": 1
},
{
"date": "2016-10-21",
"income": 2
},
{
"date": "2016-10-22",
"income": 3
},
{
"date": "2016-10-23",
"income": 8
},
{
"date": "2016-10-24",
"income": 0
},
{
"date": "2016-10-25",
"income": 0
},
{
"date": "2016-10-26",
"income": 0
},
{
"date": "2016-10-27",
"income": 0
},
{
"date": "2016-10-28",
"income": 0
},
{
"date": "2016-10-29",
"income": 0
},
{
"date": "2016-10-30",
"income": 0
},
{
"date": "2016-10-31",
"income": 0
},
{
"date": "2016-11-01",
"income": 0
},
{
"date": "2016-11-02",
"income": 0
},
{
"date": "2016-11-03",
"income": 0
},
{
"date": "2016-11-04",
"income": 0
},
{
"date": "2016-11-05",
"income": 0
},
{
"date": "2016-11-06",
"income": 0
},
{
"date": "2016-11-07",
"income": 0
},
{
"date": "2016-11-08",
"income": 0
},
{
"date": "2016-11-09",
"income": 0
},
{
"date": "2016-11-10",
"income": 0
},
{
"date": "2016-11-11",
"income": 0
},
{
"date": "2016-11-12",
"income": 0
},
{
"date": "2016-11-13",
"income": 1
},
{
"date": "2016-11-14",
"income": 3
},
{
"date": "2016-11-15",
"income": 4
},
{
"date": "2016-11-16",
"income": 0
},
{
"date": "2016-11-17",
"income": 0
},
{
"date": "2016-11-18",
"income": 7
},
{
"date": "2016-11-19",
"income": 2
},
{
"date": "2016-11-20",
"income": 0
},
{
"date": "2016-11-21",
"income": 0
},
{
"date": "2016-11-22",
"income": 0
},
{
"date": "2016-11-23",
"income": 0
},
{
"date": "2016-11-24",
"income": 0
},
{
"date": "2016-11-25",
"income": 0
},
{
"date": "2016-11-26",
"income": 0
},
{
"date": "2016-11-27",
"income": 0
},
{
"date": "2016-11-28",
"income": 0
},
{
"date": "2016-11-29",
"income": 0
},
{
"date": "2016-11-30",
"income": 0
},
{
"date": "2016-12-01",
"income": 0
},
{
"date": "2016-12-02",
"income": 0
},
{
"date": "2016-12-03",
"income": 0
},
{
"date": "2016-12-04",
"income": 0
},
{
"date": "2016-12-05",
"income": 0
},
{
"date": "2016-12-06",
"income": 0
},
{
"date": "2016-12-07",
"income": 0
},
{
"date": "2016-12-08",
"income": 1
},
{
"date": "2016-12-09",
"income": 0
},
{
"date": "2016-12-10",
"income": 7
},
{
"date": "2016-12-11",
"income": 0
},
{
"date": "2016-12-12",
"income": 6
},
{
"date": "2016-12-13",
"income": 6
},
{
"date": "2016-12-14",
"income": 6
},
{
"date": "2016-12-15",
"income": 5
},
{
"date": "2016-12-16",
"income": 7
},
{
"date": "2016-12-17",
"income": 8
},
{
"date": "2016-12-18",
"income": 6
},
{
"date": "2016-12-19",
"income": 10
}
]
}
var indexData = {
success: true,
maxIncome: result.maxIncome,
status: 3,
data: result.incomeData
};
return new t({
renderWrap: "#J_indexChart",
width: 910,
height: 160,
data: indexData
})
});
折线图案例
历史累计成交量
303.58亿
累计为用户赚取
33.43亿
累计交易
1,908.50万次
累计注册人数
11,666,457人
使用
requirejs.config({
paths:{
'jquery' : "../jquery/2.1.0/jquery.min",
'echarts':'../js/echarts.min',
'ZeroClipboard' : '../js/ZeroClipboard',
'indexjs':'../js/index',
'scroll':'../js/scroll',
'tab':'../js/tab',
'select':'../js/selectlist',
'poshytip' : "js/src/poshytip",
'copy':'../js/copy',
'bar' : "js/src/bar",
'line' : "js/src/line"
}
});
require(['ZeroClipboard'],function (a) {
})
require(['indexjs','scroll','tab','select'],function($){
});
require(['copy'],function($){
});
require(['poshytip','bar'], function(a,b){
});
require(['line'], function(a){
});
饼图案例一
使用
requirejs.config({
paths:{
'jquery' : "../jquery/2.1.0/jquery.min",
'echarts':'../js/echarts.min',
'ZeroClipboard' : '../js/ZeroClipboard',
'indexjs':'../js/index',
'scroll':'../js/scroll',
'tab':'../js/tab',
'select':'../js/selectlist',
'poshytip' : "js/src/poshytip",
'copy':'../js/copy',
'bar' : "js/src/bar",
'line' : "js/src/line",
'pie' : "js/src/pie"
}
});
require(['ZeroClipboard'],function (a) {
})
require(['indexjs','scroll','tab','select'],function($){
});
require(['copy'],function($){
});
require(['poshytip','bar'], function(a,b){
});
require(['line'], function(a){
});
require(['pie'], function(a){
});
饼图案例二
使用
requirejs.config({
paths:{
'jquery' : "../jquery/2.1.0/jquery.min",
'echarts':'../js/echarts.min',
'ZeroClipboard' : '../js/ZeroClipboard',
'indexjs':'../js/index',
'scroll':'../js/scroll',
'tab':'../js/tab',
'select':'../js/selectlist',
'poshytip' : "js/src/poshytip",
'copy':'../js/copy',
'bar' : "js/src/bar",
'line' : "js/src/line",
'pie' : "js/src/pie"
}
});
require(['ZeroClipboard'],function (a) {
})
require(['indexjs','scroll','tab','select'],function($){
});
require(['copy'],function($){
});
require(['poshytip','bar'], function(a,b){
});
require(['line'], function(a){
});
require(['pie'], function(a){
});