Echarts在线免费图表

 
            let obj = {
   xData: ["Ⅰ类", "Ⅱ类", "Ⅲ类", "Ⅴ类", "Ⅳ类", "劣Ⅴ类"],
   yData1: [3, 2, 1, 1, 2, 3],
   yData2: [3, 3, 3, 3, 1, 1],
   yName: "单位(个)"
}
let yName2 = ""
// //折线下方区域颜色
// let lineColor = {
//   areaStyle: [
//     {
//       offset: 0, color: 'rgba(44, 213, 120, 0.5)' // 0% 处的颜色
//     }, {
//       offset: 1, color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
//     }
//   ]
// }
let option = {
   // color: ['#0C65F6', '#00FFA6', '#F4DF58'],
   backgroundColor: 'rgba(0,0,0,0.5)',
   grid: {
      // left: '54',
      left: '6%',
      right: '4%',
      bottom: '10%',
      top: '10%',
      containLabel: true,
   },
   legend: [{
      show: true,
      icon: 'rect',
      right: '4%',
      top: '3%',
      itemWidth: 14,
      itemHeight: 10,
      textStyle: {
         fontSize: 14,
         color: 'rgba(180, 241, 241, 1)',
         fontfamily: 'Source Han Sans CN',
         fontweight: '400'
      },
      data: ['水质类别'],
   }],
   xAxis: [
      {
         type: 'category',
         data: obj.xData,
         axisLine: {
            lineStyle: {
               color: 'rgba(5, 80, 93, 1)',
            },
         },
         axisLabel: {
            fontSize: 14,
            // color: 'black',
            color: '#fff',
            fontFamily: 'DIN-Medium',
            padding: [3, 0, 0, 0]
         },

         axisTick: {
            show: false,
         },
      },
      {
         type: 'category',
         data: obj.xData,
         show: false,
      },],
   yAxis: [{
      type: 'value',
      name: obj.yName,
      nameTextStyle: {
         fontSize: 14,
         fontFamily: 'Source Han Sans CN',
         fontWeight: '400',
         color: 'rgba(255, 255, 255, 1)',
         padding: [0, 75, -8, 0]
      },
      nameGap: 24,
      axisLine: {
         show: true,
         lineStyle: {
            color: 'rgba(5, 80, 93, 1)',
         }
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: 'rgba(5, 80, 93, 1)',
            type:"dashed",
         },
      },
      // min: 0,
      // max: 1,
      // minInterval: 2,
      alignTicks: true,
      axisLabel: {
         fontSize: 14,
         //   formatter: function (value) {
         //     return value * 100 + '%'
         //   },
         color: 'rgba(255, 255, 255, 1)',
         // color: 'black',
         fontFamily: 'DIN-Medium',
         padding: [0, 7, 0, 0]
      },
      splitArea: {
         show: false,
      },
   }],
   series: [
      {
      type: 'bar',
      barWidth: 14,
      // showBackground: true,
      // backgroundStyle: {
      //   color: 'rgba(131, 132, 132, 0.08)',
      // },
      itemStyle: {
         color: {
            type: 'linear',
            x: 0, x2: 0, y: 0, y2: 1,
            colorStops: [
               { offset: 0, color: 'rgba(0, 252, 255, 1)' },
               { offset: 1, color: 'rgba(22, 218, 198, 0)' }
            ]
         },
      },
      name: '水质类别',
      data: obj.yData1
   },
   {
      // 分隔
      type: 'pictorialBar',
      itemStyle: {
         normal: {
            color: 'rgba(3, 72, 84, 0.5)',
         },
      },
      symbolRepeat: 'fixed',//重复
      symbolMargin: 2,//上下间隔
      symbol: 'rect',//图形类型
      symbolClip: true,//是否裁剪
      symbolSize: [14, 2],//图形的大小,可以用数组分开表示宽和高
      symbolPosition: 'center',//图形的定位位置
      symbolOffset: [0, 2],//图形相对于原本位置的偏移
      data: obj.yData1,
      z: 0,
      zlevel: 1,
   },
   {
      type: 'bar',
      barWidth: 36,
      xAxisIndex: 1,
      itemStyle: {
         color: 'rgba(220, 220, 220, 0.05)'
      },
      name: '水质类别',
      data: obj.yData2
   },
   ],
}