echar图形使用双Y轴（散点+折线）

option = {
    backgroundColor: 'pink',
     title: {
        text: '全国6月销售统计',
        textStyle: {
            fontSize: 12,
            fontWeight: 400,
            color:'#000'
        },
        top: '5%',
        left:'10%',
    },
    legend: {
      icon: 'circle',
      top: '13%',
      right: '5%',
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
          color: '#fff',
      },
      show:true,
      width:'auto'
    },
   grid: {
    top: '40%',
    left: '8%',
    right: '8%',
    bottom: '15%',
    },
   xAxis: [
      {
          type: 'category',
          axisLine: {
              show: true,
              color: '#DCE2E8',
              //==========设置X轴的颜色
              lineStyle:{
                color:"#89898B"
              }
          },
          axisLabel: {
              color: '#fff',
              interval:0 
          },
          splitLine: {
              show: true, //显示竖着的线
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#525256']
            }
          },
          boundaryGap: false,
          data:  ['2017年6月', 'B', 'C', 'D', 'E', 'F'],
      },
  ],
双Y轴所以这里需要两个对象
    yAxis: [
    {
        type: 'value',
        min: 0,
        max:10,
        splitLine: {
            show: false,
            lineStyle: {
                color: '#000',
            },
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
            margin: 20,
            textStyle: {
                color: '#d1e6eb',
            },
        },
        axisTick: {
            show: false,
        },
    },
     {
        type: 'value',
        min: 0,
        max:20,
        splitLine: {
            show: false,
            lineStyle: {
                color: '#000',
            },
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
            margin: 20,
            textStyle: {
                color: 'red',
            },
        },

        axisTick: {
            show: false,
        },
      
    },
    
],
    series: [
        //散点
      {
        name:111,
        type: 'scatter',
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 10,
//=========这里添加Y轴索引===========
        yAxisIndex: 0,
        lineStyle: {
            normal: {
                color: '#fff',
                shadowColor: '#fff',
            },
        },
        label: {
            show: true, //显示对应点上的值
            position: 'top',
            textStyle: {
                color: '#fff',
            },
        },
        itemStyle: {
            color: '#FF6551',
            shadowColor: '#fff',
            shadowBlur: 0,
        },
        tooltip: {
            show: false,
        },
      data: [5,7,8,10,2],

    },
    // 折线天数
    {
      name: 2222,
      type: 'line',
      showAllSymbol: true,
      symbol: 'circle',
      //==========第二个Y轴添加Y轴索引=========
      yAxisIndex: 1,
      symbolSize: 10,
      top:'20%',
      lineStyle: {
          normal: {
              color: '#0ACFE2',
          },
      },
      label: {
          show: true,
          position: 'top',
          textStyle: {
              color: '#fff',
          },
      },

      itemStyle: {
          color: '#57575D', //折现对应的圈圈颜色
          borderColor: '#04DFF3',
          borderWidth: 3,
          shadowColor: 'rgba(0, 0, 0, .3)',
          shadowBlur: 0,
      },
      tooltip: {
          show: false,
      },
      data:[1,2,3,4,5],

  },
    ],
};

效果图

可以在makeapie中测试
https://www.makeapie.com/editor.html
替换option即可

如果需要默认只显示一条数据：
可设置属性，这里type[0],type[1]是我对应的两个动态标题

 var selected_item = {
    [type[0]]:true,
    [type[1]]:false,
  };

将legend中的selected设置成

      selected : selected_item

如果是写死的标题，可直接设置属性

selected : {
        '111':true,
        '2222':false
      }

更改X轴底部坐标轴的颜色
xAxis中axisLine属性

 lineStyle:{
                color:"#89898B"
              }

散点与折线

  type: 'scatter', 散点
  type: 'line', 折线

更多属性设置可转至
echar配置项手册