Echarts在线免费图表

 
            var comeDataSource = [200, 120, 141, 135, 190, 150, 120, 170, 189, 190, 160, 170, 180, 200, 150, 160, 170, 150, 145, 143, 156, 145, 156, 160]
var leaveDataSource = [-200, -120, -141, -135, -190, -150, -120, -170, -189, -190, -160, -170, -180, -200, -150, -160, -170, -150, -145, -143, -156, -145, -156, -160]
option = {
   backgroundColor: '#000',
   // color: colors, //下面这种直接配置演示也行
   color: ['#00b0ff', '#029768', '#29CEFF', '#F9993A'], //依次选择颜色，默认为第一个颜色，多根柱子多个颜色
   tooltip: {
      trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
      axisPointer: {     // 坐标轴指示器，坐标轴触发有效
         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' | 'cross' , shadow表示阴影，cross为十字准星
      },
      formatter: function (params) {
         //params[0].marker,marker参数为提示语前面的小圆点
         return params[0].name +
            "<br>" + params[0].marker + "进港" + params[0].value +
            "<br>" + params[0].marker + "出港" + -params[0].value;
      }
   },
   legend: {
      textStyle: {
         color: '#e9f0ff',
         fontSize: 22,
         fontWeight: "bold"
      },
      itemWidth: 29,
      itemHeight: 24,
      itemGap: 89,
      data: ['进港', '出港'],
      right: "center", //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
      bottom: "40px"
   },
   grid: {
      top: '20%',
      left: '10%',
      right: '10%',
      bottom: '20%', //网格图（柱状图、折线图、气泡图等）离底部的距离，也可以用像素比如10px
      containLabel: true //grid 区域是否包含坐标轴的刻度标签。false可能溢出，默认为false
   },
   xAxis: [{

      axisTick: {
         show: false,
      },
      axisLine: {
         onZero: false,
         lineStyle: {
            color: '#30787A',
            width: 2
         },
         show: false
      },
      axisLabel: {//x轴文字的配置
         show: true,
         textStyle: {
            color: "#c3d5f8",
            fontSize: 20,
            fontWeight: 'bold'
         }
      },
      position: 'bottom',
      type: 'category',
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
   }],
   yAxis: [
      {
         name: '',
         type: 'value',
         axisTick: {
            show: true,
            inside: true,
            length: 10,
            lineStyle: {
               type: 'solid',
               with: 5,
               color: '#c3d5f8'
            }
         },
         splitLine: {
            show: false,
         },
         axisLine: {
            lineStyle: {
               width: 2,
               color: '#c3d5f8',
            },
            show: true
         },

         axisLabel: { //让x轴左边的数显示为正数
            textStyle: {
               color: "#c3d5f8",
               fontWeight: 'bold',
               fontSize: 22,
            },
            margin: 10,
            formatter: function (v) {
               return v > 0 ? v : -v;
            }
         },
         max: 400,
         min: -400
      },

   ],
   series: [
      {
         name: '进港',
         type: 'bar',
         stack: '总量',
         label: {
            show: false,
         },
         barWidth: 23,
         data: comeDataSource,
         yAxisIndex: 0,
         showBackground: true,
         backgroundStyle: {
            color: 'rgba(6,7,7,1)',
            // color:'rgba(2,59,84,.1)',
            borderColor: 'rgba(2,59,84,0.5)',
            // borderColor:'blue',
            borderType: 'dashed',
            borderWidth: 5
         }
      },
      {
         name: '出港',
         type: 'bar',
         stack: '总量',
         barWidth: 23,
         label: {
            show: false, //控制柱状图是否显示数值
         },
         yAxisIndex: 0,
         showBackground: true,
         backgroundStyle: {
            // color:'rgba(2,45,32,.1)', 
            color: 'rgba(6,7,7,1)',
            // color:'transparent',
            borderColor: 'rgba(2,45,32,0.5)',
            // borderColor:'blue',
            borderType: 'dashed',
            borderWidth: 5
         },
         data: leaveDataSource
      },

   ]
};