Echarts 双柱状图与折线图合并

1. 使用 echarts 版本: "echarts": "^4.3.0"

2. 安装方式: cnpm install echarts --save 或者 cnpm install echarts -S

3. 在 main.js 入口文件中全局引入:

    import* Vue *from* 'vue'
    import* Echarts *from* 'echarts' *// 引入Echarts*
    Vue.prototype.$echarts = Echarts
   

4. echarts 配置文件( 文件名 echartsMould.js )

   1. 我这边的处理方式是将 echarts 的配置内容抽取为单独的 JS 文件，这样我维护起来会非常的方便舒服。
   
   2. 另外这样的处理方式也会减少 .vue 文件的大小，代码看起来也会非常方便整洁。 
   
   3. 这样的处理方式也方便组件化的实现。
   

import echarts from 'echarts'
/**
 * 1. 流量趋势--carFlow.vue
 */
var option_carFlow = {
  tooltip: {  //提示框设置
    trigger: 'axis',
    axisPointer: {    //设置横线的样式
      type: 'cross',
      crossStyle: {
        color: 'red'
      }
    },
    textStyle: {      //设置提示框的对齐方式
      align: 'left'
    }
  },
  grid: {   //设置内容区域距离周边的距离
    left: '3%',
    right: '0',
    top: '10px',
    bottom: '0px',
    containLabel: true
  },
  toolbox: {
    show: false
  },
  legend: {
    show: false
  },
  xAxis: [
    {
      type: 'category',
      data: ['2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24'],
      axisPointer: {
        type: 'shadow'
      },
      axisTick: {           //刻度
        show: false //不显示刻度线
      },
      axisLine: {
        lineStyle: {
          color: '#1E2240'  //轴线的颜色
        }
      },
      axisLabel: {          //轴线字体样式设置
        textStyle: {
          fontFamily: 'ArialMT',
          fontSize: '12',
          color: '#86A5C3',
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      min: 0,
      max: 0,
      interval: 0,
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          fontFamily: 'ArialMT',
          fontSize: '12',
          color: '#86A5C3',
        }
      },
      splitLine: {          //去除背景网格线
        show: false
      },
      axisTick: {   //刻度
        show: false         //不显示刻度线
      },
      axisLine: {
        lineStyle: {
          color: '#1E2240'  //轴线的颜色
        }
      }
    },
    {
      type: 'value',
      min: 0,
      max: 0,
      interval: 0,
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          fontFamily: 'ArialMT',
          fontSize: '12',
          color: '#86A5C3',
        }
      },
      splitLine: {      //去除背景网格线
        show: false
      },
      axisTick: {       //刻度
        show: false     //不显示刻度线
      },
      axisLine: {
        lineStyle: {
          color: '#1E2240'  //轴线的颜色
        }
      }
    }
  ],
  series: [
    { //柱状(左边数据)
      name: '卡口进',
      type: 'bar',
      data: [0.2,0.2,0.3,0.23,0.12,0.8,0.5,0.9,0.23,0.12,0.8,0.8],
      itemStyle: {    //柱状图的背景色
        normal: {
          color: '#0060D1'
        }
      },
      barWidth: 6
    },
    { //柱状(左边数据)
      name: '卡口出',
      type: 'bar',
      data: [0.112,0.312,0.123,0.213,0.112,0.312,0.123,0.213,0.123,0.213,0.112,0.213],
      itemStyle: {    //柱状图的背景色
        normal: {
          color: '#00D2FF'
        }
      },
      barWidth: 6
    },
    { //折线(右边数据)
      name: '总量',
      type: 'line',
      yAxisIndex: 1,
      data: [0.112,0.312,0.3,0.6,0.8,0.2,0.7,0.5,0.3,0.6,0.8,0.6],
      itemStyle: {    //折线颜色
        normal: {
          color: '#2A47F8'
        }
      }
    }
  ]
}

5. .vue 文件，当前 echarts 图表组件所在文件

6. echarts 图表图片展示

双柱状图&折线图.gif

如果对你有所帮助，大家喜欢可以点个关注；如有问题还望不吝赐教，本人会及时更改。(如要转载，请注明出处)。