这个线按道理，是在option配置对象，属性xAxis、yAxis中设置，本以为是这样设置的：
结果不是。一番寻思，才发现在option配置对象，属性grid中设置的：
本以为是设置option配置对象属性backgroundColor，结果不是，还是设置grid中属性backgroundColor：
itemStyle中的属性color，对于折线图来说，是设置线上面的小圆点（标志图形类型），真正设置内容填充色，要这么设置：
不单单是在option配置对象，属性xAxis、yAxis中设置两个对象就可以，还要在series中做好呼应，设置响应的xAxisIndex、yAxisIndex，才会出来两根轴：
可能大家第一时间，以为是option配置对象，属性color配置原因，还要在series中做好呼应，设置上name：
原因是不能设置barWidth，可以改用barMaxWidth或者barCategoryGap，来代替
想要鼠标经过，变成一根直线的提示，不单单要设置axisPointer，还需要对应设置trigger为axis：
打开控制台，查看tooltip提示框，不是canvas绘制出来的，是一个div元素class="echarts-tooltip zr-element"；可能是页面中css样式设置，影响到了。
最近在写一个地图类的应用，用的是echarts的图表，然而一上来就一脸懵逼，如果父级容器的height/width属性设置为百分比的形式，那么echarts就会warning，且不能正常的生成图表。所以div容器的高度宽度必须指定为px，这设计不知道是为啥。google到的解决方案如下
添加window.onresize=myCharts.resize在setOption之后
我添加后图表的高度被压缩到了min-height，很奇怪，于是自己采用了如下解决方案，直接贴代码了。
var worldMapContainer = document.getElementById('WorldMap')
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = window.innerWidth+'px'
worldMapContainer.style.height = window.innerHeight+'px'
}
//设置容器高宽
resizeWorldMapContainer()
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(worldMapContainer)
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量'],
height: worldMapContainer.style.height,
width: worldMapContainer.style.width
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
//用于使chart自适应高度和宽度
window.onresize = function () {
//重置容器高宽
resizeWorldMapContainer()
myChart.resize()
}
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在高度和宽度上均自适应，如若遇到什么坑，之后再补充。
2017.9.26更新
如果是需要图表跟随容器自适应的话，将上述window.innerWidth和window.innerHeight替换为容器元素的container.clientWidth和container.clientHeight即可。其根本原理就是通过JavaScript来刷新图表宽高而非直接css自适应(因为ECharts不支持)
