图表

可以用于在页面中用图表的形式展示数据

## 基础用法

1. 拖动图表组件到指定位置

属性设置

选中图表类型，绑定变量表达式

具体操作如下

预置变量

预置一个数据类型是Object的变量

预置方法

预置一个方法，把数据库中查询的出的数据转换成指定js结构，并在方法中给变量赋值

function newFunction1() {
    // 加载数据源
    this.loadDataSource("DataSource1").then(data => {

        let grid = {
            "tooltip": {
                "trigger": "item"
            },
            "legend": {
                "top": "5%",
                "left": "center",
                "show": true,
                "textStyle": {
                    "color": "#000",
                    "fontSize": 12
                }
            },
            "series": [
                {
                    "name": "Access From",
                    "type": "pie",
                    "radius": [
                        "40%",
                        "70%"
                    ],
                    "avoidLabelOverlap": false,
                    "itemStyle": {
                        "borderRadius": 10,
                        "borderColor": "#fff",
                        "borderWidth": 2
                    },
                    "label": {
                        "show": false,
                        "position": "center"
                    },
                    "emphasis": {
                        "label": {
                            "show": true,
                            "fontSize": 40,
                            "fontWeight": "bold"
                        }
                    },
                    "labelLine": {
                        "show": false
                    },
                    "data": data.rows.map(item => ({
                        "value": item.qty,
                        "name": item.item_name
                    }))
                }
            ]
        }

        this.varSet.view.var1 = grid;

    })

}

生命周期

生命周期onMounted方法调用预置的方法

图表结构获取

官网获取

登录Echarts官网，选择自己需要的图表 https://echarts.apache.org/examples/zh/index.html#chart-type-pie

左侧js代码示例中option={}，就是我们系统中需要的代码

注意事项

上图中这种colors的内容，需要直接写入代码中 复制出来的代码需要转换成json格式 根据具体写法而定

系统预置

选中图表控件，选择图表类型，点击编辑结构，复制图标结构，提供给变量或者方法使用