You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2018/11/15 02:47:28 UTC
[GitHub] zhouxin860114 commented on issue #6875: 如何自己实现多图布局
zhouxin860114 commented on issue #6875: 如何自己实现多图布局
URL: https://github.com/apache/incubator-echarts/issues/6875#issuecomment-438897161
> One-line summary [问题简述]
>
> 官网上创建的例子支持多图布局，自己创建的例子怎么才能支持多图布局？
> 布局需要自己处理吗，还是有现成可用的API？没有发现API中有相关的方法
> myChart.setOption( )方法，并不支持传入options=[ ]数组，
> myChart.setOption(options)，这样传入会报“对象不支持split属性或方法”的错误
> myChart.setOption(options[0])，这样传入没有问题
> Uploading TIM截图20171021105126.png…
> Version & Environment [版本及环境]
>
> ECharts version [ECharts 版本]: v3.7.2
> Browser version [浏览器类型和版本]: ie11
> OS Version [操作系统类型和版本]: win10
>
> Expected behaviour [期望结果]
>
> 传入options = [ ]配置项数组，实现多图布局
> ECharts option [ECharts配置项]
>
> options = [{
> title: {
> text: ''
> },
> angleAxis: {
> type: 'category',
> data: ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'],
> z: 0,
> boundaryGap: false,
> splitLine: {
> show: true,
> lineStyle: {
> color: '#ddd',
> type: 'solid'
> }
> },
> axisLine: {
> show: false
> }
> },
> radiusAxis: {},
> polar: {},
> series: [{
> type: 'bar',
> data: [3, 10, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2],
> coordinateSystem: 'polar',
> name: '',
> stack: 'a',
> itemStyle: {
> normal: {
> color: '#00539F'
> }
> }
> }, {
> type: 'bar',
> data: [4, 6, 3, 0, 0, 0, 0, 1, 5, 2, 0, 0, 2, 0, 0, 0],
> coordinateSystem: 'polar',
> name: '',
> stack: 'a',
> itemStyle: {
> normal: {
> color: '#2694BD'
> }
> }
> }, {
> type: 'bar',
> data: [0, 7, 9, 2, 0, 0, 1, 3, 5, 1, 5, 1, 2, 3, 1, 1],
> coordinateSystem: 'polar',
> name: '',
> stack: 'a',
> itemStyle: {
> normal: {
> color: '#66BC29'
> }
> }
> }, {
> type: 'bar',
> data: [1, 8, 5, 4, 1, 1, 0, 3, 9, 3, 2, 0, 1, 2, 0, 1],
> coordinateSystem: 'polar',
> name: '',
> stack: 'a',
> itemStyle: {
> normal: {
> color: '#EAC911'
> }
> }
> }, {
> type: 'bar',
> data: [0, 2, 2, 2, 4, 0, 0, 2, 3, 3, 0, 0, 0, 2, 2, 0],
> coordinateSystem: 'polar',
> name: '',
> stack: 'a',
> itemStyle: {
> normal: {
> color: '#ED6E00'
> }
> }
> }, {
> type: 'bar',
> data: [0, 0, 0, 0, 0, 5, 2, 2, 8, 1, 0, 0, 0, 1, 0, 0],
> coordinateSystem: 'polar',
> name: '',
> stack: 'a',
> itemStyle: {
> normal: {
> color: '#BB3012'
> }
> }
> }]
> }, {
> title: {
> text: ''
> },
> polar: {},
> angleAxis: {
> type: 'value'
> },
> radiusAxis: {
> axisAngle: 0
> },
> series: [{
> coordinateSystem: 'polar',
> angleAxisIndex: 0,
> radiusAxisIndex: 0,
> name: 'scatter',
> type: 'scatter',
> symbolSize: 5,
> data: [{
> value: [0.8792, 176.2322],
> itemStyle: {
> normal: {
> color: '#66BC29'
> }
> }
> }, {
> value: [0.3551, 138.9667],
> itemStyle: {
> normal: {
> color: '#66BC29'
> }
> }
> }, {
> value: [0.2297, 186.4351],
> itemStyle: {
> normal: {
> color: '#66BC29'
> }
> }
> }, {
> value: [0.0062, 168.8333],
> itemStyle: {
> normal: {
> color: '#66BC29'
> }
> }
> }, {
> value: [0.041, 168],
> itemStyle: {
> normal: {
> color: '#BB3012'
> }
> }
> }, {
> value: [0, 168],
> itemStyle: {
> normal: {
> color: '#ED6E00'
> }
> }
> }, {
> value: [0, 168],
> itemStyle: {
> normal: {
> color: '#EAC911'
> }
> }
> }]
> }]
> }];
>
> Other comments [其他信息]
>
> tim 20171021105126
我也想用多图布局，用预览模式看了gallery的多图布局，发现其实还是多个div，每个options[i]与相应的div绑定的。
所以……自己写个排版+自动绑定（echarts.init）的函数就好了
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org