ECharts入门指南：如何使用ECharts

百变鹏仔 3周前 (11-27) #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

详解在React 组件中使用Echarts的正确姿势

PHP 使用Echarts生成数据统计报表详解

canvas使用贝塞尔曲线平滑拟合折线段的方法详解

echarts实现去掉X轴、Y轴和网格线效果实例分享

vue.js将echarts封装为组件一键使用