echarts re-rendering and click on a column to change the color of events

Echarts use the map in the project:
Here Insert Picture Description
But during the operation often appear too narrow:

either:

the case of such accidentally roll, so want to make operations very difficult.
Solution:
add a refresh button to re-render the map:
Method One:
comes with simple methods: the Clear () method

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

This is not an error, but a warning:

The second:
stupid way is to manually create the graph rendering Tags:

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({图表设置})

Note: But this is very troublesome, if only to render the chart and not to operate it, in fact, the first method directly on the line, but if such maps need to click on the event, the situation will be loaded appear more than once (for example: I ionic used, click on the refresh N, then click on the map to penetrate to the operation of the next page, it would appear N times to load the next page, select the second time this method is relatively benzene does not have this problem !).

Here Insert Picture Description

<!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 re-rendering and click on a column to change the color of events

Guess you like