vue使用Echars柱状和折线混用

1.准备容器

<div class="merchant_right" id="myChart" ref="myChart" ></div>

2.echars柱状和折线混合使用

methods: {
  drawLines(){
    // 容器
    var chartDom = document.getElementById('myChart');
    // 初始化实例对象
    var myChart = echarts.init(chartDom);
    // 配置项和数据
    var option;
    option = {
      // 设置图表折线的颜色 后面为数组
      color:"#F8B551",
      // 设置图表标题
      // title:{
      //   text:"图表名"
      // }
      // 图表的提示框组件
      tooltip: {
        // 触发方式
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      // 工具箱组件 可以另存为图片等功能
      // toolbox: {
      //   feature: {
      //     dataView: { show: true, readOnly: false },
      //     magicType: { show: true, type: ['line', 'bar'] },
      //     restore: { show: true },
      //     saveAsImage: { show: true }
      //   }
      // },
      tooltip:{
        trigger:'axis',
        axisPointer:{
          type:'shadow'
        }
      },
      // 图例组件 图表上边的标注 若series里有name值，可以不写不影响
      legend: {
        data: ['在招投资金额', '落实投资金额'],
        // 图例组件字体颜色
        textStyle:{
          color:'#fff'
        },
        // right:'10%' 距离右边的的距离
        top:'5%'
      },
      // 网格配置 可以控制折线图 柱状图 图表大小
      grid:{
        left:'3%',
        right:'4%',
        bottom:'3%',
        // 显示左侧刻度
        containLabel:true,
        show:true,
        borderColor:'rgba(101, 124, 168, 1)'
      },
      // X轴的相关配置
      xAxis: [
        {
          type: 'category',
          // 是否让折线和坐标轴留空隙
          // boundaryGap:true,
          boundaryGap: ['20%', '20%'],
          // 控制文字样式 比如颜色 大小
          axisLabel:{
            color:'#fff',
            fontSize:'12px'
          },
          // X轴样式不显示
          axisLine:{
            show:false
          },
          // 去除刻度
          axisTick:{
            show:false
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          // axisPointer: {
          //   type: 'shadow'
          // },
          splitLine:{
            // X轴分割线颜色
            lineStyle:{
              color:'#1793C7'
            }
          }
        }
      ],
      // Y轴的相关配置
      yAxis: [
        {
          type: 'value',
          boundaryGap: ['20%', '20%'],
          // name: 'Precipitation',
          min: 0,
          max: 50000,
          interval: 10000,
          axisTick:{
            show:false
          },
          axisLabel: {
            // formatter: '{value}',
            color:'#fff',
            fontSize:'12px'
          },
          axisLine:{
            show:false
          },
          // 
          splitLine:{
            // Y轴分割线颜色
            lineStyle:{
              color:'#1793C7'
            }
          }
        }
      ],
      // 系列图表配置 决定显示哪种类型图表
      series: [
        {
          // 
          name: '在招投资金额',
          //类型 bar 柱状图 line 折线图
          type: 'bar',
          // 柱形宽度
          barWidth:'35%',
          stack:'1',
          // 
          data: [
            20000, 40009, 37000, 23002, 25006, 47607, 10356, 16022, 32006, 20030, 36400, 30030
          ],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(0, 204, 255, 0.35)' },
              { offset: 0.5, color: 'rgba(0, 204, 255, 0.5)' },
              { offset: 1, color: 'rgba(0, 204, 255, 1)' }
            ]),
            borderColor: "#00CCFF",
            opacity:0.35
          }
        },
        {
          name: '落实投资金额',
          type: 'line',
          data: [
            20060, 35090, 20900, 26040, 28070, 47070, 17056, 18202, 30487, 18008, 30260, 20003
          ],
          itemStyle:{
            color:''
          }
        }
      ]
    };
    // 把配置项给实例对象
    option && myChart.setOption(option);
  }
 }