{"action":"created","issue":{"url":"https://api.github.com/repos/apache/incubator-echarts/issues/6875","repository_url":"https://api.github.com/repos/apache/incubator-echarts","labels_url":"https://api.github.com/repos/apache/incubator-echarts/issues/6875/labels{/name}","comments_url":"https://api.github.com/repos/apache/incubator-echarts/issues/6875/comments","events_url":"https://api.github.com/repos/apache/incubator-echarts/issues/6875/events","html_url":"https://github.com/apache/incubator-echarts/issues/6875","id":267346777,"node_id":"MDU6SXNzdWUyNjczNDY3Nzc=","number":6875,"title":"如何自己实现多图布局","user":{"login":"FFHHVV","id":14326214,"node_id":"MDQ6VXNlcjE0MzI2MjE0","avatar_url":"https://avatars3.githubusercontent.com/u/14326214?v=4","gravatar_id":"","url":"https://api.github.com/users/FFHHVV","html_url":"https://github.com/FFHHVV","followers_url":"https://api.github.com/users/FFHHVV/followers","following_url":"https://api.github.com/users/FFHHVV/following{/other_user}","gists_url":"https://api.github.com/users/FFHHVV/gists{/gist_id}","starred_url":"https://api.github.com/users/FFHHVV/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FFHHVV/subscriptions","organizations_url":"https://api.github.com/users/FFHHVV/orgs","repos_url":"https://api.github.com/users/FFHHVV/repos","events_url":"https://api.github.com/users/FFHHVV/events{/privacy}","received_events_url":"https://api.github.com/users/FFHHVV/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-10-21T03:22:13Z","updated_at":"2018-11-15T02:47:27Z","closed_at":null,"author_association":"NONE","body":"<!--\r\n为了方便我们能够复现和修复 bug，请遵从下面的规范描述您的问题。\r\n-->\r\n\r\n\r\n### One-line summary [问题简述]\r\n官网上创建的例子支持多图布局，自己创建的例子怎么才能支持多图布局？\r\n布局需要自己处理吗，还是有现成可用的API？没有发现API中有相关的方法\r\nmyChart.setOption( )方法，并不支持传入options=[ ]数组，\r\nmyChart.setOption(options)，这样传入会报“对象不支持split属性或方法”的错误\r\nmyChart.setOption(options[0])，这样传入没有问题\r\n![Uploading TIM截图20171021105126.png…]()\r\n\r\n\r\n### Version & Environment [版本及环境]\r\n+ ECharts version [ECharts 版本]:  v3.7.2\r\n+ Browser version [浏览器类型和版本]:  ie11\r\n+ OS Version [操作系统类型和版本]:  win10\r\n\r\n\r\n\r\n\r\n\r\n### Expected behaviour [期望结果]\r\n\r\n\r\n传入options = [ ]配置项数组，实现多图布局\r\n\r\n\r\n### ECharts option [ECharts配置项]\r\n<!-- Copy and paste your 'echarts option' here. -->\r\n<!-- [下方贴你的option，注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 option。如何得到能运行的 option 参见上方的 guidelines for contributing] -->\r\n```javascript\r\noptions = [{\r\n    title: {\r\n        text: ''\r\n    },\r\n    angleAxis: {\r\n        type: 'category',\r\n        data: ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'],\r\n        z: 0,\r\n        boundaryGap: false,\r\n        splitLine: {\r\n            show: true,\r\n            lineStyle: {\r\n                color: '#ddd',\r\n                type: 'solid'\r\n            }\r\n        },\r\n        axisLine: {\r\n            show: false\r\n        }\r\n    },\r\n    radiusAxis: {},\r\n    polar: {},\r\n    series: [{\r\n        type: 'bar',\r\n        data: [3, 10, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2],\r\n        coordinateSystem: 'polar',\r\n        name: '',\r\n        stack: 'a',\r\n        itemStyle: {\r\n            normal: {\r\n                color: '#00539F'\r\n            }\r\n        }\r\n    }, {\r\n        type: 'bar',\r\n        data: [4, 6, 3, 0, 0, 0, 0, 1, 5, 2, 0, 0, 2, 0, 0, 0],\r\n        coordinateSystem: 'polar',\r\n        name: '',\r\n        stack: 'a',\r\n        itemStyle: {\r\n            normal: {\r\n                color: '#2694BD'\r\n            }\r\n        }\r\n    }, {\r\n        type: 'bar',\r\n        data: [0, 7, 9, 2, 0, 0, 1, 3, 5, 1, 5, 1, 2, 3, 1, 1],\r\n        coordinateSystem: 'polar',\r\n        name: '',\r\n        stack: 'a',\r\n        itemStyle: {\r\n            normal: {\r\n                color: '#66BC29'\r\n            }\r\n        }\r\n    }, {\r\n        type: 'bar',\r\n        data: [1, 8, 5, 4, 1, 1, 0, 3, 9, 3, 2, 0, 1, 2, 0, 1],\r\n        coordinateSystem: 'polar',\r\n        name: '',\r\n        stack: 'a',\r\n        itemStyle: {\r\n            normal: {\r\n                color: '#EAC911'\r\n            }\r\n        }\r\n    }, {\r\n        type: 'bar',\r\n        data: [0, 2, 2, 2, 4, 0, 0, 2, 3, 3, 0, 0, 0, 2, 2, 0],\r\n        coordinateSystem: 'polar',\r\n        name: '',\r\n        stack: 'a',\r\n        itemStyle: {\r\n            normal: {\r\n                color: '#ED6E00'\r\n            }\r\n        }\r\n    }, {\r\n        type: 'bar',\r\n        data: [0, 0, 0, 0, 0, 5, 2, 2, 8, 1, 0, 0, 0, 1, 0, 0],\r\n        coordinateSystem: 'polar',\r\n        name: '',\r\n        stack: 'a',\r\n        itemStyle: {\r\n            normal: {\r\n                color: '#BB3012'\r\n            }\r\n        }\r\n    }]\r\n}, {\r\n    title: {\r\n        text: ''\r\n    },\r\n    polar: {},\r\n    angleAxis: {\r\n        type: 'value'\r\n    },\r\n    radiusAxis: {\r\n        axisAngle: 0\r\n    },\r\n    series: [{\r\n        coordinateSystem: 'polar',\r\n        angleAxisIndex: 0,\r\n        radiusAxisIndex: 0,\r\n        name: 'scatter',\r\n        type: 'scatter',\r\n        symbolSize: 5,\r\n        data: [{\r\n            value: [0.8792, 176.2322],\r\n            itemStyle: {\r\n                normal: {\r\n                    color: '#66BC29'\r\n                }\r\n            }\r\n        }, {\r\n            value: [0.3551, 138.9667],\r\n            itemStyle: {\r\n                normal: {\r\n                    color: '#66BC29'\r\n                }\r\n            }\r\n        }, {\r\n            value: [0.2297, 186.4351],\r\n            itemStyle: {\r\n                normal: {\r\n                    color: '#66BC29'\r\n                }\r\n            }\r\n        }, {\r\n            value: [0.0062, 168.8333],\r\n            itemStyle: {\r\n                normal: {\r\n                    color: '#66BC29'\r\n                }\r\n            }\r\n        }, {\r\n            value: [0.041, 168],\r\n            itemStyle: {\r\n                normal: {\r\n                    color: '#BB3012'\r\n                }\r\n            }\r\n        }, {\r\n            value: [0, 168],\r\n            itemStyle: {\r\n                normal: {\r\n                    color: '#ED6E00'\r\n                }\r\n            }\r\n        }, {\r\n            value: [0, 168],\r\n            itemStyle: {\r\n                normal: {\r\n                    color: '#EAC911'\r\n                }\r\n            }\r\n        }]\r\n    }]\r\n}];\r\n\r\n```\r\n\r\n\r\n\r\n\r\n### Other comments [其他信息]\r\n<!-- For example: Screenshot or Online demo -->\r\n<!-- [例如，截图或线上实例 (JSFiddle/JSBin/Codepen)] -->\r\n![tim 20171021105126](https://user-images.githubusercontent.com/14326214/31847621-dd8519e2-b651-11e7-94de-7084f988cc8d.png)\r\n"},"comment":{"url":"https://api.github.com/repos/apache/incubator-echarts/issues/comments/438897161","html_url":"https://github.com/apache/incubator-echarts/issues/6875#issuecomment-438897161","issue_url":"https://api.github.com/repos/apache/incubator-echarts/issues/6875","id":438897161,"node_id":"MDEyOklzc3VlQ29tbWVudDQzODg5NzE2MQ==","user":{"login":"zhouxin860114","id":8022228,"node_id":"MDQ6VXNlcjgwMjIyMjg=","avatar_url":"https://avatars2.githubusercontent.com/u/8022228?v=4","gravatar_id":"","url":"https://api.github.com/users/zhouxin860114","html_url":"https://github.com/zhouxin860114","followers_url":"https://api.github.com/users/zhouxin860114/followers","following_url":"https://api.github.com/users/zhouxin860114/following{/other_user}","gists_url":"https://api.github.com/users/zhouxin860114/gists{/gist_id}","starred_url":"https://api.github.com/users/zhouxin860114/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zhouxin860114/subscriptions","organizations_url":"https://api.github.com/users/zhouxin860114/orgs","repos_url":"https://api.github.com/users/zhouxin860114/repos","events_url":"https://api.github.com/users/zhouxin860114/events{/privacy}","received_events_url":"https://api.github.com/users/zhouxin860114/received_events","type":"User","site_admin":false},"created_at":"2018-11-15T02:47:27Z","updated_at":"2018-11-15T02:47:27Z","author_association":"NONE","body":"> One-line summary [问题简述]\r\n> \r\n> 官网上创建的例子支持多图布局，自己创建的例子怎么才能支持多图布局？\r\n> 布局需要自己处理吗，还是有现成可用的API？没有发现API中有相关的方法\r\n> myChart.setOption( )方法，并不支持传入options=[ ]数组，\r\n> myChart.setOption(options)，这样传入会报“对象不支持split属性或方法”的错误\r\n> myChart.setOption(options[0])，这样传入没有问题\r\n> Uploading TIM截图20171021105126.png…\r\n> Version & Environment [版本及环境]\r\n> \r\n>     ECharts version [ECharts 版本]: v3.7.2\r\n>     Browser version [浏览器类型和版本]: ie11\r\n>     OS Version [操作系统类型和版本]: win10\r\n> \r\n> Expected behaviour [期望结果]\r\n> \r\n> 传入options = [ ]配置项数组，实现多图布局\r\n> ECharts option [ECharts配置项]\r\n> \r\n> options = [{\r\n>     title: {\r\n>         text: ''\r\n>     },\r\n>     angleAxis: {\r\n>         type: 'category',\r\n>         data: ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'],\r\n>         z: 0,\r\n>         boundaryGap: false,\r\n>         splitLine: {\r\n>             show: true,\r\n>             lineStyle: {\r\n>                 color: '#ddd',\r\n>                 type: 'solid'\r\n>             }\r\n>         },\r\n>         axisLine: {\r\n>             show: false\r\n>         }\r\n>     },\r\n>     radiusAxis: {},\r\n>     polar: {},\r\n>     series: [{\r\n>         type: 'bar',\r\n>         data: [3, 10, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2],\r\n>         coordinateSystem: 'polar',\r\n>         name: '',\r\n>         stack: 'a',\r\n>         itemStyle: {\r\n>             normal: {\r\n>                 color: '#00539F'\r\n>             }\r\n>         }\r\n>     }, {\r\n>         type: 'bar',\r\n>         data: [4, 6, 3, 0, 0, 0, 0, 1, 5, 2, 0, 0, 2, 0, 0, 0],\r\n>         coordinateSystem: 'polar',\r\n>         name: '',\r\n>         stack: 'a',\r\n>         itemStyle: {\r\n>             normal: {\r\n>                 color: '#2694BD'\r\n>             }\r\n>         }\r\n>     }, {\r\n>         type: 'bar',\r\n>         data: [0, 7, 9, 2, 0, 0, 1, 3, 5, 1, 5, 1, 2, 3, 1, 1],\r\n>         coordinateSystem: 'polar',\r\n>         name: '',\r\n>         stack: 'a',\r\n>         itemStyle: {\r\n>             normal: {\r\n>                 color: '#66BC29'\r\n>             }\r\n>         }\r\n>     }, {\r\n>         type: 'bar',\r\n>         data: [1, 8, 5, 4, 1, 1, 0, 3, 9, 3, 2, 0, 1, 2, 0, 1],\r\n>         coordinateSystem: 'polar',\r\n>         name: '',\r\n>         stack: 'a',\r\n>         itemStyle: {\r\n>             normal: {\r\n>                 color: '#EAC911'\r\n>             }\r\n>         }\r\n>     }, {\r\n>         type: 'bar',\r\n>         data: [0, 2, 2, 2, 4, 0, 0, 2, 3, 3, 0, 0, 0, 2, 2, 0],\r\n>         coordinateSystem: 'polar',\r\n>         name: '',\r\n>         stack: 'a',\r\n>         itemStyle: {\r\n>             normal: {\r\n>                 color: '#ED6E00'\r\n>             }\r\n>         }\r\n>     }, {\r\n>         type: 'bar',\r\n>         data: [0, 0, 0, 0, 0, 5, 2, 2, 8, 1, 0, 0, 0, 1, 0, 0],\r\n>         coordinateSystem: 'polar',\r\n>         name: '',\r\n>         stack: 'a',\r\n>         itemStyle: {\r\n>             normal: {\r\n>                 color: '#BB3012'\r\n>             }\r\n>         }\r\n>     }]\r\n> }, {\r\n>     title: {\r\n>         text: ''\r\n>     },\r\n>     polar: {},\r\n>     angleAxis: {\r\n>         type: 'value'\r\n>     },\r\n>     radiusAxis: {\r\n>         axisAngle: 0\r\n>     },\r\n>     series: [{\r\n>         coordinateSystem: 'polar',\r\n>         angleAxisIndex: 0,\r\n>         radiusAxisIndex: 0,\r\n>         name: 'scatter',\r\n>         type: 'scatter',\r\n>         symbolSize: 5,\r\n>         data: [{\r\n>             value: [0.8792, 176.2322],\r\n>             itemStyle: {\r\n>                 normal: {\r\n>                     color: '#66BC29'\r\n>                 }\r\n>             }\r\n>         }, {\r\n>             value: [0.3551, 138.9667],\r\n>             itemStyle: {\r\n>                 normal: {\r\n>                     color: '#66BC29'\r\n>                 }\r\n>             }\r\n>         }, {\r\n>             value: [0.2297, 186.4351],\r\n>             itemStyle: {\r\n>                 normal: {\r\n>                     color: '#66BC29'\r\n>                 }\r\n>             }\r\n>         }, {\r\n>             value: [0.0062, 168.8333],\r\n>             itemStyle: {\r\n>                 normal: {\r\n>                     color: '#66BC29'\r\n>                 }\r\n>             }\r\n>         }, {\r\n>             value: [0.041, 168],\r\n>             itemStyle: {\r\n>                 normal: {\r\n>                     color: '#BB3012'\r\n>                 }\r\n>             }\r\n>         }, {\r\n>             value: [0, 168],\r\n>             itemStyle: {\r\n>                 normal: {\r\n>                     color: '#ED6E00'\r\n>                 }\r\n>             }\r\n>         }, {\r\n>             value: [0, 168],\r\n>             itemStyle: {\r\n>                 normal: {\r\n>                     color: '#EAC911'\r\n>                 }\r\n>             }\r\n>         }]\r\n>     }]\r\n> }];\r\n> \r\n> Other comments [其他信息]\r\n> \r\n> tim 20171021105126\r\n\r\n我也想用多图布局，用预览模式看了gallery的多图布局，发现其实还是多个div，每个options[i]与相应的div绑定的。\r\n![default](https://user-images.githubusercontent.com/8022228/48526779-d4b99900-e8c3-11e8-8806-3cccd4b0a030.png)\r\n\r\n所以……自己写个排版+自动绑定（echarts.init）的函数就好了\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"zhouxin860114"}}