折线图和柱形图结合

如图：

1.echarts 下载

npm install echarts --save

2.main.js引入 echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.页面代码：

<template>
   <div>
       <p id="chart" style="width: 600px;height: 300px;background: #f9f9f9;"></p>
   </div>
</template>

<script>
   export default {
       data () {
           return {

           }
       },
       mounted() {
           this.$nextTick(() => {

              let option = {
                  tooltip: {
                       trigger: 'axis',
                       axisPointer: {
                           type: 'shadow',
                           label: {
                               show: true
                           },
                           shadowStyle:{
                               color: {
                                   type: 'linear',
                                   x: 0,
                                   y: 0,
                                   x2: 0,
                                   y2: 1,
                                   colorStops: [
                                       {
                                           offset: 0, color:  'rgba(43,255,234,0.1)'
                                       },
                                       {
                                           offset: 1, color: 'rgba(2,207,206,0.2)'
                                       }
                                   ],
                                   global: false // 缺省为 false
                               }
                           }
                       },
                   },
                  grid: {
                      top:'5%',
                      left: '0%',
                      right: '6%',
                      bottom: '2%',
                      containLabel: true
                  },
                   xAxis: {
                       type: 'category',
                       data: ['12-01','12-02','12-03','12-04','12-05','12-06','12-07','12-08','12-09','12-10',],
                       axisPointer: {
                           type: 'shadow'
                       },
                       //x轴
                       axisLine: {
                           "show":false,
                           lineStyle:{
                               color:'#666'
                           }
                       },
                       //刻度线
                       axisTick:{
                           "show":false
                       },

                   },
                   yAxis: [
                       {
                           type: 'value',
                           // name: '环保指数',
                           // min: 0,
                           max: 250,
                           //y轴刻度线（-）
                           axisTick:{       //y轴刻度线
                               "show":false
                           },
                           //y轴
                           axisLine: {
                               "show":false
                           },
                           //y轴网格线
                           splitLine: {
                               // show:false,
                               lineStyle:{
                                   color:['#EEE']
                               }
                           },
                           axisLabel:{
                               inside : true,//数值朝内
                               textStyle: {
                                   color: '#CCCCCC'
                               }
                           },
                       },
                       {
                           type: 'value',
                           // name: '限产比例',
                           // min: 0,
                           max: 25,
                           interval: 5,
                           axisLabel: {
                               formatter: '{value} %',
                               inside : true,//数值朝内
                               textStyle: {
                                   color: '#CCCCCC'
                               }
                           },
                           //y轴刻度线（-）
                           axisTick:{       //y轴刻度线
                               "show":false
                           },
                           //y轴
                           axisLine: {
                               "show":false
                           },
                           //y轴网格线
                           splitLine: {
                               // show:false,
                               lineStyle:{
                                   color:['#EEE']
                               }
                           },
                       }
                   ],
                   series: [
                       {
                           name:'环保指数',
                           type:'bar',
                           data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                           //颜色渐变
                           itemStyle: {
                               normal: {
                                   color: new  this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                       offset: 0,
                                       color: 'rgba(23,146,134,1)'
                                   }, {
                                       offset: 1,
                                       color: 'rgba(0,114,113,1)'
                                   }]),
                               }
                           }
                       },
                       {
                           name:'限产比例',
                           type:'line',
                           yAxisIndex: 1,
                           data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
                           itemStyle: {
                               normal: {
                                   color: "#2FFAE6",
                                   lineStyle:{
                                       width: 4,
                                       color:{
                                           type: 'linear',
                                           x: 0,
                                           y: 0,
                                           x2: 1,
                                           y2: 0,
                                           colorStops: [{
                                               offset: 0, color: '#02C1BF' // 0% 处的颜色
                                           }, {
                                               offset: 1, color: '#2FFAE6' // 100% 处的颜色
                                           }],
                                           global: false // 缺省为 false
                                       }
                                   },
                               }
                           },
                       }
                   ]
               };
               let OptionChart = this.$echarts.init(document.getElementById('chart'));
               OptionChart.setOption(option);

           })
       },
   }
</script>
<style scoped>

</style>

直接复制代码可自行修改。