echarts 二维柱状图

echarts 二维柱状图_第1张图片

var xData = ["04-08", "04-09", "04-10", "04-11", "04-12", "04-13", "04-14"]
var line = ["375", "500", "900", "800", "610", "1001", "350"];
var line_bg = ["1500", "1500", "1500", "1500", "1500", "1500", "1500"]
var paperDataURI =
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAAyCAYAAACgRRKpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAB6FJREFUeNrsnE9y2zYYxUmRkig7spVdpx3Hdqb7ZNeFO2PdoD1Cj9DeoEdKbmDPeNFNW7lu0y7tRZvsYqfjWhL/qPgggoIggABIQKQkwsOhE5sQCfzw3uNHJu5sNnOaZq29RttolwfAbxgwChO9nad//4C2C7S9Sfe3uzQobqNghdoJBdIw3R8qHnvNANcA1sBUGCaV9pYC7rYBbLvbgAFpaBgmWbujlO1NA9h2wQTbcdHOoih2ZujLa7WcFtoMtUsKuFEDWL3bkAHq2GTnT+OJkyTzsXRd1/G8FoYN9vBnQ+pGZ7f7BrDqYSLbq6IdxXGM96BKIlBgDP97mgj7aLXcDLa8fgqoGwFu1ABmvzwwLAuTTJmw/SFIfG/ZBmEMIwRiHCVOnCTSPkk/BDoD7YHJbvcNYOVgYmtNWo1cs0xJ8pQJDgXIfM9bscE4TrDyAWwETuEEpP0QSzWU365T0CpXtzoDdsJY3bmpjqfT0AlRKMfWhQBhFYkGLAwjpE6JIxsnAAz6YW0QjksQaBGGTq0fw/mt0kJvXQA7cezWmpYaqBJ73XmKREABQMAKARjZsOXZqU4/FvLbWgu9VQA24NzRGYEJJm6C1GmuJJ4w39C5Sj6x/H6IKiWxPHflwQv9wPEV5TeibgS4200DzGitSdX6VCZWR0nonAR98dQNgxInpey0BvnNeKHXJGDGYYLiJQwiqIjuHZ+uKsWpEsUYOHVAeOdm0k4rzm9vKYUbrRswY7UmcVYa48mR5SN2YgkoMlXCoHEmQ6cfAojni1VkAUmsrEplVddCfitU6FUFzDpMvDw1nkzFA5dz91dkYvP61MlJREV8waQWUSWRnVac35QeY/EAe83c0RmDCSzMRV+w2nlZhp1UyFNyJVpMaJ6VmlQ3HUBE9rdSpIUbhhJ2WnF+ExZ63U+f/v2h02mfeb7/JZp0a8rEK1ouVqeXu6LwhEZqA0eCuCyD6ExGngVmKpICJ5tUEbjFsmC+nRZRSsSC0UKv++7Pv676/f7ZQb/v7O/vm3p0wQ3sUEIoM/hsDpFNqKqV6t1R5ltgnJ6Xyt0kOT+RZelCQmcuVs1VrhGOC7qd0kIyV2N87j+7v938cUFXyQ8O+nh7hmBrt9vGVUz1mZ3nicsC7ISqTICqldLqFilaoEjddOxP5UamiJ3CubV9n+sKbH7rdHzu74rnE/UzW9QCASpmvC5XekOWiTdoQRA4z58PEGx7+PvSNRE0aHABbV+eiYjlTJ0oW5m+761M4txePWmox5ODVDTCdbIwF2Dysw4zqTzFxOc/TbjlC/p6ZbYM109/Bk+NuP3l2Cn+nDDhQtNKFwTdF3xm7sJLMmWSLmj4nel0+swdXd9coQ86k8EB3gw2enBwgKx0z8pdo4pqECv1Jbfe2lYqAJinmKoWmAexdilEougiOy1qe/P+UrubyfMlfPbT05MzHo/xHsHldLvde/fi8vKjM3MGQa/n9NDmuvIMBhOMrdRSbiOqAWqjEupVrVQFDFWAdS1fVpzVKal00WKHxaAyhi1XXpJYtrpZar/y8tXj4+MSUMuC1AGe7jBgURgOspPvBvMt6CrBto7cphrAdepjcXpnagpgnUCu+mA9FljRXq9bqmiKlSmZ5zhieUplJkqhYE+ajywYqRWOUSlYWQZzf/n1+qc4jr4KEYFAYRSF2YrrBkEGnGoznduKK5FefUwZ4Ja8rKJbBIV+QZVEi4LuC97776HFb8vqZEARmACkAPPRzVvMl+j3/fH8oCA9oWQOWhg603DqPNx/xAMKPwcb9f18hYITef/+g7XcRkJ9R6JEvFDPUwxsXchuiOXkATxf7TEuAMvKKnSIXla31bwF/eYpEhvIpUFc0+pIg3mnoaKszjk8PMQw+b7ev9VeKVOIPjicTtBkRXiAADQATvUh9Lpym+n6mJaVpiUBmZXy8lbRIJ7d0WlanQgogIlYXRGYqCLrBdkAsB/RN987Gu9kgY3CyUGA1Mlq68ptNupjOnd9vaCj/OhF/fVtJ81Mi2ymX+yOMqCgHwCIQAX7ElX7DKj9vWDpIXj2LPLm93ffoh3Z1vmPTa3nNtU7NNW3NvLKKnAMhPDSCyRVpUVRdVYYKAImXBsTwo0DtTKmvBOvEjbb9TZdK8X5TOEOkpQr3DSwF7E6+u6ubAOHgQVQEiZtoJQA48A2TGE7XidstnObqpUG3bZW3tSxOs7jlapbKaC0AWNgg1d4vqsCtnXkNtFbG2XqTjqPVypqdwxQtyY7L/xGa9Ww2c5txPZgeDptX/mY7E2CWbEgvulAGQOsTrDZzm1Cq8t/k2AngbICWJ1gs5Xbij5e2TWgrAPGwHaSggbAvariAovktjKPV3YdqLUCVjfYeLmt6JsEDVA1A6xusEFue/HiuM5Wt5FA1QKwusD28uXLBqhtB0wAG2znOwLYVgFVa8AY2AYUbN9sEWBbDdTGALYO2NYE2E4BtZGA2YLNEmA7DdTGA2YSttPT04nrut0GqAYwVdiGjsZrRkdHR3ftdlv3aQP9/zA0QO0KYBzgpO+0KQL2wCjUqMGmAUwJNgFgDVANYGZgQ4DdI8AGDVANYFba3/98+PqLzz+7ajCw1/4XYABXWBExzrUA+gAAAABJRU5ErkJggg==';

var paperBlue = 'data:image/png;base64,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'

var option = {
  title: {
    text: '最近五分钟的异常数据',
    textStyle: {
      fontSize: 24,
      color: "#666",
      fontWeight: '600'
    },
    top: 0,
    left: "center",
  },
  tooltip: {
    formatter: function (data) {
      let aaa = data.name + ":" + data.value + "万次"
      return aaa
    }
  },
  grid: {
    left: "4%",
    right: '1%',
    top: '11%',
    bottom: "15%"
  },
  xAxis: {
    data: xData,
    type: 'category'
  },
  yAxis: {
    name: '万次',
    type: 'value'
  },
  series: [
    {//柱底圆片
      name: "",
      type: "pictorialBar",
      hoverAnimation: false,
      symbol: 'image://' + paperDataURI,
      symbolRepeat: true,
      symbolSize: [130, 30],
      symbolOffset: [0, 0],
      symbolMargin: '-46%',
      data: line_bg
    },
    //柱顶圆片
    {
      name: "",
      type: "pictorialBar",
      hoverAnimation: true,
      symbol: 'image://' + paperBlue,
      symbolRepeat: true,
      symbolSize: [130, 30],
      symbolOffset: [0, 0],
      symbolMargin: '-46%',
      animationDelay: function (dataIndex, params) {
        return params.index * 30;
      },
      label: {
        show: true,
        position: 'top'
      },
      data: line
    }
  ]
}

你可能感兴趣的:(前端,前端)