//y轴数量
var lineData = data.map(function (item) {
  return item.number
});
//结案率
var lineRate = data.map(function (item) {
  if(item.number == 0 || item.finishNum == 0) return 0;
  return (((item.finishNum)/(item.number)*100).toFixed(2));
});
lineOption = {
  tooltip:{
     trigger: 'axis',
      axisPointer: {
          type: 'cross'
      }
  },
  legend: {
    data: ['案件上报数', '案件结案率'],
    textStyle: {color: '#9fceff',fontFamily:"Helvetica Neue"}
  },
  xAxis: [
    {
      type: "category",
      data: data.map(function (item) {
        return item.month
      }),
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    { //y轴左边的尺码
      id: 1,
      type: "value",
      splitLine: {
        lineStyle: {
          color: ["#dde2e5"]
        }
      },
      axisLine: {
        show: false,
        onZero: false
      },
      axisTick: {
        show: false
      }
    },
    {//y轴右边的尺码
      type: "value",
      min: 0,
      max: 100,
      interval: 10,
      splitLine: {
        lineStyle: {
          color: ["#eff4f7"]
        }
      },
      axisLabel: {
        formatter: '{value}%',
        show: true
      },
      axisLine: {
        show: false,
        onZero: false
      },
      axisTick: {
        show: false
      }
    },
    /*{
      type: 'value',
      min: 0,
      max: 100,
      interval: 10,
      axisLabel: {
        formatter: '{value}%',
        show: true
      }
    }*/
  ],
  grid: {
    top: 30,
    right: 40,
    left: 40,
    bottom: 50
  },
  series: [
    {
      name: '案件上报数',
      data: lineData,
      type: "bar",
      barWidth: 28,
      itemStyle: {
        barBorderRadius: 8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#8bdcdb" }, //柱图渐变色
          { offset: 1, color: "#0da19b" } //柱图渐变色
        ])
      }
    },
    {
      name: '案件结案率',
      type: 'line',
      yAxisIndex: 1,
      color:["#FFB164"],
      data: lineRate
    }
  ]
};
charts.setOption(lineOption);

echarts折线和柱状结合

相关文章: