Echarts-折线图跟柱形图混合显示

html

<div id="main" style="width: 100%;height:300px;"></div>

配置

option： {
      tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            return params[0].seriesName + ': ' + params[0].data + '
' + params[1].seriesName + ': ' + params[1].data + '%'
          }
        },
        legend: {
          data:['投保门店数','门店参与率']
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            interval: 50,
            axisLabel: {
              formatter: '{value} '
            }
          }, {
            type: 'value',
            name: '门店参与率',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name:'投保门店数',
            type:'bar',
            /*设置柱状图颜色*/
            itemStyle: {
              normal: {
                color: function(params) {
                    // build a color map as your need.
                    var colorList = [
                      '#fe4f4f','#fead33','#feca2b','#fef728','#c5ee4a',
                        '#87ee4a','#46eda9','#47e4ed','#4bbbee','#7646d8',
                        '#924ae2','#C6E579','#F4E001','#F0805A','#26C0C0'
                    ];
                    return colorList[params.dataIndex]
                },
                /*信息显示方式*/
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}'
                }
              }
            },
            data:[50, 75, 100, 150, 200, 250, 150, 30, 95, 160, 50, 45]
          },
          {
            name:'门店参与率',
            yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
            type:'line',
            itemStyle : {  /*设置折线颜色*/
              normal : {
                // color:'#c4cddc'
              }
            },
            data:[10, 75, 80, 20, 20, 25, 15, 10, 95, 16, 50, 45]
          }
        ]
}

methods

	drawChart() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = this.option;
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option)
    },
    handleResize () {
       this.myChart && this.myChart.resize();
   }

mounted

mounted () {
      this.drawChart();
      this.$nextTick(() => {
          window.addEventListener('resize', () => {
              this.handleResize()
          })
      })
  },

销毁

beforeDestroy () {
    if (this.myChart) {
        this.myChart.dispose();
        this.myChart = null;
    }
    window.removeEventListener('resize', this.handleResize)
}

效果图

参考资料
ECharts图表之柱状折线混合图
Echarts-柱形图与折线图混合显示
Echarts图表之formatter用法
ECharts中的 formatter中的a,b,c,d等参数的意义
Echarts中饼图的使用（附：formatter中{d}百分比位数修改）