Echarts在线免费图表

 
            option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: '12%',
    top: '10%',
    bottom: '12%',
    right: '8%',
    containLabel: true
  },
  color: ['#FF8D1A', '#FFC300'],
  legend: {
    right: 0,
    top: 0,
    textStyle: {
      color: '#000'
    },
    icon: 'roundRect',
    itemWidth: 12,
    itemHeight: 10,
    // itemGap: 35
    data: ['学习时长（上课时间+抗遗忘时间）', '掌握词汇量']
  },
  xAxis: {
    type: 'category',
    data: ['05/01', '05/02', '05/03', '05/04', '05/05', '05/06', '05/07', '05/08'],
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#BDD8FB',
        width: 1 // 这里是为了突出显示加上的
      }
    },
    axisLabel: {
      textStyle: {
        color: '#000',
        fontSize: 12
      }
    }
  },

  yAxis: [
    {
    type: 'value',
    axisLine: {
      show: false,
      lineStyle: {
        color: '#E5E5E5'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.15)'
      }
    },
    axisLabel: {
      textStyle: {
        color: '#000'
      }
    }
  },
  {
    type: 'value',
    axisLine: {
      show: false,
      lineStyle: {
        color: '#E5E5E5'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.15)'
      }
    },
    axisLabel: {
      textStyle: {
        color: '#000'
      }
    }
  }
  ],
  dataZoom: [{
    show: true,
    height: 12,
    // xAxisIndex: [
    //   0
    // ],
    bottom: '8%',
    start: 0,
    end: 100,
    handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
    handleSize: '110%',
    handleStyle: {
      color: '#d3dee5'

    },
    textStyle: {
      color: '#fff'
    },
    borderColor: '#90979c'
  }, {
    type: 'inside',
    show: true,
    height: 15,
    start: 1,
    end: 35
  }],
  series: [
    {
      name: '学习时长（上课时间+抗遗忘时间）',
      type: 'bar',
      barWidth: 30,
      itemStyle: {
        normal: {
          color: '#FF8D1A',
          barBorderRadius: 24
        }
      },
      data: [400, 600, 700, 700, 320, 400, 400, 600, 700],
      zlevel: 10,
    },
    {
      name: '掌握词汇量',
      type: "line",
      data: [300, 200, 500, 100, 620, 400, 400, 100, 700],
      yAxisIndex: 1,
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 0.6,
          colorStops: [
            {
              offset: 0,
              color: "rgba(255, 195, 0, 0.8)", // 0% 处的颜色
            },
            {
              offset: 0.5,
              color: "rgba(255, 195, 0, 0.67)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(255, 255, 255, 0.23)", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      lineStyle: {
        color: "#FFC300",
      },
      // symbol: "none",
      symbol: "circle",
      symbolSize: 10,
      showSymbol: false,
      smooth: true,
      itemStyle: {
        color: "#FFC300",
        shadowColor: "rgba(255, 255, 255, 1)",
        shadowBlur: 10,
      },
      zlevel: 11,
    },
    {
      type: "bar",
      barWidth: 30,
      // xAxisIndex: 0,
      // yAxisIndex: 1,
      barGap: "-100%",
      data: [800, 800, 800, 800, 800, 800, 800, 800, 800], //背景阴影长度
      itemStyle: {
        normal: {
          color: "#E5E5E5",
          barBorderRadius: 24
        },
      },
      tooltip: {
        show: false,
      },
      zlevel: 9,
    }
  ]
};