Echarts在线免费图表

 
            let obj = {
   xData: ["大源湖", "小源湖", "黄梅县", "宿松县", "宿松县", "太湖县", "太湖县", "望江县", "怀宁县"],
   yLabel:"污水排放量（万立方米）",
   yData1: [1600, 1500, 1700, 1650, 1560, 1750, 1540, 1450, 1700],
   yData2: [1800, 1800, 1800, 1800, 1800, 1800, 1800, 1800, 1800],
   yName: "单位(个)"
}

// //折线下方区域颜色
// 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.3)',
   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: [obj.yLabel],
   }],
   xAxis: [
      {
         type: 'category',
         data: obj.xData,
         axisLine: {
            lineStyle: {
               color: 'rgba(102, 102, 102, 1)',
            },
         },
         axisLabel: {
            fontSize: 12,
            // color: 'black',
            color: 'rgba(164, 232, 232, 1)',
            fontFamily: 'PingFangSC-Regula',
            fontWeight: 400,
            padding: [3, 0, 0, 0]
         },

         axisTick: {
            show: false,
         },
      },
      {
         type: 'category',
         data: obj.xData,
         show: false,
      },],
   yAxis: [{
      type: 'value',
      // name: 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: false,
         lineStyle: {
            color: 'rgba(5, 80, 93, 1)',
         }
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
         lineStyle: {
            color: 'rgba(5, 80, 93, 1)',
            type: "dashed",
         },
      },
      // min: 0,
      // max: 1,
      // minInterval: 2,
      alignTicks: true,
      axisLabel: {
         textStyle: {
            color: 'rgba(164, 232, 232, 1)',
            padding: 0,
            fontSize: 14,
            fontWeight: 400,
            fontFamily: 'DINCond-Regular',
         },
      },
      splitArea: {
         show: false,
      },
   }],
   series: [

      // {
      //    // 分隔
      //    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: yData1,
      //    z: 0,
      //    zlevel: 1,
      // },
      {
         type: 'bar',
         barWidth: 36,
         xAxisIndex: 1,
         itemStyle: {
            color: 'rgba(17, 40, 42, 0.6000)'
         },
         name: '水质类别',
         data: obj.yData2,
         z: 0,
      },
      {
         type: 'bar',
         barWidth: 14,
         itemStyle: {
            normal: {
               color: {
                  type: 'linear',
                  x: 0, x2: 0, y: 0, y2: 1,
                  colorStops: [
                     { offset: 0, color: 'rgba(40, 165, 213, 1)' },
                     { offset: 1, color: 'rgba(27, 41, 37, 0)' }
                  ]
               },
            },
            emphasis: {
               color: {
                  type: 'linear',
                  x: 0, x2: 0, y: 0, y2: 1,
                  colorStops: [
                     { offset: 0, color: 'rgba(211, 230, 42, 1)' },
                     { offset: 1, color: 'rgba(22, 36, 33, 0)' }
                  ]
               },
            }
         },
         emphasis: {
            label: {
               show: true,
               color: 'rgba(211, 230, 42, 1)',
               distance: 115,
               fontFamily: 'DINEngschrift',
               fontSize: 16,
               verticalAlign: 'top',
               position: [-12, -20],
            },
         },
         name: obj.yLabel,
         data: obj.yData1,
         z: 1,
      },
   ],
}