echarts给柱状图顶部加两个帽子

echarts yekong 287℃

echarts给柱状图加两个帽子

    lines2() {
      let myChart = this.$echarts.init(this.$refs.myChart2)
      // 绘制图表
      myChart.setOptio
n({
        "textStyle": {
          "show": false,
          "color": "#c0c3cd",
          "fontSize": 14
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '20',
          top: '50',
          containLabel: true
        },
        "toolbox": {
          "show": false,
          "feature": {
            "saveAsImage": {
              "backgroundColor": "#031245"
            },
            "restore": {}
          },
          "iconStyle": {
            "borderColor": "#c0c3cd"
          }
        },
        "color": '#9ebe3d',
        "xAxis": {
          "nameTextStyle": {
            "color": "#c0c3cd",
            "padding": [0, 0, -10, 0],
            "fontSize": 14
          },
          "axisLabel": {
            "color": "rgba(200, 251, 251, 1)",
            "fontSize": 9,
            "interval": 0,
            show: true
          },
          "axisTick": {
            show: false,
            "lineStyle": {
              "color": "#384267",
              "width": 1
            },
          },
          "splitLine": {
            "show": false
          },

          "axisLine": {
            "lineStyle": {
              "color": "rgba(45, 85, 86, 1)",
            },
            show: true,
          },
          "data": ["值班室", "指挥所", "哨位", "弹药库", "军械库"],
          "type": "category"
        },
        "yAxis": {
          "nameTextStyle": {
            "color": "rgba(45, 85, 86, 1)",
            "padding": [0, 0, -10, 0],
            "fontSize": 14
          },
          "axisLabel": {
            show: true,
            "color": "rgba(200, 251, 251, 1)",
            "fontSize": 14
          },
          "axisLine": {
            "lineStyle": {
              "color": "rgba(45, 85, 86, 1)",
            },
            show: true,
          },
          "axisTick": {
            "lineStyle": {
              "color": "red",
              "width": 1
            },
            "show": false
          },
          "splitLine": {
            "show": false,
            "lineStyle": {
              "color": "red",
              // "type": "dashed"
            }
          },
          "name": ""
        },
        "series": [
          {
            "data": [10, 5, 5, 7, 5],
            "type": "bar",
            "barMaxWidth": "auto",
            "barWidth": 15,
            "itemStyle": {
              "color": {
                "x": 0,
                "y": 0,
                "x2": 0,
                "y2": 1,
                "type": "linear",
                "colorStops": [{
                  "offset": 0,
                  "color": "rgba(1, 65, 51, 1)"
                }, {
                  "offset": 1,
                  "color": "rgba(33, 158, 139, 1)"
                }]
              }
            },
            "label": {
              "show": false,
              "position": "top",
              "distance": 10,
              "color": "#fff"
            }
          },
          {
            name: "入侵监控",
            type: "line",
            barWidth: 15,
            smooth: true, //平滑曲线显示
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 8,
            "zlevel": 4,
            lineStyle: {
              normal: {
                color: "rgba(217, 197, 11, 1)",
              },
            },
            itemStyle: {
              color: "#fff",
              borderColor: "rgba(217, 197, 11, 1)",
              borderWidth: 1,
            },
            data: [11, 6, 6, 8, 6]
          },
          {
            "data": [10, 5, 5, 7, 5],
            "type": "pictorialBar",
            "barMaxWidth": "10",
            "symbolPosition": "end",
            "symbol": "Rectangle",
            "symbolOffset": [0, "-50%"],
            "symbolSize": [15, -6],
            "zlevel": 2,
            itemStyle: {
              normal: {
                borderWidth: 0,
                color: '#9dbb3b',
              }
            },
          },
          {
            "data": [10, 5, 5, 7, 5],
            "type": "pictorialBar",
            "barMaxWidth": "10",
            "symbolPosition": "end",
            "symbol": "Rectangle",
            "symbolOffset": [0, "-50%"],
            "symbolSize": [15, 4],
            "zlevel": 3,
            itemStyle: {
              normal: {
                borderWidth: 0,
                color: '#00e5cd',
              }
            },
          }
        ],
        "tooltip": {
          "show": false,
          formatter: '数据:{c0}'
        }
      });
    },
喜欢 (0)