vue中使用echarts(2)(折线图柱状图混用，双y轴问题)

echarts导入问题
如果要查看echarts的详细引入步骤，请查看文档《vue中使用echarts(1)》。此处只分享echarts初始化遇到的一些问题和配置项的使用以及双y轴0刻度对不齐的问题。
在一个页面的两个不同组件都用到echarts时会出现一个问题，第一个echarts可以正常显示，切换到另一个组件时，其中的echarts图表的宽高会变成100*100.解决办法是切换组件时初始化该组件中的echarts图表。（在使用高德地图时也会出现这种问题，解决办法一样，再次初始化地图即可。）
切换组件时调用：
drawCharts() { var myChart = this.$echarts.init(document.getElementById("tfcharts")); myChart.setOption(this.option); }
option属性配置：
1.基本配置项：
xAxis//x轴
yAxis//y轴
series//数据层
三个配置都是对象
如：xAxis:{}
在绘制几组不同类型的数据时这三个配置项也可以时数组：
xAxis:[{},{}…]表示两个或多个x轴。yAxis同理。
series:[{},{}]绘制两组数据。
比如同时绘制降水和温度两种数据
其他常用配置项
tooltip:{}//鼠标移上时显示当前条目提示信息，
tooltip: {
trigger: ‘axis’,
},//更多用法参考echarts配置项：option–>tooltip

legend://标注option–>legend
legend: {
selectedMode: false, //不可点击
data: [“温度/℃”, “雨量/mm”],
right: “20px”,
top: “20px”,
textStyle: {
color: “#fff”,
fontWeight: “lighter”
}
},
grid://偏移量option–>grid
grid: {
top: “5%”,
bottom: “5%”,
left: 0,
right: 0
},
xAxis中重要配置项：

        xAxis: {
         type: "category",//类型
         show: true,//是否显示x轴
         boundaryGap: false,//两侧留白
         axisLine: {
           lineStyle: {//轴线样式
             color: "#fff"
           }
         },
         axisTick: {
           show: false//是否显示轴线刻度
         },
         data: [2,3,4,5,6,7,8,9]//轴线刻度数值
       },

series中
series: [
{
name: “温度/℃”,//如果用到标注（legend属性），此处name和legend中data对应。
yAxisIndex: 0,//双y轴用到，此处设置了索引，才能和y轴对应，顾名思义，yAxisIndex,此处对应第一条y轴
data: [ ],
type: “line”,//折线图
showSymbol: true,
connectNulls: true, //是否连接空数据,如果返回的数据有空值的，不用这个属性中间会断掉哦
clipOverflow: false,
areaStyle: {//区域填色（渐变）
color: {
type: “linear”,
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: “rgb(105, 255, 221)” // 0% 处的颜色
},
{
offset: 1,
color: “rgba(105, 255, 221,0)” // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
smooth: true,
label: {折线图中显示数值
show: true,
color: “#FFDC99”,
position: “top”
},
itemStyle: {
normal: {
color: “#69FFDD”,
type: “solid”
}
}
},
{
name: “雨量/mm”,
yAxisIndex: 1,//对应第二条y轴
data: [ ],//数据
type: “bar”,//柱状图
smooth: true,
label: {
show: true,
color: “#fff”,
position: “top”
},
itemStyle: {
normal: {
color: {
type: “linear”,
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: “#fff” // 0% 处的颜色
},
{
offset: 1,
color: “rgb(247, 243, 243,0)” // 100% 处的颜色
}
],
global: false // 缺省为 false
},
type: “solid”
}
}
}
]
yAxis中
基本配置与xAxis一样

解决双y轴0刻度对不齐的问题看此处

本案例中要实现图中效果：

雨量信息的数值所对应的y轴和温度数值对应的y轴不一致。所以得用到双y轴。
雨量值不可能为负，但是温度可以为负，在这里我给y轴设置了最大最小值，如温度y轴最小值为负时，会出现雨量y轴起始点为0，温度y轴起始点为负的情况：

所以要想双y轴0刻度线对齐，必须根据温度最大值与最小值比例关系计算出雨量最大最小值。
在data数据外层定义一个变量，以便记录温度最大最小值比例
let scale = ’ '具体实现请看代码：

 yAxis: [
          {
            type: "value",
            show:false,
            name: "温度/℃",
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            ·············································································
            min: function(value) {//value是series数据层中温度数据data,value.min,value.max可拿到最小值和最大值
              scale = "";//先清空比例，防止上次请求的数据的比例干扰
              if (value.min < 0) {
                scale = Math.abs(value.min) / Math.abs(value.max);//此处如果value.max值为负，scale没有意义，在下面的max里有进一步的处理
                return value.min * 1.2;//这里我设置的y轴最小值（注意区分y轴最大/最小和数据最大最小）为数据最小值的1.2倍以达到更好用户体样，注意，如果此处设置了倍数，雨量y轴的数值倍数要同步
              } else {
                return 0;//如果最小值大于等于0，y轴最小值为0
              }
            },
            max: function(value) {
              if (value.max > 0) {
                return value.max * 1.2;//y轴最大值也放大1.2倍，
              } else {
                scale = 1;
                return Math.abs(value.min * 1.2);//如果最大值小于零，y轴最大值与y轴最小值绝对值相等，也就是上下各占一半。
              }
            },
            ················································································································
            axisTick: {
              show: false
            }
          },
          {
            type: "value",
            show: false,
            name: "雨量/mm",
            ·~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            min: function(value) {
              if (scale) {
                if (value.max < 20) {
                  return -scale * value.max * 1.2 * 15;//乘以15是为了折线图与柱状图更好区分开
                } else {
                  return -scale * value.max * 1.2 * 1.5;//乘以1.5是为了折线图与柱状图更好区分开
                }
              } else {
                return 0;
              }
            },
            max: function(value) {
              if (value.max < 20) {
                return value.max * 1.2 * 15;
              } else {
                return value.max * 1.2 * 1.5;
              }
            },
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            axisTick: {
              show: false
            }
          }
        ],