echarts柱状图蓝桥杯

### 使用ECharts创建柱状图

在构建基于ECharts的柱状图时，了解其基本结构和配置选项至关重要。由于ECharts将不同类型的图表视为不同的组件[^2]，因此可以通过调整`series`部分内的参数轻松切换图表类型。

对于柱状图而言，在`option`对象内定义数据系列（series）时应指定`type: 'bar'`属性。下面是一个简单的例子展示如何利用ECharts库生成一个基础版本的柱状图：

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '某地区蒸发量和降水量'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['蒸发量','降水量']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月'],
            axisLabel: {
                interval:0,
                rotate:40
            }
        }
    ],
    yAxis: [
        {
            type : 'value'
        }
    ],
    series: [
        {
            name:'蒸发量',
            type:'bar',// 设置图表类型为柱状图
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
            markPoint: {
                data:[
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            }
        },
        {
            name:'降水量',
            type:'bar',// 同样设置此序列也为柱状图
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

这段代码展示了两个维度的数据对比——即“蒸发量”与“降水量”。通过改变`data`数组中的数值以及相应的月份标签，可以适应具体的场景需求。此外，还可以进一步自定义样式和其他行为以满足特定的应用场合[^1]。