Echarts在线免费图表

 
            option = {
   backgroundColor:'#031a40',
   color: ["#63caff", "#49beff", "rgb(2,47,87)", "rgb(2,47,87)"],
  grid: {
    top: '15%',
    left: '3%',
    right: '3%',
    bottom: '5%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    },
    textStyle: {
      fontSize: 18,
    },
    backgroundColor: "rgba(255,255,255,1)",
    extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
    formatter: (params) => {
        return `${params[0].name} : <br> ${params[0].value} 天 <br> ${params[3].value} % `
      }
  }, 
  xAxis: {
    type: 'category',
    data:["业务受理", "方案答复", "设计审查", "中间检查", "验收接电"],
    splitLine: {
        show: false,
    },
    axisLabel: {
      color: "#A1BADF",
      fontSize: 20,
      interval: 'auto', // x轴间距
      // rotate:40
    },
    axisTick: {
        show: false
    },
    axisLine: {
      lineStyle: {
          color: 'rgba(152, 212, 255, .1)',
      }
    },
  },
  yAxis: [{
    type: 'value',
    name: "天",
    nameGap: '30',
    min: 0,
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      fontSize: 24,
      color: "#A1BADF",
    },
    axisLine: {
        show: true,
        lineStyle: {
            color: 'rgba(152, 212, 255, .1)',
        }
    },
    splitLine: {
        lineStyle: {
            color: 'rgba(152, 212, 255, .1)',
        }
    },
    nameTextStyle: {
      color: "#A1BADF",
      fontWeight: 400,
      fontSize: 24,
    },
  },{
    type: 'value',
    name: "%",
    nameGap: '30',
    nameTextStyle: {
      color: "#A1BADF",
      fontWeight: 400,
      fontSize: 24,
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      fontSize: 24,
      color: "#A1BADF",
    },
    axisLine: {
        show: true,
        lineStyle: {
            color: 'rgba(152, 212, 255, .1)',
        }
    },
    splitLine: {
        lineStyle: {
            color: 'rgba(152, 212, 255, .1)',
        }
    },
  }],
  series: [{
    data: [200, 85, 12, 275, 305],
    type: "bar", // 柱图
    barMaxWidth: "auto",
    barWidth: 40,
    itemStyle: {
      color: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        type: "linear",
        global: false,
        colorStops: [{
          offset: 0,
          color: "#2A76FF"
        }, {
          offset: 0.5,
          color: "#00A8FF"
        }, {
          offset: 1,
          color: "#00D8FF"
        }]
      }
    }
  },{
    data: [1, 1, 1, 1, 1],
    type: "pictorialBar", // 底部
    barMaxWidth: "20",
    symbolOffset: [0, "50%"],
    symbolSize: [40, 15]
  },{
    data: [200, 85, 12, 275, 305],
    type: "pictorialBar",  // 顶部
    barMaxWidth: "20",
    symbolPosition: "end",
    symbolOffset: [0, "-50%"],
    symbolSize: [40, 12],
    zlevel: 2
  },{
    name: '',
    type: 'line',
    showAllSymbol: true,
    lineStyle: {
      color: "#00D8FF"
    },
    showSymbol: true,
    symbol: 'circle',
    symbolSize: 20,
    itemStyle: {
      normal: {
        color: "#121E43",
        borderColor:'#00D8FF',
        borderWidth:3
      }
      
    },
    data: ["30", "50", "40", "70",  "40"],
    yAxisIndex: 1,
  }]
};