vue中使用echarts绘制折柱混合图、环形饼状图_echarts折柱混合

最近又使用到echarts相关的内容，再做一个相应的总结。

之前的基本柱状图、折线图、饼状图文章：

vue中使用echart绘制柱状图、折现图、饼状图_芝士焗红薯的博客-CSDN博客_vue画柱状图

1.折柱混合

折柱混合其实很容易实现，只要将对应的type改成想要的图表类型就可以了。

首先引用

<div class="echart" id="szmxBar" :style="{ float: 'left', width: '90%', height: '400px'  }"></div>

js方法：

根据之前的文章可以知道，柱状图和折线图都是通过series来控制y轴数据，所以只要将series中的type属性改成对应的bar（柱状图）、line（折线图）就可以了。

如下：

 具体代码：

// 收支明细
    getSzmxEcharts () {
      const option = {
        // 标题
        title: {
          // text: '收支明细柱状图'
        },
        // 鼠标放到图上展示的数据样式，trigger: 'axis'   (有axis/item/none三个值,axis是一条竖线)
        tooltip: {},
        // 用来标志图表数据，data字段的数组需要对应每个柱条的名称，鼠标hover到最顶部的legend标志，可以标志对应的图，点击legend标志会隐藏对应的图
        legend: {
          data: ['流水增加','流水减少','余额','流水净额']
        },
        // 配置x轴数据、样式、名称
        xAxis: {
          type: 'category', // 可以不写，默认type就是category
          data: ['10月', '12月', '