Echarts在线免费图表

 
            let leftName = [
   "氢气收率（按预加氢进料计算）",
   "T601气体塔底温度（T0626）",
   "预加氢原料密度（20℃）",
   "预加氢原料10%馏出温度",
   "预加氢原料C9烷烃质量分数",
   "预加氢H2/HC（v）H2_HC_V...",
   "预加氢原料50%馏出温度",
   "连续重整进料10%馏出温度",
   "E604管程出口温度（T16024）",
   "预加氢原料二甲苯质量分数"
];
let leftVal = [
   -0.6,
   -0.51,
   -0.47,
   -0.36,
   -0.34,
   -0.34,
   -0.33,
   -0.33,
   -0.32,
   -0.32
];
let rightName = [
   "1号预加氢收支馏石脑油",
   "Ｐ6018进料泵过滤器差压",
   "P601A进料泵过滤器差压",
   "T602轻石脑油出装置流量",
   "T602轻石脑油出装置流量调节",
   "T602轻石脑油出装置流量",
   "直馏石脑油自罐区来流量（F16021）",
   "循环氢排气压力（以及（F160378））",
   "F601进料加热炉炉顶温度",
   "直馏石脑油进装置流量调节"
];
let rightVal = [
   0.57,
   0.32,
   0.32,
   0.31,
   0.30,
   0.29,
   0.28,
   0.27,
   0.26,
   0.25
];
option = {
   backgroundColor: '#000',
   color: ['#00deff', '#00deff'], //依次选择颜色，默认为第一个颜色，多根柱子多个颜色
   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;
      }
   },
   grid:{
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '2%',
      containLabel: true,
   },
   yAxis: [{
      type: 'category',
      position:'left',
      data: leftName,
      axisTick: {
         show: false,
      },
      axisLine: {
         show: true
      },
      axisLabel: {//x轴文字的配置
         show: true,
         textStyle: {
            color: "#c3d5f8",
            fontSize: 20,
            fontWeight: 'bold'
         }
      },
      axisLabel: { //让x轴左边的数显示为正数
         rich: {
          name: {
            'font-family': 'SourceHanSansCN-Regular',
            fontSize: 14,
            color: '#eef9ff'
          },
          val: {
            'font-family': 'PangMenZhengDao',
            fontSize: 20,
            fontWeight: 'bold',
            color: '#00deff'
          }
        },
        formatter: (name, i) => {
         return `{name|${name}} {val| ${leftVal[i]}}`
        },
      },
   },
   {
      type: 'category',
      position:'right',
      data: rightName,
      axisTick: {
         show: false,
      },
      axisLine: {
         show: false
      },
      axisLabel: { //让x轴左边的数显示为正数
         rich: {
          name: {
            'font-family': 'SourceHanSansCN-Regular',
            fontSize: 14,
            color: '#eef9ff'
          },
          val: {
            'font-family': 'PangMenZhengDao',
            fontSize: 20,
            fontWeight: 'bold',
            color: '#00deff'
          }
        },
        formatter: (name, i) => {
            return `{name|${name}} {val| ${rightVal[i]}}`
         },
      },
   }],
   xAxis: [
      {
         name: '',
         type: 'value',
         axisTick: {
            show: false
         },
         splitLine: {
            show: false,
         },
         axisLine: {
            lineStyle: {
               width: 1,
               color: 'rgba(141,188,215, .5)',
            },
            show: true
         },
         axisLabel: { //让x轴左边的数显示为正数
            textStyle: {
               color: "#eef9ff",
               fontSize: 14,
            }
         }
      },

   ],
   series: [
      {
         name: '负相关',
         type: 'bar',
         stack: '总量',
         label: {
            show: false,
         },
         barWidth: 10,
         data: leftVal,
         yAxisIndex: 0,
         showBackground: true,
         backgroundStyle: {
            borderWidth: 12,
            color: 'rgba(119,210,255, .14)'
         },
         itemStyle: {
            color: {
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            type: "linear",
            global: false,
            colorStops: [{
               offset: 0,
               color: "transparent"
            }, {
               offset: 1,
               color: "rgb(0,222,255)"
            }]
            }
         }
      },
      {
         name: '正相关',
         type: 'bar',
         stack: '总量',
         barWidth: 10,
         label: {
            show: false, //控制柱状图是否显示数值
         },
         itemStyle: {
            color: {
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            type: "linear",
            global: false,
            colorStops: [{
               offset: 0,
               color: "rgb(0,222,255)"
            }, {
               offset: 1,
               color: "transparent"
            }]
            }
         },
         yAxisIndex: 1,
         showBackground: true,
         backgroundStyle: {
            borderWidth: 12,
            color: 'rgba(119,210,255, .14)'
         },
         data: rightVal
      },

   ]
};