# 通用Echarts4使用
## su-echarts4 基础组件

### 导入使用
```code[javascript]
import SuEcharts5 from "ss-universal-client-web/comp/chart/su-echarts5";
```

### 基础用法

:::demo 
```html
<template>
    <su-echarts4 :option="config" style="height:400px;"></su-echarts4>
</template>
<script>
export default {
    components: {
        SuEcharts4
    },
    data() {
        return {
            config: {
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 1048, name: 'Search Engine'},
                            {value: 735, name: 'Direct'},
                            {value: 580, name: 'Email'},
                            {value: 484, name: 'Union Ads'},
                            {value: 300, name: 'Video Ads'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        }
    },
    methods: {}
}
</script>
```
:::


### Attributes

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| option     |  绑定数据           | object | — | — |


## 通用配置工具-统一样式

### 导入使用
```code[javascript]
import {EchartsOptionTool} from "ss-universal-client-web/comp/chart/su-echarts4";
```

### Bar 

```code[javascript]
    let config  = {
        title : "  ",
        yAxis : "件",
        isSort : false,
        data : [{field : '一月',name : '男' ,value : 200 },{field : '二月',name : '男' ,value : 200},
            {field : '一月',name : '女' ,value : 2020 },{field : '二月',name : '女' ,value : 2020}] ,
    };
    let option = EchartsOptionTool.getBarOption(config);
```

:::demo 
```html
<template>
    <su-echarts4 :option="option" style="height:400px;"></su-echarts4>
</template>
<script>
export default {
    components: {
        SuEcharts4
    },
    data() {
        return {
            option: SuEcharts4.EchartsOptionTool.getBarOption({
                title : "  ",
                yAxis : "件",
                isSort : false,
                data : [{field : '一月',name : '男' ,value : 200 },{field : '二月',name : '男' ,value : 200},
                    {field : '一月',name : '女' ,value : 2020 },{field : '二月',name : '女' ,value : 2020}] ,
            })
        }
    },
    methods: {}
}
</script>
```
:::