echarts柱状图 实例代码

echarts yekong

wanjunshijiecom 2021-09-01 at 15.49.49@2x

drawLine2 () {
      window.addEventListener('resize', this.drawLine2)
      let myChart = this.$echarts.init(this.$refs.echarts2)
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '10%',
          top: '16%',
          containLabel: true
        },
        legend: {
          data: ['设备利用率'],
          right: 5,
          top: 0,
          textStyle: {
            color: '#D2D5DD',
            fontSize: '12px',
          },
          itemWidth: 12,
          itemHeight: 10,
          // itemGap: 35
        },
        xAxis: {
          type: 'category',
          data: ['龙门吊', '塔吊1', '塔吊2', '塔吊3', '塔吊4', '履带吊1', '履带吊2', '履带吊3', '产线', '合计'],
          axisLine: {
            lineStyle: {
              color: 'rgba(48, 142, 255, 1)'
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              color: '#9DA2B6'
            }
          },
        },

        yAxis: {
          type: 'value',
          max: '100',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(56, 136, 255, 1)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(48, 142, 255, 0.2)'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#D2D5DD',
              fontSize: '12px',
            },
            formatter: '{value}%',
          }
        },
        'dataZoom': [{
          'show': true,
          'height': 12,
          'xAxisIndex': [
            0
          ],
          bottom: '8%',
          'start': 10,
          'end': 90,
          handleStyle: {
            color: '#d3dee5',
          },
          textStyle: {
            color: '#fff'
          },
          borderColor: '#90979c'
        }, {
          'type': 'inside',
          'show': true,
          'height': 15,
          'start': 1,
          'end': 35
        }],
        series: [{
          name: '设备利用率',
          type: 'bar',
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: 'rgba(255, 255, 255, 1)',
              fontSize: '10'
            },

            formatter: function (params) {
              console.log(params.data + ',' + typeof (params))
              console.log(JSON.stringify(params))
              return params.data + '%'
            },
          },
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(56, 136, 255, 1)'
              }, {
                offset: 1,
                color: 'rgba(56, 136, 255, 0.3)'
              }]),
            }
          },
          data: [98, 98, 98, 98, 98, 95, 95, 95, 65, 97]
        }]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢