Echarts在线免费图表

 
            option = {
   backgroundColor:'#031a40',  //背景底色
   legend: { //图例
      x: "center",  //居中
      itemGap: 30, //图例之间距离
      itemWidth: 20, //图例大小
      itemHeight: 20,
      textStyle: {  //图例字体样式
         fontSize: 30,
         color: "#ffffff",
      },
      data:['同期','本期',"同比"],
   },
   color:['#25E3A9','#07BDF1'],
   grid: {  //图表距离
      top: "30%",
      left: "10%",
      right: "10%",
      bottom: "5%",
      containLabel: true,
   },
   tooltip: { //鼠标划过展示内容
      trigger: "axis",
      axisPointer: {
         // 坐标轴指示器，坐标轴触发有效
         type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      textStyle: {
         fontSize: 30,
      },
      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} : ${params[0].value}`;
      },
   },
   xAxis: {
      type: "category",
      boundaryGap: true, //坐标轴两边留白
      data: ["2023-07", "2023-08", "2023-09", "2023-10", "2023-11", "2023-12"],
      splitLine: {
         show: false,
      },
      axisLabel: {
         color: "#ffffff",
         fontSize: 16,
         interval: "auto", // x轴间距
         //rotate:50  //倾斜
      },
      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: 16,
        color: "#ffffff",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(152, 212, 255, .1)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(152, 212, 255, .1)",
        },
      },
      nameTextStyle: {
        color: "#ffffff",
        fontWeight: 400,
        fontSize: 16,
      },
    },{
      type: "value",
      name: "%",
      nameGap: "30",
      nameTextStyle: {
        color: "#ffffff",
        fontWeight: 400,
        fontSize: 16,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        fontSize: 16,
        color: "#ffffff",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(152, 212, 255, .1)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(152, 212, 255, .1)",
        },
      },
   }],
  series: [{
      type: "bar",
      name: "同期",
      barWidth: 15,
      itemStyle: {
        borderRadius: [0, 0, 0, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#27E6AB",
          },
          {
            offset: 1,
            color: "#082350",
          },
        ]),
      },
      markPoint: { //mark点
         data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
         ]
      },
      
      markLine: { //mark线  平均值average
         data: [{ type: 'average', name: 'Avg' }]
      },
     data: ["80", "110", "90", "120", "80", "100"],
    },
    {
      type: "bar",
      name: "本期",
      barWidth: 15,
      showBackground: true, //显示柱图背景色
      backgroundStyle: {
        color: "rgba(12, 72, 167, 0.3)"
      },
      itemStyle: {
        borderRadius: [0, 0, 0, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#09CDFF",
          },
          {
            offset: 1,
            color: "#082350",
          },
        ]),
      },
      data: ["80", "110", "90", "120", "80", "100"],
   },{
      type: "bar",
      name: "同比",
      barWidth: 15,
      label:{
         show:true,
         position:'top',
         textStyle:{
            fontSize:10,
            color:'#fff'
         }
      },
      itemStyle: {
        borderRadius: [20, 20, 20, 20], //柱子的圆角边框
        color: '#FF9800'
      },
     data: ["80", "110", "90", "120", "80", "100"],
   },{
      name: "不合格",
      type: "bar",
      stack: "user", //堆叠柱状图属性
      barWidth: 20,
      data: [20, 18, 19, 34],
  },{
      name: "合格",
      type: "bar",
      stack: "user",
      barWidth: 20,
      data: [22, 82, 11, 24],
  }],
};