Echarts在线免费图表

 
            let data = [
   { name: '当月处理数据', value: 100, group: 'simpleCount' },
   { name: '当月处理数据', value: 120, group: 'generalCount' },
   { name: '当日处理数据', value: 90, group: 'simpleCount' },
   { name: '当日处理数据', value: 75, group: 'generalCount' },
   { name: '昨日处理数据', value: 45, group: 'simpleCount' },
   { name: '昨日处理数据', value: 85, group: 'generalCount' }
]
let simpleKindData = data.filter(item => item.group === 'simpleCount')
let generaKindData = data.filter(item => item.group === 'generalCount')
option = {
   //你的代码
   backgroundColor: '#061c4c',
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      },
      backgroundColor: 'rgba(13, 41, 102, 0.8)',
      borderColor: 'transparent',
      textStyle: {
         color: '#fff',
         fontSize: 14,
         fontFamily: 'Noto Sans SC'
      },
      label: {
         show: true,
         margin: 10,
         backgroundColor: '#0b1f56',
         color: '#fff',
         fontSize: 14,
         fontFamily: 'Noto Sans SC'
      }
   },
   legend: {
      bottom: '5%',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 20,
      icon: 'circle',
      textStyle: {
         fontSize: 14,
         color: 'rgba(27, 237, 250, 1)',
         fontFamily: 'Noto Sans SC'
      }
   },
   grid: {
      top: '12%',
      right: '5%',
      left: '10%',
      bottom: '25%'
   },
   xAxis: [{
      // name: "月份",
      type: 'category',
      axisLine: {
         show: false
      },
      axisLabel: {
         margin: 10,
         color: '#e2e9ff',
         textStyle: {
            fontSize: 14
         }
      },
      axisTick: {
         'show': false // 隐藏x轴刻度
      }
   }],
   yAxis: [{
      splitNumber: 5,
      // interval: 20,
      // scale: true,
      // boundaryGap : '80%',
      axisLabel: {
         formatter: '{value}',
         textStyle: {
            color: '#e2e9ff',
            fontFamily: 'DIN'
         }
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false,
         lineStyle: {
            color: '#FFFFFF'
         }
      },
      splitLine: {
         show: false
      }
   }],
   series: [{
      name: '简易情况',
      type: 'bar',
      data: simpleKindData,
      barWidth: 42,
      itemStyle: {
         normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
               [
                  {
                     offset: 0,
                     color: '#3196FA'
                  },
                  {
                     offset: 0.98,
                     color: 'rgba(49, 150, 250, 0)' // 100% 处的颜色
                  }
               ]
            )
         }
      },
      label: {
         formatter: data => {
            // console.log(data);
         },
         show: true,
         position: 'top',
         textStyle: {
            fontFamily: 'Noto Sans SC',
            fontSize: 14,
            color: '#fff'
         }
      }
   },
   {
      name: '一般情况',
      type: 'bar',
      data: generaKindData,
      barWidth: 42,
      barGap: 0,
      itemStyle: {
         normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
               offset: 0,
               color: '#F9921B' // 0% 处的颜色
            }, {
               offset: 0.98,
               color: 'rgba(249, 146, 27, 0)' // 100% 处的颜色
            }])
         }
      },
      label: {
         formatter: data => {
         },
         show: true,
         position: 'top',
         textStyle: {
            fontFamily: 'Noto Sans SC',
            fontSize: 14,
            color: '#fff'
         }
      }
   }
   ]
};