极致呈现系列之：Echarts象形柱图的艺术表达

什么是象形柱图

象形柱图是一种数据可视化图表，它使用图形与实际对象的形状和比例来表示数据。与传统的柱状图不同，象形柱图的柱形不是简单的矩形，而是根据数据所代表的实际对象进行形状设计。

在象形柱图中，每个数据点都用一个与其相关的图形来表示。这些图形可能是具体的物体、符号、标志或图标等，通常与数据主题相关。例如，人口统计数据可以使用小人图标来表示每个群体的人数，销售数据可以使用货币符号来表示每个产品或类别的销售额。

通过使用象形柱图，可以更直观地展示数据，使数据更加生动和易于理解。它不仅提供了数据量的比较，还可以传达更多的信息和故事，帮助观察者更好地理解数据背后的意义。

需要注意的是，象形柱图虽然可以提供可视化的趣味性和视觉冲击力，但在设计和解读时需要注意保持数据的准确性和一致性，以免引起误解或歧义。

象形柱图的特点和应用场景：

象形柱图的特点

1. 直观易懂：象形柱图通过使用图形化的图标和符号代替传统柱状图的简单矩形，使数据更加直观和易于理解。
2. 强调视觉冲击力：因为象形柱图使用了具体的图形和符号，所以在视觉上更加引人注目，能够吸引观众的注意力。
3. 传递更多信息：除了表示数据数量外，象形柱图还可以使用不同的图标形状、颜色和大小来代表其他相关信息，如分类、属性或趋势等，从而传递更多信息给观众。
4. 增强记忆效果：由于象形柱图使用了形象鲜明的图形，观众更容易记住和理解数据，有助于提高信息的记忆效果。

象形柱图的应用场景

1. 教育领域：象形柱图在教学中可以用来可视化数据，帮助学生更好地理解和记忆统计数据、历史数据等。
2. 商业和市场营销：象形柱图可以用于展示销售数据、市场份额、品牌形象等，帮助企业做出决策和制定营销策略。
3. 社会科学研究：在人口统计、民意调查、社会调查等领域，象形柱图可以直观地展示不同群体、意见或观点的比较。
4. 环境监测和可持续发展：象形柱图可以用来表示环境指标、能源消耗等数据，帮助监测环境状况和推动可持续发展。
5. 媒体和传媒：在新闻报道、杂志、广告等媒体领域，象形柱图可以用来图文并茂地呈现数据，提供更生动的视觉效果。

Echarts中象形柱图的常用配置项

1. type：设置为"pictorialBar"，表示使用象形柱图。
2. barCategoryGap 和 barGap：用来控制多个象形柱图之间的间距。barCategoryGap 控制同一系列的象形柱图之间的间距，barGap 则控制不同系列之间的间距。
3. label：用来配置象形柱图的标签显示方式，例如标签的位置、字体样式、文本格式化等。
4. symbolRepeat：指定图形元素是否重复。值可为：
   • false/null/undefined：不重复，即每个数据值用一个图形元素表示。
   • true：使图形元素重复，即每个数据值用一组重复的图形元素表示。重复的次数依据 data 计算得到。
   • a number：使图形元素重复，即每个数据值用一组重复的图形元素表示。重复的次数是给定的定值。
   • ‘fixed’：使图形元素重复，即每个数据值用一组重复的图形元素表示。重复的次数依据 symbolBoundingData 计算得到，即与 data 无关。这在此图形被用于做背景时有用。。
5. symbolBoundingData：用于控制图形符号的绑定数据。可以通过设置一个数字或数组来映射每个数据项上的图形符号。
6. symbolClip：用于控制图形符号是否裁剪。设置为 true 时，图形符号会在每个柱状图的边界内进行裁剪。
7. symbolSize：控制图形符号的大小。可以设置为一个数组，表示图形符号的宽度和高度；也可以设置为百分比。
8. symbolKeepAspect：用于控制图形符号是否保持宽高比例。设置为 true 时，图形符号的宽高比例会根据实际宽高自动调整。
9. symbolPosition：用于控制图形符号的位置。可取值：
   • 'start'：图形边缘与柱子开始的地方内切。
   • 'end'：图形边缘与柱子结束的地方内切。
   • 'center'：图形在柱子里居中。
10. symbolOffset：控制图形符号的偏移量。可以设置为一个数组，表示图形符号在 x 和 y 方向上的偏移量；也可以设置为百分比。

vue3中创建象形柱图

1. 创建vue项目，安装ECharts库

npm install echarts --save

2. 新建PictorialBarView.vue文件，使用import语句引入ECharts库

import * as echarts from 'echarts'; 

3. 创建图表容器：在PictorialBarView组件的template中，添加一个div元素作为图表的容器。给它一个唯一的ref属性，以便在后面初始化图表对象时使用

<template>
   <div ref="chart" style="width:600px;height:400px; margin: 20px auto;"></div>
</template>

4. 初始化图表对象：在PictorialBarView组件中定义chart，

const chart = ref(null)

在mounted生命周期钩子函数中，使用echarts.init方法初始化图表对象。

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const chart = ref(null)
onMounted(() => {
  const myChart = echarts.init(chart.value) 
})
</script>

5.准备数据，实际项目开发中，这里的数据应该是从后台的API接口获取的，这里直接写在了前端。

const category = ['服务器数（台）', '计算容量（核）', '内存容量(GB)', '存储容量(PB)'];//定义类目
const barData = [60, 30, 82, 9];
const lineData = [100, 100, 100, 100]//定义lineData常量数组。表示柱形图相对于参考线的占比。

6. 配置图表参数，在PictorialBarView组件的mounted生命周期钩子函数中，定义option对象，在里面配置图表数据，并使用chart.setOption方法配置图表的参数。

onMounted(() => {
  const myChart = echarts.init(chart.value)
  const option = {
    backgroundColor: '#0d073d',
    grid: [{ //控制显示位置的属性grid
      left: '20%',
      bottom: '',
      top: '',
      right: '10%' //在此图中可用于控制柱子的长度
    }],
    xAxis: {
      show: false
    },
    yAxis: {
      data: category,
      show: true,
      axisLabel: {
        verticalAlign: 'middle',
        color: '#4488bc',
        fontSize: '20'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [{ // 外边框
      name: '',
      type: 'pictorialBar',
      symbol: 'reat',
      barWidth: '10%',
      symbolOffset: ['1%', 0], //位置
      symbolSize: ["10500%", '500%'], //大小
      itemStyle: { 
          color: '#3f559c' 
      },
      z: -180, //图层
      symbolRepeat: null,
      data: [1, 1, 1, 1], //数据
      barGap: 50,
      barCategoryGap: 0,
      animationEasing: 'elasticOut',

    },