echarts 象形柱状图

### ECharts 象形柱状图使用教程

#### 设置图形类型
`symbol` 属性用于指定象形柱状图使用的图标形状。ECharts 提供了多种内置的标记类型，包括 `circle`, `rect`, `roundRect`, `triangle`, `diamond`, `pin`, `arrow`, 和 `none`[^3]。

对于更加个性化的视觉效果，可以通过 URL 加载外部图片作为图标。这使得开发者可以根据具体应用场景定制独特的图表样式：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'pictorialBar',
        symbol: 'image://https://example.com/image.png',
        data: [120, 200, 150, 80, 70, 110, 130],
        symbolSize: function (val) { // 动态调整大小
            return val / 2;
        }
    }]
};

为了确保对象能准确反映数据值的变化，在某些情况下可能还需要配置 `symbolClip` 参数为 true 来裁剪超出部分的对象，从而更好地体现数据精度[^4]。

---

#### 实现电量效果案例分析
当创建类似于电池充电状态显示这样的特殊场景时，可以利用上述提到的技术手段构建直观易懂的数据可视化组件。比如下面的例子展示了如何模拟一个简单的电池充电动画过程：

// 假设我们有一个代表当前电量百分比的数据源
var batteryLevelData = [
    {name:'剩余电量', value:75},
];

option = {
    title : {
        text: '手机电量',
        subtext: ''
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c}%"
    },
    toolbox: {},
    calculable : false,
    series : [
        {
            name:'剩余电量',
            type:'gauge',
            detail: {formatter:'{value}%'},
            data:[batteryLevelData[0]],
            itemStyle:{
                normal:{color:'#FF6347'}
            },
            axisLine: {
                lineStyle: {
                    width: 30
                }
            },
            splitLine: {
                show: false
            },
            pointer: {
                length: "80%",
                color: '#fff'
            },
            title: {
                offsetCenter: ['-5%', '-20%'],
                fontSize: 16
            },
            detail: {
                offsetCenter: ['0%', '40%'],
                fontWeight: 'bold',
                fontSize: 20
            }
        }
    ]
};

myChart.setOption(option);

此段代码片段不仅实现了基本的功能需求，同时也考虑到了用户体验方面的要求——即通过颜色变化传达更多信息给用户。