图例的状态随时改变，记录其改变，并且获取图例的状态echarts

var selectArr = optionlegenddata;

myCharton('legendselectchanged', function(obj) {

//alert("22");

var selected = objselected;

var name = objname;

});

overlaysetOption(option);

最近在写一个地图类的应用，用的是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不支持)

折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。在折线图中，类别数据沿水平轴均匀分布，所有值数据沿垂直轴均匀分布。

类似的还有面积图又称区域图，强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。堆积面积图和百分比堆积面积图还可以显示部分与整体的关系。

饼图为圆形，显示一个数据系列 （数据系列：在图表中绘制的相关数据点，这些数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。饼图只有一个数据系列。）中各项的大小与各项总和的比例。饼图中的数据点 （数据点：在图表中绘制的单个值，这些值由条形、柱形、折线、饼图或圆环图的扇面、圆点和其他被称为数据标记的图形表示。相同颜色的数据标记组成一个数据系列。）显示为整个饼图的百分比。

类似的还有环形图、玫瑰图

你就不要使用默认的tooltip了，可以对应写一个label记录值，然后控制它的display：block/none 可以试一下，用一个公有的静态变量存储着这个值，然后触发不显示事件时，把tooltip的值清空。最后鼠标移动到listview时，把这个静态变量赋值给这个to

legend的数据需要与 series的数据中的 name保持一一对应的关系，可以将这两处都传入国际化对应的 key，在 legendformatter和 serieslabelformatter使用回调函数的形式返回国际化处理后的显示值

来自 iView & vue-i18n & echarts遇到的问题和解决方法

以上就是关于图例的状态随时改变，记录其改变，并且获取图例的状态echarts全部的内容，包括:图例的状态随时改变，记录其改变，并且获取图例的状态echarts、echart3怎么让图表自动适应、echarts图表——折线图&饼图等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！