我用的echarts中国地图怎么获取到当前选中的区域id或者名称

第步新建静态页面barhtml修改title并引入echarts js文件图所示：

第二步添加条状图容器插入div并给id属性宽度高度图所示：

第三步编写条状图js代码添加数据式图所示：

第四步预览该图形界面看效图图所示：

第五步编写点击条状图柱获取namevalue图所示：

第六步再预览该界面打浏览器控制台查看打印结图所示：

echarts是做数据统计。

1、 Echarts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11），Chrome，Firefox，Safari等。

2、底层依赖轻量级Canva+库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

3、ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

扩展资料

echarts的优点：

1、国人开发，文档全，便于开发和阅读文档。

2、图表丰富，可以适用各种各样的功能。

echarts的缺点:

1、移动端使用略卡，毕竟是PC端的东西，移植到移动端肯定多多少少有些问题吧，或许跟自己水平也有一定的关系。

2、echarts不失为一款比较适合我们这种码农使用的框架。

3、echarts就不贴代码了。毕竟文档很全。

参考资料：

ECharts官网-eCharts

最近在写一个地图类的应用，用的是echarts的图表，然而一上来就一脸懵逼，如果父级容器的height/width属性设置为百分比的形式，那么echarts就会warning，且不能正常的生成图表。所以div容器的高度宽度必须指定为px，这设计不知道是为啥。

google到的解决方案如下

添加windowonresize=myChartsresize在setOption之后

我添加后图表的高度被压缩到了min-height，很奇怪，于是自己采用了如下解决方案，直接贴代码了。

var worldMapContainer = documentgetElementById('WorldMap');

//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽

var resizeWorldMapContainer = function () {

worldMapContainerstylewidth = windowinnerWidth+'px';

worldMapContainerstyleheight = windowinnerHeight+'px';

};

//设置容器高宽

resizeWorldMapContainer();

// 基于准备好的dom，初始化echarts实例

var myChart = echartsinit(worldMapContainer);

// 指定图表的配置项和数据

var option = {

title: {

text: 'ECharts 入门示例'

},

tooltip: {},

legend: {

data:['销量'],

height: worldMapContainerstyleheight,

width: worldMapContainerstylewidth

},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

// 使用刚指定的配置项和数据显示图表。

myChartsetOption(option);

//用于使chart自适应高度和宽度

windowonresize = function () {

//重置容器高宽

resizeWorldMapContainer();

myChartresize();

};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

此时，worldMapContainer的高宽已经无所谓了，因为我们已经在js中设定了div容器高宽。

这个方法可以在使ECharts在高度和宽度上均自适应，如若遇到什么坑，之后再补充。

2017926更新

如果是需要图表跟随容器自适应的话，将上述windowinnerWidth和windowinnerHeight替换为容器元素的containerclientWidth和containerclientHeight即可。其根本原理就是通过JavaScript来刷新图表宽高而非直接css自适应(因为ECharts不支持)

vue项目中使用到的echarts折线图，当个别数据差异过大时，又因为echarts所在的容器高度不够高，就会使echarts 出现折线图展示不全。

如下图没修改之前：

经过协调整后进行优化：

设置一个最大的纵轴，超过最大的数据按最达的展示，tooltip按实际数值展示。

以上就是关于我用的echarts中国地图怎么获取到当前选中的区域id或者名称全部的内容，包括:我用的echarts中国地图怎么获取到当前选中的区域id或者名称、echarts是做什么的、echart3怎么让图表自动适应等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！