自定义仪表类条形图-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53495678/article/details/138208099

本文通过图表展示了电动汽车在人工驾驶模式和自动驾驶模式下的平均百公里能耗，以及象形柱状图呈现的数据，提供了节能效率的直观比较。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

option = {
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘shadow’,
},
formatter: ‘{a}
{b} : {c}’,
},
grid: {
left: ‘3%’,
right: ‘4%’,
bottom: ‘20%’,
containLabel: true,
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
show:false,
formatter: ‘{value}km’,
},
axisTick: {
show: false
},
type: ‘value’,
boundaryGap: [0, 0.01],
},
yAxis: [
{
type: ‘category’,
axisLabel: {//坐标轴刻度标签
show: false
},
axisLine: {//坐标轴轴线
show: false
},
axisTick: {//坐标轴刻度
show: false
}
},
{
type: ‘category’,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
inside: false,
// color: ‘#fff’,
fontSize: ‘14’,
formatter(v) {
return v;
},
},
splitArea: {
show: false,
},
splitLine: {
show: false,
},
inverse: ‘true’, // 排序
data: [20,22],
},
],
series: [
{
name: ‘平均百公里能耗’,
type: ‘bar’,
barWidth: ‘40%’,
label: {
show: true,
position: ‘top’,

    color: '#666666',
    // fontSize: 26,
    // fontWeight: 600,
    formatter: '{b}km',
  },
  data: [
    {
      value: 22,
      itemStyle: {
        color: '#F0F3FB',
      },
      name: '人工驾驶模式(KWH/100KM)',
    },
    {
      value: 20,
      name: '自动驾驶模式(KWH/100KM)',
      itemStyle: {
        color: '#F0F3FB',
      },
    },
  ],
},
{
  type: 'pictorialBar', //设置类型为象形柱状图
  symbol: 'rect', //图形类型，带圆角的矩形
  symbolMargin: '2', //图形垂直间隔
  symbolRepeat: true, //图形是否重复
  // 分隔
  itemStyle: {
    normal: {
      color: '#92A2AE',
    },
  },
  // symbolRepeat: "fixed",
  symbolClip: true,
  symbolSize: [2, 20],
  symbolPosition: 'start',
  symbolOffset: [0, -1],
  // symbolBoundingData: this.total,
  width: '100%',
  z: 0,
  zlevel: 1,
  data: [30,30],
},
{
  type: 'pictorialBar', //设置类型为象形柱状图
  symbol: 'rect', //图形类型，带圆角的矩形
  symbolMargin: '2', //图形垂直间隔
  //symbolRepeat: true, //图形是否重复
  // 分隔
  itemStyle: {
    normal: {
      color: '#0FD8F0',
    },
  },
  symbolRepeat: "fixed",
  symbolClip: true,
  symbolSize: [2, 20],
  symbolPosition: 'start',
  symbolOffset: [0, -1],
  // symbolBoundingData: this.total,
  width: '100%',
  z: 0,
  zlevel: 1,
  data: [20,22],
},

],
};