ECharts学习--快速上手ECharts

最新推荐文章于 2024-06-26 11:09:42 发布

有一种陪伴叫做jay

最新推荐文章于 2024-06-26 11:09:42 发布

阅读量293

点赞数

分类专栏： ECharts 文章标签：数据可视化

本文链接：https://blog.csdn.net/weixin_46198692/article/details/109709759

版权

本文介绍了ECharts的快速上手步骤，包括引入库、创建容器、初始化实例、配置图表类型和样式，并详细讲解了基础使用、配置选项如xAxis、yAxis和series，以及在柱状图、折线图等不同场景的应用。

摘要由CSDN通过智能技术生成

（一）五个步骤实现快速上手ECharts

（1）引入echarts.js文件

（2）准备一个容器，来装图表

（3）初始化echarts实例对象

（4）准备配置项（决定图表的类型、样式）

（5）将配置项设置给echarts实例对象

（二）echarts的基础使用

在引入ECharts文件后，我们就可以做一个简单的图表：

// 这是准备的视图容器,可以根据自己的需求对大小位置进行更改
<div style="width: 600px;height: 400px;">
</div>
<script>
    // 获取DOM节点
    var mCharts = echarts.init(document.querySelector('div'))
    // 配置项
    var option = {
        xAxis: {
            type: 'category', // 类目轴
            data: ['小明', '小红', '小王'] // 值
        },
        yAxis: {
            type : "value" // 数值轴
        },
        series: [
            {
                name: '语文',
                type: 'bar', // 图表类型
                data: [70