最近在做一个数据可视化大屏的作业，其中需要实现点击不同的按钮，大屏中间内容呈现不同的数据分析图表，页面其他部分不发生改变。之前考虑过复制多个页面然后改变中间的页面，但是这样会导致文件冗余，而且由于静态文件放在不同的文件夹，所以每个复制的页面都要调整文件路径！这将极大地增加工作量。
后面在网上查了好久，终于发现一个可以用a标签的锚点定位来实现这一效果。（当然也有一些用js实现的，但是我还么学，所以只能用这个了，而且这个也是非常方便相较于js）
废话不多说先看代码。因为我这里嵌入了echarts代码，可能看上去代码量大了一些。不过核心就是下面这句话：把所有要切换的内容放在一个大的div里面，然后用对应的div放对应的要切换的页面，每个div设置一个id。我这里先展示了2个div，分别是map和goal。
然后再把a标签中的href设置为#加上div的id名即可
<div class="show_state"><div id="map"></div><script>var chart_a89deb8db1fb42ce8c00f23e9a3bb018 = echarts.init(document.getElementById('map'), 'white', {renderer: 'canvas'});var option_a89deb8db1fb42ce8c00f23e9a3bb018 = {"animation": true,"animationThreshold": 2000,"animationDuration": 1000,"animationEasing": "cubicOut","animationDelay": 0,"animationDurationUpdate": 300,"animationEasingUpdate": "cubicOut","animationDelayUpdate": 0,"aria": {"enabled": false},"color": ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],"series": [{"type": "map3D","map": "china","coordinateSystem": "geo3D","label": {"show": false,"margin": 8,"formatter": function(data){return data.name + ' ' + data.value[2];}},"data": [],"showLegendSymbol": true,"emphasis": {}}],"legend": [{"data": [""],"selected": {},"show": false,"padding": 5,"itemGap": 10,"itemWidth": 25,"itemHeight": 14,"backgroundColor": "transparent","borderColor": "#ccc","borderWidth": 1,"borderRadius": 0,"pageButtonItemGap": 5,"pageButtonPosition": "end","pageFormatter": "{current}/{total}","pageIconColor": "#2f4554","pageIconInactiveColor": "#aaa","pageIconSize": 15,"animationDurationUpdate": 800,"selector": false,"selectorPosition": "auto","selectorItemGap": 7,"selectorButtonGap": 10}],"tooltip": {"show": true,"trigger": "item","triggerOn": "mousemove|click","axisPointer": {"type": "line"},"showContent": true,"alwaysShowContent": false,"showDelay": 0,"hideDelay": 100,"enterable": false,"confine": false,"appendToBody": false,"transitionDuration": 0.4,"textStyle": {"fontSize": 14},"borderWidth": 0,"padding": 5,"order": "seriesAsc"},"geo3D": {"map": "\u5fb7\u56fd","boxWidth": 100,"boxHeight": 100,"boxDepth": 80,"regionHeight": 3,"groundPlane": {"show": false,"color": "#aaa"},"instancing": false,"itemStyle": {"color": "rgb(5,101,123)","borderColor": "rgb(62,215,213)","borderWidth": 0.8,"opacity": 1},"label": {"show": false,"formatter": function(data){return data.name + + data.value[2];}},"emphasis": {"label": {"show": false,"color": "#fff","margin": 8,"fontSize": 10,"backgroundColor": "rgba(0,23,11,0)"}},"light": {"main": {"color": "#fff","intensity": 1.2,"shadow": false,"shadowQuality": "high","alpha": 40,"beta": 10},"ambient": {"color": "#fff","intensity": 0.3},"ambientCubemap": {"diffuseIntensity": 0.5,"specularIntensity": 0.5}},"temporalSuperSampling": {"enable": "auto"},"zlevel": -10,"left": "auto","top": "auto","right": "auto","bottom": "auto","width": "auto","height": "auto"},"title": [{"show": true,"target": "blank","subtarget": "blank","padding": 5,"itemGap": 10,"textAlign": "auto","textVerticalAlign": "auto","triggerEvent": false}]
};chart_a89deb8db1fb42ce8c00f23e9a3bb018.setOption(option_a89deb8db1fb42ce8c00f23e9a3bb018);</script><div id="goal"></div><script>var chart_eaa4cf6c1af94509803071b8f3657f5b = echarts.init(document.getElementById('goal'), 'white', {renderer: 'canvas'});var option_eaa4cf6c1af94509803071b8f3657f5b = {"animation": true,"animationThreshold": 2000,"animationDuration": 1000,"animationEasing": "cubicOut","animationDelay": 0,"animationDurationUpdate": 300,"animationEasingUpdate": "cubicOut","animationDelayUpdate": 0,"aria": {"enabled": false},"color": ["blue","green","yellow"],"series": [{"type": "pie","name": "\u8fdb\u7403\u6765\u6e90\u5360\u6bd4","colorBy": "data","legendHoverLink": true,"selectedMode": false,"selectedOffset": 10,"clockwise": true,"startAngle": 90,"minAngle": 0,"minShowLabelAngle": 0,"avoidLabelOverlap": true,"stillShowZeroSum": true,"percentPrecision": 2,"showEmptyCircle": true,"emptyCircleStyle": {"color": "lightgray","borderColor": "#000","borderWidth": 0,"borderType": "solid","borderDashOffset": 0,"borderCap": "butt","borderJoin": "bevel","borderMiterLimit": 10,"opacity": 1},"data": [{"name": "\u5927\u7981\u533a\u5185\u8fdb\u7403","value": 2},{"name": "\u5c0f\u7981\u533a\u5185\u7981\u533a","value": 12},{"name": "\u7981\u533a\u5916\u8fdb\u7403","value": 1}],"radius": ["0%","75%"],"center": ["50%","50%"],"label": {"show": true,"margin": 8,"formatter": "{b}: {c}"},"labelLine": {"show": true,"showAbove": false,"length": 15,"length2": 15,"smooth": false,"minTurnAngle": 90,"maxSurfaceAngle": 90},"tooltip": {"show": true,"trigger": "item","triggerOn": "mousemove|click","axisPointer": {"type": "line"},"showContent": true,"alwaysShowContent": false,"showDelay": 0,"hideDelay": 100,"enterable": false,"confine": false,"appendToBody": false,"transitionDuration": 0.4,"formatter": "{a} <br/>{b}: {c} ({d}%)","textStyle": {"fontSize": 14},"borderWidth": 0,"padding": 5,"order": "seriesAsc"},"rippleEffect": {"show": true,"brushType": "stroke","scale": 2.5,"period": 4}}],"legend": [{"data": ["\u5927\u7981\u533a\u5185\u8fdb\u7403","\u5c0f\u7981\u533a\u5185\u7981\u533a","\u7981\u533a\u5916\u8fdb\u7403"],"selected": {},"show": true,"padding": 5,"itemGap": 10,"itemWidth": 25,"itemHeight": 14,"backgroundColor": "transparent","borderColor": "#ccc","borderWidth": 1,"borderRadius": 0,"pageButtonItemGap": 5,"pageButtonPosition": "end","pageFormatter": "{current}/{total}","pageIconColor": "#2f4554","pageIconInactiveColor": "#aaa","pageIconSize": 15,"animationDurationUpdate": 800,"selector": false,"selectorPosition": "auto","selectorItemGap": 7,"selectorButtonGap": 10}],"tooltip": {"show": true,"trigger": "item","triggerOn": "mousemove|click","axisPointer": {"type": "line"},"showContent": true,"alwaysShowContent": false,"showDelay": 0,"hideDelay": 100,"enterable": false,"confine": false,"appendToBody": false,"transitionDuration": 0.4,"textStyle": {"fontSize": 14},"borderWidth": 0,"padding": 5,"order": "seriesAsc"},"title": [{"show": true,"text": "\u5fb7\u56fd\u8fdb\u7403\u5206\u6790","target": "blank","subtarget": "blank","padding": 5,"itemGap": 10,"textAlign": "auto","textVerticalAlign": "auto","triggerEvent": false}]
};chart_eaa4cf6c1af94509803071b8f3657f5b.setOption(option_eaa4cf6c1af94509803071b8f3657f5b);</script></div>css代码如下。其中最重要的是overflow:hidden这句话，可以隐藏其他没有被切换的代码
/*展示国家地图和数据分析的图表*/
.show_state {position: relative;width: 100%;height: 74%;overflow: hidden; /*很重要，用于隐藏其他要展示的内容*/
}/*展示国家地图*/
#map {position: relative;top: -5%;width: 100%;height: 100%;
}#goal {position: relative;top: 15%;left: 5%;width: 100%;height: 100%;
}
