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

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

### 基础用法

:::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 | — | — |

## Methods

| 方法名称    | 说明     |
|---------- |-------- |
| getEchartsInstance()    | 获取图表实例 |

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

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

### 饼图 

```code[javascript]
    let config = {
                title: {
                    text: '饼状图1',//  主标题
                },   
                data: [
                    { name: '一月', value: 200 },
                    { name: '二月', value: 200 },
                    { name: '三月', value: 2020 },
                    { 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.getPieOption({
                title: {
                    text: '饼状图1',//  主标题
                },   
                data: [
                    { name: '一月', value: 200 },
                    { name: '二月', value: 200 },
                    { name: '三月', value: 2020 },
                    { name: '四月', value: 2020 }
                ],
            })
        }
    },
    methods: {}
}
</script>
```
:::

### 柱状图 

```code[javascript]
    let config = {
            title:{
                text:'柱状图1标题'
            },
            yAxis : {
                name:"Y轴单位",
            },
            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:{
                    text:'柱状图1标题'
                },
                yAxis : {
                    name:"Y轴单位",
                },
                data: [
                    {field: '一月', name: '男', value: 200},
                    {field: '二月', name: '男', value: 200},
                    {field: '一月', name: '女', value: 2020},
                    {field: '二月', name: '女', value: 2020}
                ],
            })
        }
    },
    methods: {}
}
</script>
```
:::

### 折线图 

```code[javascript]
    let config = {
           title:{
               text:'图形标题'
           },
           yAxis : {
               name:"Y轴单位",
           },
            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.getLineOption({
               title:{
                   text:'我是标题'
               },
               yAxis : {
                   name:"Y轴单位",
               },
               legend: {
                 orient:'horizontal',
                 x:'center',
                 y:'bottom',
                 itemGap:25,
               },
               color: ["#ccc", "#006699"],
               data: [
                    {field: '一月', name: '男', value: 200},
                    {field: '二月', name: '男', value: 200},
                    {field: '一月', name: '女', value: 2020},
                    {field: '二月', name: '女', value: 2020}
               ],
            })
        }
    },
    methods: {}
}
</script>
```
:::