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