pictorialbar 怎么使用

Pictorial Bar 是 Echarts 的一种图表类型，可以通过图形化的方式呈现数据。下面是 Pictorial Bar 的使用方式:

1. 引入 Echarts 库

<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>

2. 准备数据

var data = [
  { name: '苹果', value: 200 },
  { name: '香蕉', value: 150 },
  { name: '橙子', value: 100 },
  { name: '梨子', value: 80 },
  { name: '葡萄', value: 50 }
];

3. 配置 Pictorial Bar

var option = {
  title: {
    text: '水果销量',
    left: 'center'
  },
  tooltip: {},
  xAxis: {
    type: 'category',
    data: data.map(function(item) {
      return item.name;
    })
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'pictorialBar',
      symbol: 'rect',
      itemStyle: {
        color: function(params) {
          var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B'];
          return colorList[params.dataIndex % colorList.length];
        }
      },
      silent: true,
      symbolSize: 20,
      symbolOffset: [0, 5],
      data: data.map(function(item) {
        return item.value;
      })
    }
  ]
};

4. 渲染图表

var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);

这样就可以实现一个简单的 Pictorial Bar 图表啦！