echarts柱状图快速上手

要快速上手 Echarts 柱状图，需要先引入 Echarts 库，然后通过配置实现图表的展示。具体步骤如下：

1. 引入 Echarts 库

可以通过以下方式引入 Echarts 库：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>

注意，这里引入的是 Echarts 4.9.0 的库，可以根据自己的需求选择相应版本。

2. 准备数据

柱状图需要准备 x 轴和 y 轴的数据，可以通过以下方式来定义一个简单的数据集：

var data = {
    xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        data: [120, 200, 150, 80, 70, 110, 130]
    }
};

3. 配置图表

可以通过以下方式来定义柱状图的配置项：

var option = {
    title: {
        text: '柱状图示例'
    },
    tooltip: {},
    xAxis: {
        data: data.xAxis.data
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: data.yAxis.data
    }]
};

这里定义了一个柱状图的标题、x 轴、y 轴和数据系列。

4. 渲染图表

最后将图表配置项渲染到指定的 dom 容器中，可以通过以下方式来实现：

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

这里将图表渲染到 id 为 chart-container 的 div 容器中。