Echarts柱状图、条形图、环形图相关配置-使用记录

通用配置
1.设置背景图

option = {
  graphic: [
    {
      type: 'image', // 图形元素类型
      id: 'bg', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
      right: 'center', // 根据父元素进行定位 （居中）
      top: '10%',
      left: '12%',
      bottom: '0%', // 根据父元素进行定位   （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
      z: 0,  // 层叠
      bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
      style: {
        image: bgImg,
        width: elBgW,
        height: elBgH
      },
      position: [0, 0] // 设置图片位置
    }
  ],
}

2.设置纹理图

// 纹理填充
{
  image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
  repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

3.X轴配置

xAxis: [
    {
        type: 'category',  //坐标轴类型：'value' 数值轴，适用于连续数据；'category' 类目轴，适用于离散的类目数据
        boundaryGap: false,  //设置为false代表从X轴零刻度开始绘制，设置为true代表离零刻度间隔一段距离
        data: ['大客户', '人才服务部', '人才招聘部', '人才培训部', '档案服务部', '外包服务部'], //X轴类目数据，仅type为category时有效
        //X轴刻度相关设置
        axisTick: {
            show: true,  //是否显示X轴刻度，默认显示
            interval: 0,  //坐标轴刻度的显示间隔
            inside: false,  //坐标轴刻度是否朝内，默认朝外
            alignWithLabel: false,  //刻度是否位于标签中间
        },
        //X轴刻度标签相关设置（指X轴文字）
        axisLabel: {
            show: true,  //是否显示 
            color: '#ccc',  //文字颜色
            interval: 0,  //间隔显示个数
            rotate: 20,  //刻度标签旋转的角度，值>0向左倾斜，值<0则向右倾斜，旋转的角度从 -90 度到 90 度。
        },
        //x轴轴线相关设置
        axisLine: {
            show: false,  //是否显示X轴，默认显示
            symbol: ['none', 'arrow']  //轴线两边的箭头，默认不显示
        },
        //坐标轴提示框配置项，鼠标移入图形时显示
        axisPointer: {
            show: false,  //默认不显示
            type: 'shadow',  //'line'直线指示器 'shadow'阴影指示器 'none'无
        },


    }
],

4.Y轴配置

//直角坐标系 grid 中的 y 轴，如果有多条Y轴，yAxis为数组
//当有两个Y轴时默认分别位于坐标轴两端
//如果柱状和折线都有，则要通过数组设置两个对象，分别对应柱状和折线的样式
yAxis: {
    type: 'value',  //坐标轴类型：'value' 数值轴，适用于连续数据；'category' 类目轴，适用于离散的类目数据；'time' 时间轴，适用于连续的时序数据
    name: '数据',  //坐标轴名称
    min: 0,  //坐标轴刻度最小值
    max: 100,  //坐标轴刻度最大值
    interval: 20,  //强制设置坐标轴分割间隔
    minInterval: 1, //表示将刻度的最小间距设置为1，只在数值轴或时间轴中有效
    //Y轴刻度标签相关设置
    axisLabel: {
        formatter: '{value} %',  //Y轴刻度格式，支持字符串模板和回调函数两种形式
        color: '#fff',  //刻度标签文字的颜色
    },
    //Y轴在 grid 区域中的分隔线（横向）
    splitLine: {
        show: true,  //是否显示
        interval: 0,  //坐标轴分隔线的显示间隔，在类目轴中有效
        lineStyle: {
            color: "#053c89",  //分隔线颜色
            width: "2",  //分隔线宽度
            type: "solid",  //线条样式，实线、虚线
        }
    }
},

配置2个Y轴：yAxis:[{},{}]，且需要在series:[]中配置yAxisIndex

5.原生图形配置

//原生图形元素组件
graphic:
{
    z: 1000, //显示层级
    type: 'image',  //可随意是image, text, circle, sector, ring等
    id: 'logo',
    left: '32%',
    top: '42%',
    bounding: 'raw',  //决定此图形元素在定位时，对自身的包围盒计算方式
    rotation: 0,  //旋转角度
    origin: [66.5, 40.5],  //中心点
    scale: [1.0, 1.0],  //缩放
    style: {
        image: situationhouseicon,  //图片路径
        width: 129,
        height: 65,
        opacity: 1
    }
},

6.其它配置

/echarts容器背景色
backgroundColor: '#000',
//系列颜色，调色盘颜色列表，可以在全局设置，也可以分别设置在series中
color: ["#fff", "#ccc"],
//标题，可以设置多个，形式为数组
title: {
    text: "各单位落实情况",  //文本
    //文本样式设置
    textStyle: {
        color: "#333333",  //颜色
        fontSize: 20,  //字体大小
    },
    //位置
    left: "center",
    top: "0%"
},
//图例，图中的标记(symbol)，通常位于右上方，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: {
    icon: "rect",  //形状
    orient: "horizontal", //horizontal水平方向排列，vertical垂直方向排列
    itemGap: 25, //间距
    itemWidth: 15,
    itemHeight: 7,
    top: '10%',
    right: 0,
    borderRadius: 10,
    data: ['参考1', '参考2', '百分比数据', '百分比2'], //如果不设置，会通过series系列数据自动生成
    textStyle: {
        color: '#ccc',  //文字颜色
        fontSize: "20",
    },
    selectedMode: false,  //控制是否可以通过点击图例改变图形的显示状态。默认开启，false可关闭。
},
//提示框，可以全局设置，也可设置在坐标系或系列数据中
tooltip: {
    trigger: "axis",  //触发类型，'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
    axisPointer: {
        type: "shadow",  //提示类型：鼠标移入显示阴影
    }
},
//坐标系内的绘图网格，可以理解为整个图表
grid: {
    top: '20%',
    left: '0%',
    right: '0%',
    bottom: '0%',
    containLabel: true,  //grid区域是否包含坐标轴的刻度标签
},
//用于区域缩放，从而能自由关注细节的数据信息，不常用
dataZoom: [
    {
        xAxisIndex: 0,
        show: false,  //是否展示dataZoom组件
        type: "slider",
        startValue: 0,
        endValue: 3
    }
],

一、柱形图

1.设置柱形渐变色

color: {
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 0.95,
  colorStops: [
    {
      offset: 1,
      color: 'rgba(32,41,61,0.1)', // 0% 处的颜色
    },
    {
      offset: 0,
      color: '#343B52', // 100% 处的颜色
    },
  ],
  global: false, // 缺省为 false
},

2.设置柱形背景色

option = {
  series: [
    {
      type: 'custom',
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 0.95,
        colorStops: [
          {
            offset: 1,
            color: 'rgba(32,41,61,0.1)', // 0% 处的颜色
          },
          {
            offset: 0,
            color: '#343B52', // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      renderItem: function (params, api) {
        
        //获取对应类目的axisTick中心点坐标
        var start = api.coord([api.value(0)]);
        
        //通过坐标系的宽度和类目数，计算单个类目的背景
        var width=(params.coordSys.width/7)*0.6;

        return {
          type: 'rect',
          shape: {
          	// 相对左上角坐标
            x: start[0]-width/2,
            y: params.coordSys.y,
            width:width,
            height: params.coordSys.height,
          },
          style: api.style()
        };
      },
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    ...
  ]
}

3.设置顶部白色横杠

series: [
    {
      //顶部的白色横杠
      name: '退款',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolSize: [10, 2],
      symbolOffset: [-4.5, 0],
      symbolPosition: 'end',
      data: invoiceWeight,
      zlevel: 9,
      itemStyle: {
        color: '#fff',
      },
    },
    ...
  ]

4.设置某个柱形背景色

 xAxis: {
  type: 'category',
  data: ['24/1', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
markArea: {
    silent: true,
    data: [
    [
        { xAxis: 'Wed'},
        { xAxis: 'Wed'}
        ]
    ],
    itemStyle: {
        color: 'red'
    }
}

5.设置堆叠柱体，每个值都是从0开始+背景圆角、X轴图标+文字、每个柱体不同颜色、文字竖排展示
相关文章：https://blog.youkuaiyun.com/qq_40269801/article/details/13999066

设置从0开始堆叠主要代码：

series: [
  {
    name: '总重量',
    type: 'bar',
    barWidth: '20%',
    stack: '1', //多个数据，值相同时设置堆叠
    stackStrategy: 'position',
    barGap: '-100%',
    data: data1,
    emphasis: { // 添加强调状态配置
      focus: 'series', // 或者使用 'self' 仅高亮当前 series 的图形元素
      itemStyle: {
          opacity: 1 // 确保高亮时的不透明度为1，保持颜色鲜明
      }
    }
  },
  ...            
]

var colorList = {
        first: ["#40B672", "#A25ACD", "#D47C7C", "#BEC0BE", "#EABA56", "#4AC7E3", "#4F65E4"],
        second: ["#4AB979", "#996BBB", "#DA8B8A", "#BEC3C0", "#F0C36C", "#48CDE4", "#6F81E8"],
        third: ['#1A4838', '#342550', '#45333A', '#373E48', '#51472C', '#194858', '#1D2959']
      };

      const data = [160, 90, 120, 80, 26, 200, 51]
      let seriesData = []
      for (let i in data) {
        const seriesItem = {
          value: data[i],
          itemStyle: {
            normal: {
              borderRadius: [30, 30, 0, 0], // 这里设置圆角的大小
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 0.95,
                colorStops: [
                  {
                    offset: 1,
                    color: colorList.third[i], // 0% 处的颜色
                  },
                  {
                    offset: 0.3,
                    color: colorList.first[i], // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: colorList.second[i], // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              renderItem: function (params, api) {
        
                //获取对应类目的axisTick中心点坐标
                var start = api.coord([api.value(0)]);
                
                //通过坐标系的宽度和类目数，计算单个类目的背景
                var width=(params.coordSys.width/7)*0.6;

                return {
                  type: 'rect',
                  shape: {
                    // 相对左上角坐标
                    x: start[0]-width/2,
                    y: params.coordSys.y,
                    width:width,
                    height: params.coordSys.height,
                  },
                  style: api.style()
                };
              },
            }
          },
        }
        seriesData.push(seriesItem)
      }
      const option = {
        grid: {
          top: '5%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [
          {
            show: false,
            type: 'category',
            data: ['河北商贸有限公司1', '河北商贸有限公司2', '河北商贸有限公司3', '河北商贸有限公司4', '河北商贸有限公司5', '河北商贸有限公司6', '河北商贸有限公司7'],
          },
          {
            type: 'category',
            position: 'top',
            data: ['', '', '', '', '', '', ''],
            axisLabel: {
              show: true,
              interval: 0,
              formatter: (value, index) => {
                return [`{a|}`]
              },
              rich: {
                a: {
                  backgroundColor: {
                    image: require('@/assets/screen-images/logisticsTracking/num-bg.png'),
                  },
                  width: 30,
                  height: 30,
                  // verticalAlign: 'middle',
                  distance: 10
                }
              },
            },

            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: 'category',
            position: 'top',
            data: ['1', '2', '3', '4', '5', '6', '7'],
            offset: 10,
            axisLabel: {
              show: true,
              interval: 0,
              color: '#BA111D'
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#8AAFFE'
          },
        },
        series: [
          {
            data: seriesData,
            type: 'bar',
            barWidth: '40%',
            showBackground: true,
            borderRadius: 20,
            backgroundStyle: {
              borderRadius: 20,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 0.95,
                colorStops: [
                  {
                    offset: 1,
                    color: '#08121E', // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: '#172145', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            label: {
              show: true,
              position: 'insideBottom',
              color: '#FFFFFF',
              fontSize: 16,
              formatter: function (params) {
                let txtArry = params.name.split('');
                let rs = "";
                for (var i = 0; i < txtArry.length; i++) {
                  rs += txtArry[i] + "\n";
                }
                return rs;
              }
            }
          }
        ],
      }

二、条形图

1.设置条形背景色

series: [
  {
    type: 'custom',
    color: {
      type: 'linear',
      x: 0.95,
      y: 0,
      x2: 0,
      y2: 0,
      colorStops: [
        {
          offset: 1,
          color: 'rgba(32,41,61,0.1)', // 0% 处的颜色
        },
        {
          offset: 0,
          color: '#343B52', // 100% 处的颜色
        },
      ],
      global: false, // 缺省为 false
    },
    renderItem: function (params, api) {
      // 获取对应类目的axisTick中心点坐标
      var start = api.coord([0, api.value(0)]); // 这里的 api.value(0) 是 Y 轴的值
      // 通过坐标系的高度和类目数，计算单个类目的背景
      var height = (params.coordSys.height / 5) * 0.8; // 假设有 7 个类目
      return {
        type: 'rect',
        shape: {
          // 相对左上角坐标
          x: params.coordSys.x,
          y: start[1] - height / 2,
          width: params.coordSys.width,
          height: height,
        },
        style: api.style()
      };
    },
    data: [0, 1, 2, 3, 4] // 这里的 data 可以根据实际情况调整
  },
]

三、环形

1.渐变色

series: [
  {
    name: 'Access From',
    type: 'pie',
    radius: ['70%', '85%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 2,
    },
    label: {
      show: false,
      position: 'center'
    },
    emphasis: {
      label: {
        show: true,
        fontSize: 12,
      }
    },
    labelLine: {
      show: false
    },
    data: [
      { 
        value: this.proport.alarm,
        name: '报警',
        itemStyle: {
          normal: {
            color: {
                type: 'linear',
                colorStops: [
                    // !! 在此添加想要的渐变过程色 !!
                    { offset: 1, color: '#D10053' },
                    { offset: 0.2, color: '#4C062F' },
                    { offset: 0, color: 'rgba(32,8,35,0.3)' }
                ]
            },
          }
        }
      },
      { 
        value: this.proport.warn, 
        name: '预警',
        itemStyle: {
          normal: {
            color: {
                type: 'linear',
                colorStops: [
                    // !! 在此添加想要的渐变过程色 !!
                    { offset: 0, color: '#004DFA' },
                    { offset: 0.8, color: '#001F63' },
                    { offset: 1, color: 'rgba(0,14,43,0.3)' }
                ]
            },
          }
        }
      }
    ]
  }
],

2.半环形进度

// This example requires ECharts v5.5.0 or later
option = {
  title: {
	text: '75',
	textStyle: {
		color: '#01c4a3',
		fontSize: 40
	},
	subtext: '总分：100分',
	subtextStyle: {
		color: '#909090',
	},
	itemGap: -10, // 主副标题距离
	left: 'center',
	top: 'center'
},

angleAxis: {
	max: 100, // 满分
	startAngle: -90,
	clockwise: true, // 逆时针
    // 隐藏刻度线
	axisLine: {
		show: false
	},
	axisTick: {
		show: false
	},
	axisLabel: {
		show: false
	},
	splitLine: {
		show: false
	}
},
radiusAxis: {
	type: 'category',
    // 隐藏刻度线
	axisLine: {
		show: false
    },
    axisTick: {
		show: false
    },
    axisLabel: {
		show: false
    },
    splitLine: {
		show: false
    }
  },
polar: {
	center: ['50%', '50%'],
	radius: '120%' //图形大小
},
series: [{
	type: 'bar',
    data: [{
		name: '作文得分',
		value: 50,
		// startAngle: 0,
  //   endAngle: 10,
		itemStyle: {
			normal: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
					offset: 0,
					color: '#FE3EC4'
				}, 
				{
					offset: 0.5,
					color: '#583581'
				}, {
					offset: 1,
					color: 'rgba(43,39,97, 0.7)'
				}])
			}
		},
    }],
	coordinateSystem: 'polar',
	roundCap: true,
	barWidth: 25,
	barGap: '-100%', // 两环重叠
	z: 2,
}]

};

相关文章：
Echarts官方文档
Echarts各类图表option参数中文含义及常用值解析
ECharts 柱状图常用配置
EChart 多系列柱状图绘制背景图