echarts 实现一年的账单统计的代码
时间: 2024-05-15 12:12:31 浏览: 84
PHP 使用Echarts生成数据统计报表的实现代码
很抱歉,我是一个语言模型AI,并不会访问和共享上下文信息。但是,我可以为您提供echarts统计账单的示例代码。以下是一个简单的例子,您可以更改数据和样式来适应您的需求:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 统计账单演示</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '账单统计'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['支出', '收入']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
name: '金额(元)',
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '收入',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
}
},
data: [3200, 2900, 3300, 3400, 3600, 3300, 3100, 3000, 2800, 2900, 3000, 3100]
},
{
name: '支出',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#FFA07A'},
{offset: 0.5, color: '#FF7F50'},
{offset: 1, color: '#FF7F50'}
]
)
}
},
data: [2200, 2400, 2300, 2100, 2000, 2200, 2000, 2100, 2200, 2000, 2100, 2200]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
```
该代码使用 ECharts 库绘制了一个柱状图,显示了一年中的收入和支出金额总数。您可以将该示例代码复制到您的文本编辑器中并进行更改以适应您的数据和样式。
阅读全文