4 changed files with 95981 additions and 0 deletions
@ -0,0 +1,66 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta charset="utf-8" /> |
||||
|
<title>ECharts</title> |
||||
|
<!-- 引入刚刚下载的 ECharts 文件 --> |
||||
|
<script src="js/echarts.js"></script> |
||||
|
</head> |
||||
|
<body> |
||||
|
<!-- 为 ECharts 准备一个定义了宽高的 DOM --> |
||||
|
<div id="main" style="width: 600px;height:600px;"></div> |
||||
|
<script type="text/javascript"> |
||||
|
var postData = |
||||
|
[ |
||||
|
{ |
||||
|
"value": 2313123, |
||||
|
"name": "订单总额" |
||||
|
}, |
||||
|
{ |
||||
|
"value": 4359354, |
||||
|
"name": "实际到货价值" |
||||
|
}, |
||||
|
{ |
||||
|
"value": 2313123, |
||||
|
"name": "在途货价值" |
||||
|
}, |
||||
|
{ |
||||
|
"value": 2313123, |
||||
|
"name": "超出价值" |
||||
|
} |
||||
|
]; |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
var myChart = echarts.init(document.getElementById('main')); |
||||
|
// 指定图表的配置项和数据 |
||||
|
var option = { |
||||
|
legend: { |
||||
|
top: 'bottom' |
||||
|
}, |
||||
|
toolbox: { |
||||
|
show: true, |
||||
|
feature: { |
||||
|
mark: { show: true }, |
||||
|
dataView: { show: true, readOnly: false }, |
||||
|
restore: { show: true }, |
||||
|
saveAsImage: { show: true } |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'Nightingale Chart', |
||||
|
type: 'pie', |
||||
|
radius: [50, 250], |
||||
|
center: ['50%', '50%'], |
||||
|
roseType: 'area', |
||||
|
itemStyle: { |
||||
|
borderRadius: 8 |
||||
|
}, |
||||
|
data: postData |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
// 使用刚指定的配置项和数据显示图表。 |
||||
|
myChart.setOption(option); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
File diff suppressed because it is too large
@ -0,0 +1,75 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta charset="utf-8" /> |
||||
|
<title>ECharts</title> |
||||
|
<!-- 引入刚刚下载的 ECharts 文件 --> |
||||
|
<script src="js/echarts.js"></script> |
||||
|
</head> |
||||
|
<body> |
||||
|
<!-- 为 ECharts 准备一个定义了宽高的 DOM --> |
||||
|
<div id="main" style="width: 600px;height:400px;"></div> |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
var postDataSet = { |
||||
|
"dimensions": [ |
||||
|
"reportDate", |
||||
|
"销售商品收到的现金", |
||||
|
"收到其他与经营活动有关的现金" |
||||
|
], |
||||
|
"source": [ |
||||
|
{ |
||||
|
"reportDate": "2023-01-01", |
||||
|
"销售商品收到的现金": 123123.21, |
||||
|
"收到其他与经营活动有关的现金": 23554.43 |
||||
|
}, |
||||
|
{ |
||||
|
"reportDate": "2023-01-02", |
||||
|
"销售商品收到的现金": 235553.23, |
||||
|
"收到其他与经营活动有关的现金": 234323.11 |
||||
|
}, |
||||
|
{ |
||||
|
"reportDate": "2023-01-03", |
||||
|
"销售商品收到的现金": 347534.13, |
||||
|
"收到其他与经营活动有关的现金": 234234.11 |
||||
|
}, |
||||
|
{ |
||||
|
"reportDate": "2023-01-04", |
||||
|
"销售商品收到的现金": 346532.21, |
||||
|
"收到其他与经营活动有关的现金": 234342.11 |
||||
|
}, |
||||
|
{ |
||||
|
"reportDate": "2023-01-05", |
||||
|
"销售商品收到的现金": 345354.23, |
||||
|
"收到其他与经营活动有关的现金": 213123.11 |
||||
|
}, |
||||
|
{ |
||||
|
"reportDate": "2023-01-06", |
||||
|
"销售商品收到的现金": 543266.23, |
||||
|
"收到其他与经营活动有关的现金": 34234.11 |
||||
|
}, |
||||
|
{ |
||||
|
"reportDate": "2023-01-07", |
||||
|
"销售商品收到的现金": 564365.23, |
||||
|
"收到其他与经营活动有关的现金": 234342.11 |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
var myChart = echarts.init(document.getElementById('main')); |
||||
|
// 指定图表的配置项和数据 |
||||
|
var option = { |
||||
|
legend: {}, |
||||
|
tooltip: {}, |
||||
|
dataset: postDataSet, |
||||
|
xAxis: { type: 'category' }, |
||||
|
yAxis: {}, |
||||
|
// Declare several bar series, each will be mapped |
||||
|
// to a column of dataset.source by default. |
||||
|
series: [{ type: 'bar' }, { type: 'bar' }] |
||||
|
}; |
||||
|
// 使用刚指定的配置项和数据显示图表。 |
||||
|
myChart.setOption(option); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,163 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta charset="utf-8" /> |
||||
|
<title>ECharts</title> |
||||
|
<!-- 引入刚刚下载的 ECharts 文件 --> |
||||
|
<script src="js/echarts.js"></script> |
||||
|
</head> |
||||
|
<body> |
||||
|
<!-- 为 ECharts 准备一个定义了宽高的 DOM --> |
||||
|
<div id="main" style="width: 800px;height:300px;"></div> |
||||
|
<script type="text/javascript"> |
||||
|
var postData = |
||||
|
{ |
||||
|
"legend": { |
||||
|
"data": [ |
||||
|
"仓库货值", |
||||
|
"在途货值", |
||||
|
"门店货值", |
||||
|
"帐户余额", |
||||
|
"应收帐款", |
||||
|
"借款金额" |
||||
|
] |
||||
|
}, |
||||
|
"xAxis": { |
||||
|
"type": "category", |
||||
|
"boundaryGap": false, |
||||
|
"data": [ |
||||
|
"23-01-01", |
||||
|
"23-01-02", |
||||
|
"23-01-03", |
||||
|
"23-01-04", |
||||
|
"23-01-05", |
||||
|
"23-01-06", |
||||
|
"23-01-07" |
||||
|
] |
||||
|
}, |
||||
|
"series": [ |
||||
|
{ |
||||
|
"name": "仓库货值", |
||||
|
"type": "line", |
||||
|
"stack": "Total", |
||||
|
"data": [ |
||||
|
120, |
||||
|
132, |
||||
|
101, |
||||
|
134, |
||||
|
90, |
||||
|
230, |
||||
|
210 |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"name": "在途货值", |
||||
|
"type": "line", |
||||
|
"stack": "Total", |
||||
|
"data": [ |
||||
|
120, |
||||
|
132, |
||||
|
101, |
||||
|
134, |
||||
|
90, |
||||
|
230, |
||||
|
210 |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"name": "门店货值", |
||||
|
"type": "line", |
||||
|
"stack": "Total", |
||||
|
"data": [ |
||||
|
120, |
||||
|
132, |
||||
|
101, |
||||
|
134, |
||||
|
90, |
||||
|
230, |
||||
|
210 |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"name": "帐户余额", |
||||
|
"type": "line", |
||||
|
"stack": "Total", |
||||
|
"data": [ |
||||
|
120, |
||||
|
132, |
||||
|
101, |
||||
|
134, |
||||
|
90, |
||||
|
230, |
||||
|
210 |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"name": "应收帐款", |
||||
|
"type": "line", |
||||
|
"stack": "Total", |
||||
|
"data": [ |
||||
|
120, |
||||
|
132, |
||||
|
101, |
||||
|
134, |
||||
|
90, |
||||
|
230, |
||||
|
210 |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
"name": "借款金额", |
||||
|
"type": "line", |
||||
|
"stack": "Total", |
||||
|
"data": [ |
||||
|
120, |
||||
|
132, |
||||
|
101, |
||||
|
134, |
||||
|
90, |
||||
|
230, |
||||
|
210 |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
var myChart = echarts.init(document.getElementById('main')); |
||||
|
// 指定图表的配置项和数据 |
||||
|
var option = { |
||||
|
title: { |
||||
|
text: '' |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis' |
||||
|
}, |
||||
|
legend: { |
||||
|
data: postData.legend.data |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
toolbox: { |
||||
|
feature: { |
||||
|
saveAsImage: {} |
||||
|
} |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
boundaryGap: false, |
||||
|
data: postData.xAxis.data |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
}, |
||||
|
series: postData.series |
||||
|
}; |
||||
|
// 使用刚指定的配置项和数据显示图表。 |
||||
|
myChart.setOption(option); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
Loading…
Reference in new issue