echars柱状图API（从入门到入土）

从今开始努力学前端

已于 2024-01-23 11:22:04 修改

阅读量470

点赞数 9

分类专栏： echars 文章标签： echarts

于 2024-01-22 17:52:53 首次发布

本文链接：https://blog.csdn.net/qq_53959190/article/details/135750372

版权

echars 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引入流程请浏览这里
下面的配置项仅修改第三步option配置项。

1.柱状图类型

直角坐标系上的柱状图

视图：在这里插入图片描述
配置项：

option = {
  tooltip: {},
  legend: {},
  xAxis: {
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4]
  }]
}

极坐标系上的柱状图

视图：在这里插入图片描述
配置项：

option = {
  angleAxis: {
    max: 30
  },
  radiusAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    z: 10
  },
  polar: {},
  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    coordinateSystem: "polar"
  }],
  legend: {}
}

多系列柱状图

视图：在这里插入图片描述
配置项：

option = {
  legend: {
    data: ["Food", "Cloth", "Book"]
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [{
    name: "Food",
    type: "bar",
    data: [320, 302, 301, 334, 390, 330, 320]
  }, {
    name: "Cloth",
    type: "bar",
    data: [150, 212, 201, 154, 190, 330, 410]
  }, {
    name: "Book",
    type: "bar",
    data: [820, 832, 901, 934, 1290, 1330, 1320]
  }]
}

2.柱状图API

2.1基础配置

 option = {
    title: {
      text: 'ECharts 入门示例'
    },

    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',//柱状图名称
        type: 'bar',//类型：bar代表柱状图
        data: [5, 20, 36, 10, 10, 20],//柱状图数据
        colorBy: 'data',//设置柱状图颜色serise代表按系列分配颜色，data代表按数据项分配颜色
        legendHoverLink: true,//hovers时高亮
        realtimeSort: true,//是否实时排序
        showBackground: true,//是否显示背景
      },
    ]

在这里插入图片描述

2.2背景配置
backgroundStyle

   series: [{
        name: '销量',//柱状图名称
        type: 'bar',//类型：bar代表柱状图
        data: [5, 20, 36, 10, 10, 20],//柱状图数据
        colorBy: 'data',//设置柱状图颜色serise代表按系列分配颜色，data代表按数据项分配颜色
        legendHoverLink: true,//hovers时高亮
        realtimeSort: true,//是否实时排序
        showBackground: true,//是否显示背景
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',//背景颜色
          borderColor: '#000',//边框颜色
          borderWidth: 1,//边框宽度
          borderType: 'dashed',//描边类型solid实线,dashed虚线,dotted斑点线
          borderRadius: '5',//圆角边框 5 四个角都是5px，[5,5,0,0]左上、右上、右下、左下
          shadowBlur: '10',//阴影模糊程度
          shadowColor: 'red',//阴影颜色
          shadowOffsetX: 5,//阴影水平方向偏移距离
          shadowOffsetY: 5,//阴影垂直方向偏移距离
          opacity: 0.5//阴影透明度
        }
      }]

在这里插入图片描述
2.3文本配置
label

  // 文本标签
        label: {
          show: true,//是否显示标签
          position: 'top',//标签位置
          distance: 10,//距离柱状图的距离
          rotate: 0,//旋转角度
          formatter: '{b}: {c}',//标签格式化 {a}：系列名。{b}：数据名。{c}：数据值。{@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。{ @[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。
          offset: 0,//是否对文字进行偏移
          color: 'red',//标签颜色
          fontSize: 14,//字体大小
          fontWeight: 'bold',//字体粗细
          fontFamily: 'sans-serif',//字体
          fontStyle: 'italic',//字体样式 normal正常 italic斜体 oblique倾斜
          align: 'center',//文字水平对齐方式 left左 center中 right右
          verticalAlign: 'top',//文字垂直对齐方式 top上 middle中 boddom下
          lineHeight: 32,//行高 number
          backgroundColor: 'white',//背景颜色 可设置图片{image:'./xxx.png',width:32,height:32}
          borderColor: 'red',//边框颜色
          borderWidth: 1,//边框宽度
          borderType: 'dashed',//边框类型
          borderDashOffsets: 100,//边框虚线偏移量
          borderRadius: 2,//文字块圆角
          padding: [1, 2, 3, 4],//内边距
          shadowColor: 'transparent', //阴影颜色。可以设置为颜色代码或者'transparent'（透明）。
          shadowBlur: 0,//阴影模糊度。值越大，阴影越模糊。
          shadowOffsetX: 0,//阴影水平偏移。正数向右偏移，负数向左偏移。
          shadowOffsetY: 0,//阴影垂直偏移。正数向上偏移，负数向下偏移。
          width: 64,//矩形元素的宽度
          height: 32,//矩形元素的高度。
          textBorderColor: 'red',//文本边框颜色。
          textBorderWidth: 1,//文本边框宽度。
          textBorderType: 'solid',//文本边框类型。可以是'solid'（实线）、'dashed'（虚线）或'dotted'（点划线）。
          textBorderDashOffset: 0,//虚线或点划线类型的文本边框的偏移量。
          textShadowColor: 'transparent',//文本阴影颜色。
          textShadowBlur: 0,//文本阴影模糊度。
          textShadowOffsetX: 0,//文本阴影水平偏移。
          textShadowOffsetY: 0,//文本阴影垂直偏移。
          overflow: 'none',//元素内容超出容器边界时的行为。可以是'none'（不允许超出）或'hidden'（允许超出）。
        }

在这里插入图片描述
2.4视觉引导线配置
labelLine（柱状图无视觉引导线，饼图可设置）

lineLine: {
          show: true,//布尔值，用于控制线段是否显示。如果为true，则显示线段；如果为false，则不显示线段。默认为true。
          lineStyle: {
            color: "yellow",//字符串，表示线段的颜色。可以填写一个RGBA颜色的字符串，如#000（黑色）或rgba(0, 0, 0, 0.5)（半透明的黑色)
            width: 20, //数字，表示线段的宽度。
            type: 'solid',//字符串，表示线段的类型。可选值有'solid'（实线）、'dashed'（虚线）和'dotted'（点划线）。默认为'solid'。
            dashOffset: 0,//数字，表示虚线或点划线的偏移量。
            cap: 'butt',//字符串，表示线段的端点类型。可选值有'butt'（矩形端点）、'round'（圆形端点）和'square'（方形端点）。默认为'butt'。
            join: 'bevel',//字符串，表示线段之间的连接类型。可选值有'bevel'（斜角连接）和'miter'（矩形连接）。默认为'bevel'。
            miterLimit: 10,//数字，表示矩形连接的斜角限制。
            shadowBlur: {//对象，用于控制线段的阴影效果。其中包含了以下属性：
              shadowColor: 'rgba(0, 0, 0, 0.5)',//字符串，表示阴影的颜色。可以填写一个RGBA颜色的字符串。
              shadowBlur: 10//数字，表示阴影的模糊程度。
            },
            shadowColor: 'red',//字符串，表示阴影的颜色。
            shadowOffsetX: 0,//数字，表示阴影的水平偏移。
            shadowOffsetY: 0,//数字，表示阴影的垂直偏移。
            opacity: 1,//数字，表示线段的透明度。
          },
        }

2.5柱条配置
itemStyle

         itemStyle: {
          color: "rgba(215, 58, 58, 1)",//柱条颜色，auto从全局调色盘获取
          borderColor: "rgba(34, 203, 65, 1)",//描边颜色
          borderWidth: 5,//描边宽度
          borderType: "dashed",//描边类型solid、dashed、dotted
          borderRadius: [1, 1, 10, 10],//描边圆角半径
          shadowBlur: 2,//阴影模糊大小
          shadowColor: "rgba(34, 77, 207, 1)",//阴影颜色
          shadowOffsetX: 2,//阴影水平偏移
          shadowOffsetY: 3,//阴影垂直偏移
          opacity: 0.8//图形透明度
        }