Echarts在线免费图表

 
            let barData = {
   name: '用水',
   data: [10, 11, 13, 9, 10, 12, 11,10],
   name: '用电',
   data2: [315, 275, 160, 130, 200, 260, 300,290],
   xAxis: ['9/2', '9/3', '9/4', '9/5', '9/6', '9/7','9/8'],
}
let option = {
   //你的代码
   backgroundColor: "#081A52",
   title: {
      text: '千吨/万千瓦时',
      textStyle: {
         fontSize: 12,
         fontWeight: 'normal',
         color: '#8fd5f3', //标题颜色
      },
      top: 50,
      left: '4%',
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         // 坐标轴指示器，坐标轴触发有效
         type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
   },
   legend: {
      show: true,
      top: 50,
      right: 50,
      itemGap: 20,
      textStyle: {
         color: '#fff',
      },
   },
   grid: {
      top: '18%',
      left: '5%',
      right: '5%',
      bottom: '15%',
      containLabel: true,
   },
   xAxis: [
      {
         type: 'category',
         // data: ['5000米负重跑', '单杠卷身上', '4楼攀爬绳索', '双杠臂屈伸', '搬运重物折返跑', '400米物资疏散', '100米负重', '10楼负重',
         // '60米肩梯'],
         data: barData.xAxis,
         axisTick: {
            alignWithLabel: true,
         },
         axisLine: {
            lineStyle: {
               color: '#394458',
            },
         },
         axisLabel: {
            interval: 0,
            margin: 10,
            color: '#05D5FF',
            textStyle: {
               fontSize: 14,
               color: '#fff'
            },
            // rotate: '45',
         },
      },
   ],
   yAxis: [
      {
         type: 'value',
         axisLabel: {
            padding: [3, 0, 0, 0],
            formatter: '{value}',
            color: 'rgba(95, 187, 235, 1)',
            textStyle: {
               fontSize: 14,
               color: '#fff'
            },
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            lineStyle: {
               color: '#394458',
            },
         },
         splitLine: {
            lineStyle: {
               color: '#394458',
            },
         },
      },
   ],
   series: [
      {
         name: '用水',
         type: 'bar',
         barWidth: '12',
         // data: [10, 6, 5, 4, 5, 25, 12, 20, 2, 0, 5, 1],
         data: barData.data,
         itemStyle: {
            normal: {
               color: 'rgba(255, 204, 0,.3)',
               borderColor: '#ffcc00',
            },
         },
      },
      {
         name: '用电',
         type: 'bar',
         barWidth: '12',
         // data: [8, 4, 4, 5, 8, 8, 8, 6, 5, 3, 14, 3],
         data: barData.data2,
         itemStyle: {
            normal: {
               color: 'rgba(0, 255, 255, 0.3)',
               borderColor: '#00ffff',
            },
         },
      },
      // {
      //     name: '合格',
      //     type: 'bar',
      //     barWidth: '12',
      //     data: [28, 27, 21, 38, 31, 11, 24, 18, 36, 41, 25, 40],
      //     itemStyle: {
      //         normal: {
      //             color: 'rgba(117, 146, 224, 0.3)',
      //             borderColor: '#7592E0',
      //         },
      //     },
      // },
      //  {
      //     name: '不合格',
      //     type: 'bar',
      //     barWidth: '12',
      //     data: [0, 7, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      //     itemStyle: {
      //         normal: {
      //             color: 'rgba(26, 152, 246, 0.3)',
      //             borderColor: '#1A98F6',
      //         },
      //     },
      // },
   ],
};