echart案例双刻度的坐标轴

<div class="shichang-bar" id="shichangBar"></div>

echart案例

 export default {
    name: "shangyousuozhu",
    data() {
      return {};
    },
    components: {
      slotContent,
    },
    created() {

    },
    mounted() {
      this.shichangBar()
    },
    methods: {
      //市场主体培育柱状图
      shichangBar() {
        let that = this;
        let myChart = that.$echarts.init(document.getElementById("shichangBar"));
        let option = {
          color: ['#01E4FF','#FFA66B'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              crossStyle: {
                color: '#999'
              }
            }
          },
          grid: {
            // 网格的大小
            show:false,
            width: 330,
            height: 110,
            left: 55,
            bottom: 25,
            //网格背景色，默认透明。
            backgroundColor:'transparent',
          },
          // legend: {
          //   data: ['净增', '目标完成率']
          // },
          xAxis: [
            {
              type: 'category',
              data: ['2018年', '2019年'],
              //指示器类型:'line' 直线指示器,'shadow' 阴影指示器,'none' 无指示器
              axisPointer: {
                type: 'shadow'
              },
              //坐标轴刻度标签的相关设置
              axisLabel: {
                textStyle: {
                    color: "#98ADD1",
                    fontSize: 18,
                    fontFamily: "PingFang SC",
                },
              },
              //坐标轴轴线相关设置。
              axisLine:{
                show:false,
                lineStyle:{
                  color:'#98ADD1',
                }
              },
              //坐标轴刻度相关设置
              axisTick:{
                //是否显示坐标轴刻度
                show:false
              },
              //坐标轴在 grid 区域中的分隔线(是垂直于x轴的竖线)。
              splitLine:{
                show:false,
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '净增',
              min: 0,
              max: 4000,
              interval: 2000,
              axisLabel: {
                formatter: '{value}'
              },
              //坐标轴名称的文字样式(净增的字体样式)
              nameTextStyle:{
                fontSize: 16,
                fontWeight: 400,
                fontFamily:'PingFang SC',
                color: '#98ADD1'
              },
              // 是否显示坐标轴轴线。
              axisLine:{
                show: false, //y轴线不显示
                //y轴线和y轴线上文字的颜色(4000,2000,0)
                lineStyle:{
                  color:'#98ADD1',
                }
              },
              //坐标轴刻度相关设置
              axisTick: {
                show: false,
              },
              //坐标轴在 grid 区域中的分隔线。(横线)
              //是否显示分隔线。默认数值轴显示，类目轴不显示
              splitLine: {
                show: true,
                lineStyle:{
                  //分隔线颜色
                  color:'#ABC9EC',
                }
              },
            },
            {
              type: 'value',
              name: '目标完成率(%)',
              min: 0,
              max: 200,
              interval: 100,
              axisLabel: {
                formatter: '{value}'
              },
              //坐标轴名称的文字样式(目标完成率的字体样式)
              nameTextStyle:{
                fontSize: 16,
                fontWeight: 400,
                fontFamily:'PingFang SC',
                color: '#98ADD1'
              },
              //坐标轴轴线相关设置
              axisLine:{
                //是否显示坐标轴轴线
                show:false,
                //坐标轴线线的样式
                lineStyle:{
                  color:'#98ADD1',
                }
              },
              //坐标轴刻度相关设置
              axisTick: {
                show: false,
              },
               //坐标轴在 grid 区域中的分隔线。(横线)
               //是否显示分隔线。默认数值轴显示，类目轴不显示
              splitLine: {
                show: true,
                lineStyle:{
                  //分隔线颜色
                  color:'#ABC9EC',
                }
              },
            }
          ],
          series: [
            {
              name: '净增',
              type: 'bar',
              // 柱子的宽度
              barWidth: '10',
              data: [3000, 2800]
            },
            {
              name: '目标完成率',
              type: 'line',
              barWidth: '66',
              //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
              yAxisIndex: 1,
              data: [110, 120]
            }
          ]
        };
        that.myChart = myChart;
        myChart.setOption(option);
      }
    }
  };