echarts重新渲染和点击某柱子改变颜色事件

在项目中用到echarts中的地图：
在这里插入图片描述
但是在操作过程中往往会出现过分缩小：

或者是：

这样一不小心滑跑的情况，这样想要进行操作就很难了。
解决方法：
加个刷新的按钮，重新渲染地图:
方法一：
自带的简单地方法：clear()方法

var chart = ECharts.init(document.getElementById('map') as HTMLDivElement);
chart.clear();
chart.setOption({图表设置})

这样不报错，但会有警告：

第二种：
笨方法就是手动创建这个进行图表渲染的标签：

var parent = document.getElementById("mapDiv");
parent.innerHTML = ''; 
let divMap = "map";
let mapD = document.getElementById(divMap); 
var div = document.createElement("div"); 
div.setAttribute("id",divMap); 
div.style.height = '300px'; 
parent.appendChild(div); 
var chart = ECharts.init(document.getElementById(divMap) as HTMLDivElement); 
chart.setOption({图表设置})

注：但是这样很麻烦，如果只是渲染图表而不进行操作的话，其实直接用第一种方法就行了，但是像是地图如果需要点击事件的话，会有加载多次的情况出现（例如：我在ionic中使用，点击N次刷新的话，在对地图进行点击穿透到下个页面的操作的话，就会出现N次加载到下个页面，这时候选择第二种比较苯的方法则没有此问题！）。

在这里插入图片描述

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
var yMax = 500;
var dataShadow = [];

for (var i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
}

var curInt = null;
option = {
    title: {
        text: '特性示例：渐变色 阴影 点击缩放',
        subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
    },
    xAxis: {
        data: dataAxis,
        axisLabel: {
            inside: true,
            textStyle: {
                color: '#fff'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        z: 10
    },
    yAxis: {
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#999'
            }
        }
    },
    dataZoom: [
        {
            type: 'inside'
        }
    ],
    series: [
        { // For shadow
            type: 'bar',
            itemStyle: {
                normal: {color: 'rgba(0,0,0,0.05)'}
            },
            barGap:'-100%',
            barCategoryGap:'40%',
            data: dataShadow,
            animation: false
        },
        {
            type: 'bar',
            itemStyle: {
                normal: {
                    color:function(params){
					
					
						var key = params.dataIndex;
						console.log(key);
					console.log(curInt);
						if(key===curInt){
							return '#E062AE'
						}else{
							return '#37A2DA'
						}
					}
                }
            },
            data: data
        }
    ]
};

if (option && typeof option === "object") {
    myChart.setOption(option, false);
}

myChart.on('click', function (params) {
	myChart.clear();
	curInt = params.dataIndex;
	myChart.setOption(option,false);
});
       </script>
   </body>
</html>

echarts重新渲染和点击某柱子改变颜色事件

猜你喜欢