各个省市信息查看中左右箭头配置不起作用的问题

[zw231212]

One-line summary [问题简述]

echarts 各个省份查看的示例中的箭头问题 http://echarts.baidu.com/demo.html#map-province

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]:3
• Browser version [浏览器类型和版本]:chrome55.0
• OS Version [操作系统类型和版本]:win7

Expected behaviour [期望结果]

没有左右的箭头，配置没有起作用，示例的配置基本上都没有动

ECharts option [ECharts配置项]

var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];

var mapChart= echarts.init(document.getElementById("map"));
var option = {};

function showProvince() {
            var name = provinces[currentIdx];
            $.get('node_modules/echarts/map/json/province/' + name + '.json', function (geoJson) {
                echarts.registerMap(name, geoJson);
                mapChart.setOption(option = {
                    backgroundColor: '#404a59',
                    title: {
                        text: provincesText[currentIdx],
                        left: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            type: 'map',
                            mapType: name,
                            label: {
                                emphasis: {
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: '#389BB7',
                                    areaColor: '#fff',
                                },
                                emphasis: {
                                    areaColor: '#389BB7',
                                    borderWidth: 0
                                }
                            },
                            animation: false
                        }
                    ]
                });
            });
        }

var currentIdx = 0;

option = {
            graphic: [{
                id: 'left-btn',
                type: 'circle',
                shape: { r: 20 },
                style: {
                    text: '<',
                    fill: '#eee'
                },
                left: 10,
                top: 'middle',
                onclick: function () {
                    currentIdx -= 1;
                    if (currentIdx < 0) {
                        currentIdx += provinces.length;
                    }
                    showProvince();
                }
            }, {
                id: 'right-btn',
                type: 'circle',
                shape: { r: 20 },
                style: {
                    text: '>',
                    fill: '#eee'
                },
                top: 'middle',
                right: 10,
                onclick: function () {
                    currentIdx = (currentIdx + 1) % provinces.length;
                    showProvince();
                }
            }],
            series: []
        };

showProvince();

Other comments [其他信息]

[100pah]

你的 echarts 具体版本是？

[zw231212]

@100pah 昨天是使用npm直接install的，今天试着从官网上下了完整的577kb的min.js，也是一样没起作用，也试着使用了在示例那边拿过来的all.js，还是没什么反应。

[pissang]

option = {
            graphic: [{
                id: 'left-btn',
                type: 'circle',
                shape: { r: 20 },
                style: {
                    text: '<',
                    fill: '#eee'
                },
                left: 10,
                top: 'middle',
                onclick: function () {
                    currentIdx -= 1;
                    if (currentIdx < 0) {
                        currentIdx += provinces.length;
                    }
                    showProvince();
                }
            }, {
                id: 'right-btn',
                type: 'circle',
                shape: { r: 20 },
                style: {
                    text: '>',
                    fill: '#eee'
                },
                top: 'middle',
                right: 10,
                onclick: function () {
                    currentIdx = (currentIdx + 1) % provinces.length;
                    showProvince();
                }
            }],
            series: []
        };

这个 option 你有用 setOption 设置么？

[zw231212]

@pissang 这个正解，在showProvince()后面还要加setOption