正文

教你轻松用echarts打造菜单与统计图表，数据可视化不再难

/0 浏览量
0827

ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助我们轻松地将数据转换成图表，使得数据可视化变得更加简单和直观。本文将带你了解如何使用 ECharts 创建菜单与统计图表，让你轻松入门数据可视化。

一、ECharts 简介

ECharts 是一个基于 JavaScript 的图表库，它支持多种图表类型，包括折线图、柱状图、饼图、散点图、地图等。ECharts 的特点如下：

  • 丰富的图表类型：满足各种数据可视化的需求。
  • 跨平台：支持 PC、手机、平板等多种设备。
  • 高度可定制：可以自定义图表的样式、颜色、动画等。
  • 易于使用：简单易学的 API 和丰富的文档。

二、创建 ECharts 实例

要使用 ECharts，首先需要引入它的 JavaScript 库。以下是创建 ECharts 实例的基本步骤：

  1. 引入 ECharts 库。
  2. 创建一个用于存放图表的 DOM 元素。
  3. 初始化 ECharts 实例。
  4. 配置图表的选项。
  5. 使用实例的 setOption 方法设置图表的配置项和数据显示。

以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 实例</title>
    <!-- 引入 ECharts 库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
    <!-- 创建一个用于存放图表的 DOM 元素 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

三、创建菜单与统计图表

在 ECharts 中，我们可以通过配置图表的系列（series）来创建菜单与统计图表。以下是一个创建饼图菜单的示例：

// 创建饼图菜单
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '饼图菜单',
        subtext: '数据来源：示例数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

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

四、总结

通过本文的介绍，相信你已经掌握了使用 ECharts 创建菜单与统计图表的基本方法。ECharts 提供了丰富的图表类型和自定义选项，可以帮助你轻松实现各种数据可视化需求。希望本文能对你有所帮助！

-- 展开阅读全文 --