Combined use of openlayers and ECHARTS3

Openlayers is a dedicated web GIS client development provided by the JavaScript Class library for the implementation of the standard format of the map data access, Echarts is Baidu's Open source JS Chart Library, the following simple explanation of how the map in Openlayers Paste ' echarts ' on the chart. Sample Download Address: http://download.csdn.net/detail/u010430471/9772205 Start

First, add two div to the HTML interface, a load map, a load table:

<div id= "Map" ></div>
<div id= "chart" ></div>

Define Style:

#map {
  height:70%;
  width:90%;
}
#chart {
  height:200px;
  width:200px;
}

Load map I will not say, to start with openlayers will learn how to load the map. Prepare a chart

And then you're ready to display the data, and our data is simple.

var data = [{name: ' First Class ', Value:20},{name: ' Class II ', Value:23},{name: ' Category III ', Value:45},{name: ' Class Fourth ', Value:34},{name: ' Class fifth ', VALUE:14}];

Next, specify the configuration items and data for the chart, where we configure the Echarts pie chart, the specific configuration item code:

var option = {tooltip: {trigger: ' item ', formatter: ' {B}: {C} ({d}%)}, toolbox:{Show:t Rue, feature: {mark: {show:true}, Magictype: {show:true, type : [' pie ', ' funnel ']},}}, Calculable:true, series: [{type: ' Pie ', radius:
            ' 60% ', startangle: ' ', Label: {normal: {show:false},
                  Emphasis: {show:false, textstyle:{color: ' #000000 ',
          FontWeight: ' Bold ', Fontsize:16}}, Lableline: {
        Normal: {show:false}, emphasis: {Show:false}
}, Data:data}]};
var chart = echarts.init (document.getElementById (' Chart ')); chart.setoption (option);

Configuration items in the specific parameters you can refer to my blog Echarts Force Guide Map of the detailed comments, there is no more explanation, everyone according to their needs to adjust the chart display it. combined

In fact, the above two steps believe that a lot of people have been very skilled, the key is how to combine the two, this is the focus of this blog post.

Here we overlay the chart as a overlay in openlayers, which is a more traditional way, actually similar to the HTML element display picture.

var pt = [103.980167,30.770697];
var pie = new ol. Overlay ({
    position:pt,
    positioning: ' Center-center ',
    element:document.getElementById (' Chart ')
} );
Map.addoverlay (PIE);

Where position is the coordinates of the superimposed chart,positioning is the corresponding way of the coordinates to the chart, the ' Center-center ' in the code corresponds to the coordinates with the icon in the center point, Other ways to respond are ' bottom-left ', ' bottom-center ', ' bottom-right ', ' center-left ', ' center-center ', ' center-right ', ' top-left ', ' Top-center ', ' top-right '. element is the corresponding HTML element.

In this way we will combine openlayers with echarts, no picture without truth:
end (not in the example)

To mention one more, we add echarts to the openlayers and then need to delete, how to delete it.

Openlayers has provided us with good parameters, and through Getoverlays () we can get all the overlays code on the map as follows

Map.getoverlays (). Clear ();