echart 实现bar

秃头小宝贝(柚子君)

已于 2023-09-22 14:56:35 修改

阅读量190

点赞数

文章标签： echarts

于 2023-08-21 09:57:48 首次发布

本文链接：https://blog.csdn.net/qq_43557302/article/details/132355921

版权

在这里插入图片描述


let barData={
    "categories": [
        "百货零售",
        "零售业",
        "房地产业",
        "工程和技术研究和试验发展",
        "餐饮业"
    ],
    "series": [
        {
          type: 'bar',
            "name": "件",
            "data": [
                147,
                129,
                81,
                69,
                60
            ],
             itemStyle: {
            // 颜色按照数值从浅到深
            color: function(params) {
                    var colorList = ['#011755', '#02297b', '#034874', '#0d77b1', '#0c88cd'];
                return colorList[params.dataIndex]
            }
        }
        }
    ]
}

option = {
   tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: barData.categories
  },
  series:barData.series,

};

在这里插入图片描述

   const barOptions = computed(() => ({

      tooltip: {
        trigger: 'item',
        show: false,
      },
      legend: {
        top: '5%',
        left: 'center',
        show: false,
      },
      grid: {
        top: '10%',
        bottom: '10%',
        left: '3%',
        right: '2%',
        containLabel: true, // 防止坐标轴标签溢出
      },
      dataZoom: [
        {
          type: 'slider',
          show: true,
          showDetail: false,
          startValue: 0,
          endValue: 3,
          handleSize: 8,
          height: 10,
          bottom: '0%',
          // backgroundColor: '',
          dataBackground: {
            lineStyle: {

              // color: '#0d1555',
              // width: 0.5,
              type: 'solid',

              shadowOffsetX: 0,
              shadowOffsetY: 0,
              // opacity: 1
            },
          },
          // borderColor: '#355da6',
          // fillerColor: 'rgba(220, 226, 235, 0.2)',
          textStyle: {
            fontSize: 12,
            // color: '#fff'
          },
          // handleStyle: {
          //   color: '#696C87'
          // }

        },

        {
          type: 'inside',
          start: 94,
          end: 100,
          // moveOnMouseMove: false,
          // moveOnMouseWheel: false,
          // zoomOnMouseWheel: false,
        },
      ],
      xAxis: {
        type: 'category',

        axisLabel: {
          textStyle: {
            fontSize: 14,
            color: '#303030',
          },
          width: 70,
          overflow: 'breakAll',
          interval: 0,
        },
        axisLine: {
          // show: true,
          lineStyle: {
            type: 'solid',
            color: 'rgba(255,255,255,0.38)',
          },
        },

        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            fontSize: 14,
            color: 'rgba(44, 53, 66, 0.45)',
          },
          formatter: '{value}个',

        },
        axisLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: 'rgba(255,255,255,0.38)',
          },
        },

      },
      series: [
        {
          name: 'Access From',
          type: 'bar',
          barWidth: 30,
          itemStyle: {
            color: '#4888F6',

          },
          label: {
            normal: {
              show: true,
              // formatter: (v: any) => `${v.value}家`,
              position: 'top',
              textStyle: {
                fontSize: 14,
                color: '#606060',
                fontFamily: 'PingFangSC-Regular',
              },
            },
          },
          data: [1200, 200, 1500, 80, 70, 110, 130],

        },
      ],
    }));