当前位置：首页 > 文章列表 > 文章 > 前端 > ECharts入门指南：如何使用ECharts

ECharts入门指南：如何使用ECharts

2023-12-17 10:09:06 0浏览收藏

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《ECharts入门指南：如何使用ECharts》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

ECharts入门指南：如何使用ECharts，需要具体代码示例

ECharts是一款基于JavaScript的数据可视化库，通过使用ECharts，用户可以轻松地展示各种各样的图表，如折线图、柱状图、饼图等等。本文将为您介绍如何使用ECharts，并提供详细的代码示例。

安装ECharts

要使用ECharts，您首先需要安装它。您可以从ECharts官网https://echarts.apache.org/zh/index.html下载ECharts，或者使用npm安装。如果您选择使用npm，您可以通过以下命令进行安装：

npm install echarts --save

新建一个ECharts页面

在新建ECharts页面之前，您需要一个HTML页面来承载ECharts。在HTML中，您需要引入ECharts的JavaScript文件。您可以通过以下方式引入：

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

一旦您引入了ECharts的JavaScript文件，您就可以开始创建您的第一个ECharts实例了。我们建议您在此之前在页面中添加一个div元素，以便您将图表渲染到页面中。您可以在HTML中添加一个类似以下的div元素：

<div id="chart" style="width: 600px;height:400px;"></div>

创建您的第一个ECharts图表

在HTML中创建了ECharts所需的基本元素后，接下来您需要编写代码来实现您的ECharts图表。下面是一个非常简单的折线图的例子：

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

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

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

在这里，我们首先通过使用ECharts的init函数来初始化了一个新的ECharts实例，并将这个实例保存到一个变量myChart中。我们引入了一些配置项和数据，其中包括一个标题、一个提示框、一个图例、一个x轴、一个y轴和一个数据系列。在这个例子中，我们使用了一个折线图的数据系列。最后，我们通过调用setOption方法将这些配置项应用于我们的ECharts图表。

创建其他类型的图表

除了折线图，ECharts还支持很多其他类型的图表，如柱状图、饼图、散点图、雷达图等等。下面是柱状图和饼图的示例代码：

柱状图：

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

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

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

饼图：

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 2. 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例',
        subtext: '饼图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

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

总结

使用ECharts创建图表是一项相对简单的任务，只要您有一些基本的JavaScript知识。在本文中，我们为您提供了一个入门教程，可以帮助您开始使用ECharts。如果您需要更多的资料和代码示例，您可以访问ECharts官网https://echarts.apache.org/zh/index.html。

本篇关于《ECharts入门指南：如何使用ECharts》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

使用入门 echarts