echarts相关属性设置（2）--折线图和柱状图的结合使用

type：bar和line的组合

option = {

{ 
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // type: 'shadow'
    },
    // label: {
    //   normal: {
    //     formatter: '{a} <br/>{b}: {c} ({d}%)',
    //   },
    //
    // },
    formatter: tooltipFormatter(['22']), //封装的函数。是移入鼠标时显示的框子
    position(pos: any, params: any, dom: any, rect: any, size: any) { 
      // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
      return {
        top: 10,
        [['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]]: 10,
      };
    },
  },

  grid: {
    left: '3%',
    right: 0,
    bottom: '10%',
    top: '20%',
    containLabel: true,
  },
  color: ['#f5b644'], // 修改折线图的图例颜色要写在这里(其他写在lenged中)还要写在lengend中
  legend: {
    data: ['名称1', '名称2'],
    textStyle: {
      fontSize: 8, // 设置文字大小
      color: ['#5abff', '#50aeff', '#f5b644'],
    },

    itemWidth: 7, // 设置标志的小图标
    itemHeight: 7,
    top: -5,
    align: 'left', // 图例图标的方向，这里设置为左
    itemGap: -12, // 每项图例的距离
    right: -10, // 图例的位置
  },
  dataZoom: [
    {
      type: 'inside',
      start: 80,
      end: 100,
      filterMode: 'empty',
    },
  ],
  calculable: true,
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      splitNum: 3,
      axisLabel: {
        textStyle: {
          color: '#e9ecee',
        },
        fontSize: 8,
        margin: 2,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#9999ae',
        },
      },
      // nameLocation:'center',
      data: this.timeAry1,
    },
  ],
  yAxis: [ //这里设置了2个Y轴（1个对象1个Y轴），分别给2个柱状图和2个折线图使用，这样的目的能够解决当数值太小和数值太大之间的差距显示效果。
    {
      type: 'value',
      // min: 0,
      // max: 300,
      show: true,
      splitNumber: 4, // 控制刻度标签的数量
      axisTick: {
        show: false, // y轴的小刻度线
      },
      axisLabel: {
        show: false,
        formatter: '{value} %', //y轴显示刻度值时显示%
        textStyle: {
          // color: '#e9ecee',
        },
        fontSize: 8,
        margin: 5,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#9999ae',
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dotted',
          // color: ['#aaa', 'red'],    //设置网格线的颜色，可单独设置
          color: '#4c4a74',
        },
      },
    },
    {
      type: 'value',
      show: true,
      // min: 0,
      max: 1,
      splitNumber: 4, // 控制刻度标签的数量
      axisTick: {
        show: false, // y轴的小刻度线
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#9999ae',
        },
      },
      axisLabel: {
        show: false,
        textStyle: {
          // color: '#e9ecee',
        },
        fontSize: 8,
        margin: 5,
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dotted',
          // color: ['#aaa', 'red'],    //设置网格线的颜色，可单独设置
          color: '#4c4a74',
        },
      },
    },
  ],
  series: [
    {
      name: '名称1',
      type: 'bar',
      barGap: 0, //柱状图之间的距离。只能在最后一个柱状图上写生效
      barWidth: 10, //柱状图的宽度
      itemStyle: { //柱状图样式设置。itemStyle即自身样式，我的理解
        normal: {
          color: new LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 1, color: '#0252ff' },
              { offset: 0, color: '#00ccff' },
            ],
          ),
          barBorderRadius: 3, //柱状图的radius
        },
      },
      data: data,
    },
    {
      name: '名称2',
      type: 'line',
      symbol: 'none',
      lineStyle: {
        // type: 'dotted',
        color: '#a96319',
      },
      yAxisIndex: 1, //使用这个Y轴的索引来判断是关联哪个y轴了，x轴理同，将y换成x即可（xAxisIndex），适用于多轴
      smooth: true, // 折线的顺滑度
      data: data,
    },


  ],
}

}