# frappe_echarts

**Repository Path**: zhoumou2022/frappe_echarts

## Basic Information

- **Project Name**: frappe_echarts
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 8
- **Created**: 2025-03-21
- **Last Updated**: 2025-07-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Frappe Echarts

Echarts for frappe

## Key Features

- Use Echarts in Frappe
- Surpport radar chart where frappe-charts is not surpported
- Customize Icons

## Installation

1. Install frappe
2. Install frappe-echarts
	```sh
	$ bench get-app https://gitee.com/allentj2020/frappe_echarts.git
	```
3. Install app on your site
	```sh
	$ bench --site sitename install-app frappe_echarts
	```
## How To Add Custom Icons

1. Copy "SVG Code" of icon from [iconfont](https://www.iconfont.cn/), it may like this:
	```html
		<svg 
			t="1739229214847" 
			class="icon" 
			viewBox="0 0 1024 1024" 
			version="1.1" 
			xmlns="http://www.w3.org/2000/svg" 
			p-id="4180" 
			width="200" 
			height="200"
		>
			<path d="M985.6 ****" p-id="4181">
			</path>
		</svg>
	```
2. replace svg tag with "symbol" tag, add attr "id" with name start with "icon-" like this:
	```html
		<symbol 
			id="icon-test"
			t="1739229214847" 
			class="icon" 
			viewBox="0 0 1024 1024" 
			version="1.1" 
			xmlns="http://www.w3.org/2000/svg" 
			p-id="4180" 
			width="200" 
			height="200"
		>
			<path d="M985.6 ****" p-id="4181">
			</path>
		</symbol>
	```
3. add this symbol to file "icons.svg"


## Examples
Radar Chart
![](./frappe_echarts/examples/images/radar.png)
```python
# chart data from report
{
	"data": {
		'labels': ['Allocated Budget', 'Actual Spending'],
		'datasets': [{
			'name': 'Budget vs spending',
			'type': 'radar',
			'data': [
				{
				'value': [4200, 3000, 20000, 35000, 50000, 18000],
				'name': 'Allocated Budget'
				},
				{
				'value': [5000, 14000, 28000, 26000, 42000, 21000],
				'name': 'Actual Spending'
				}
			]
		}],
		'indicator': [
			{ 'name': 'Sales', 'max': 6500 },
			{ 'name': 'Administration', 'max': 16000 },
			{ 'name': 'Information Technology', 'max': 30000 },
			{ 'name': 'Customer Support', 'max': 38000 },
			{ 'name': 'Development', 'max': 52000 },
			{ 'name': 'Marketing', 'max': 25000 }
		],
		'title': _('Objective Score')
	},
	"type": "radar"
}
```

## License

mit