echarts安装与配置

一、安装

1、独立版本

我们可以在直接下载 echarts.min.js 并用 <script> 标签引入。

echarts.min.js(4.7.0)

另外，开发环境下可以使用源代码版本 echarts.js 并用 <script> 标签引入，源码版本包含了常见的错误提示和警告。

echarts.js(4.7.0)

我们也可以在 ECharts 的官网上直接下载更多丰富的版本，包含了不同主题跟语言，下载地址：https://www.echartsjs.com/zh/download.html。

这些构建好的 echarts 提供了下面这几种定制：

  • 完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。
  • 常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。
  • 精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。

2、使用 CDN 方法

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

二、配置语法

本章节我们将为大家介绍使用 ECharts 生成图表的一些配置。

第一步：创建 HTML 页面

创建一个 HTML 页面，引入 echarts.min.js：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

第二步: 为 ECharts 准备一个具备高宽的 DOM 容器

实例中 id 为 main 的 div 用于包含 ECharts 绘制的图表:

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

第三步: 设置配置信息

ECharts 库使用 json 格式来配置。

echarts.init(document.getElementById('main')).setOption(option);

这里 option 表示使用 json 数据格式的配置来绘制图表。步骤如下：

标题

为图表配置标题：

title: {
    text: '第一个 ECharts 实例'
}

提示信息

配置提示信息：

tooltip: {},

图例组件

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: {
    data: [{
        name: '系列1',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
            color: 'red'
        }
    }]
}

X 轴

配置要在 X 轴显示的项:

xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}

Y 轴

配置要在 Y 轴显示的项。

yAxis: {}

系列列表

每个系列通过 type 决定自己的图表类型:

series: [{
    name: '销量',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

每个系列通过 type 决定自己的图表类型：

  • type: 'bar'：柱状/条形图
  • type: 'line'：折线/面积图
  • type: 'pie'：饼图
  • type: 'scatter'：散点（气泡）图
  • type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
  • type: 'radar'：雷达图
  • type: 'tree'：树型图
  • type: 'treemap'：树型图
  • type: 'sunburst'：旭日图
  • type: 'boxplot'：箱形图
  • type: 'candlestick'：K线图
  • type: 'heatmap'：热力图
  • type: 'map'：地图
  • type: 'parallel'：平行坐标系的系列
  • type: 'lines'：线图
  • type: 'graph'：关系图
  • type: 'sankey'：桑基图
  • type: 'funnel'：漏斗图
  • type: 'gauge'：仪表盘
  • type: 'pictorialBar'：象形柱图
  • type: 'themeRiver'：主题河流
  • type: 'custom'：自定义系列

实例

以下为完整的实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的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>

更多配置项内容参考：https://www.echartsjs.com/zh/option.html

到此这篇关于echarts安装与配置的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 如何利用Echarts根据经纬度给地图画点画线

    如何利用Echarts根据经纬度给地图画点画线

    目录 1.相关介绍 2.地图绘制 3.根据经纬度进行标点画线 总结 1.相关介绍 在使用Echar进行绘制地图对象,首先我们需要地图的json文件,Echarts依赖默认会引入这个相关的json文件,所以后续使用这个地图可以之间引用这里的json文件进行绘制Echarts地图. 但是在后续重新构建项目的时候发现了一个问题,Echarts的依赖包下没有这个map文件了,我心想这不人麻了,这json文件我要去哪找.后面再对比版本之后发现,在5.0版本之前Echarts会默认将这些Map的json文件

  • vue echarts实现航班选座案例分析

    vue echarts实现航班选座案例分析

    目录 背景 实现思路 代码分析 获取svg 注册自定义地图 geo组件的配置 举一反三 三 效果图 注意点 背景 最近在echarts官方看到了一个航班选座的示例,感觉很好,可以扩大,缩小,鼠标放置到座位上可以显示座位号,允许默认选中座位.于是在5.1假期抽了一点点时间,来写一篇文章,深入研究分析一下这个示例,解析一下这个示例的完整代码.首先让我们来看下示例的效果图. 实现思路 代码是使用echarts来实现的,主要用到的是svg和自定义地图的相关知识.示例的完整代码 在做选座的功能,我们使用d

  • Vue使用echarts的完整步骤及解决各种报错

    Vue使用echarts的完整步骤及解决各种报错

    前言: Echarts,它是一个与框架无关的 JS 图表库,但是它基于Js,这样很多框架都能使用它,例如Vue,估计IONIC也能用,下次研究. 因为我的习惯,每次新尝试做一个功能的时候,总要新创建个小项目,做做Demo. 首先看自己电脑是否安装了Vue,打开终端命令:vue --version,我以前安装过Vue,但是不知道为何报错: vue/cli Error: Cannot find module ‘@vue/cli-shared-utils‘ 注意:如果是全局module出错,就全局更新

  • Vue ECharts实现机舱座位选择展示功能代码详解

    Vue ECharts实现机舱座位选择展示功能代码详解

    var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; $.get(ROOT_PATH + '/data/asset/geo/flight-seats.svg', function (

  • ECharts入门教程

    ECharts入门教程

    Echart 官网:https://echarts.apache.org/zh/index.html 下载页面:https://echarts.apache.org/zh/download.html 演示地址:https://echarts.apache.org/examples/zh/index.html 文档:https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EChar

  • Echarts如何重新渲染实例详解

    当我点击饼图时,出现相应的内容,并重新渲染饼图展示内容 饼图点击事件 this.conechart.on('click', (params) => { params.name }); 获取的是点击的对应的板块名 利用获取的板块名,去接口调取对应的数据 , 调取数据是异步调用 ,所以重新渲染视图要在 异步中渲染,否则同步渲染不出数据 var options = this.conechart.getOption() options.series[0].data = res.data this.con

  • Vue使用Echarts图表多次初始化报错问题的解决方法

    Vue使用Echarts图表多次初始化报错问题的解决方法

    目录 问题 方法一 销毁实例 方法二 不要频繁创建实例 总结 问题 Vue项目中需要用Echarts的柱状图显示数据,并且每次搜索要更新柱状图. 这时候小编发现在控制台会出现这样的报错: 原来的代码是这样的,页面挂载和搜索时都会调用init方法 initChart (dataSet = [5, 20, 36, 10, 10, 20]) { this.barChart = echarts.init(this.$refs.chartBox) const option = { title: { tex

  • 如何利用js读取excel文件并绘制echarts图形

    如何利用js读取excel文件并绘制echarts图形

    目录 1.场景描述 2.需求描述 3.功能实现 4.尾言 1.场景描述 通常来说,前端要拿到excel数据,都是先上传存储数据库,然后再请求后端接口,获取数据. 但有100个产品经理,就会有101个不同的需求. 本文以自己的vue项目为例. 2.需求描述 现有一张excel财务报表,需要根据这张excel表绘制成各种echarts图形,用于年度汇报. 不经过后端,前端独立完成. 3.功能实现 首先,为了将excel数据绘制成echarts图表,前端得拿到excel数据. 这里我们借助js-xls

  • 基于Echarts实现饼图效果

    基于Echarts实现饼图效果

    本文实例为大家分享了Echarts实现饼图效果的具体代码,供大家参考,具体内容如下 1 显示数值效果 series 下的label 饼图的文字显示2 半径 圆环 radius3 南丁格尔图 roseType: 'radius' 数值越大半径越大4 选中效果 selectedMode 注意点: 1 不需要设置 x轴和y轴 2 饼图的所需要的数据 是个数组 数组里面放对象 对象则必须包含name和value, <!DOCTYPE html> <html lang="en"

  • echarts安装与配置

    一.安装 1.独立版本 我们可以在直接下载 echarts.min.js 并用 <script> 标签引入. echarts.min.js(4.7.0) 另外,开发环境下可以使用源代码版本 echarts.js 并用 <script> 标签引入,源码版本包含了常见的错误提示和警告. echarts.js(4.7.0) 我们也可以在 ECharts 的官网上直接下载更多丰富的版本,包含了不同主题跟语言,下载地址:https://www.echartsjs.com/zh/downloa

  • mysql 5.7.20常用下载、安装和配置方法及简单操作技巧(解压版免安装)

    mysql 5.7.20常用下载、安装和配置方法及简单操作技巧(解压版免安装)

    话说凌晨刚折腾完一台MySQL 5.7.19版本的安装,未曾料到早上MySQL官方就发布了最新的5.7.20版本.这个版本看似更新不多,但是加入了一个我们所急需的功能. MySQL 5.7.20版本新增了参数group-replication-member-weight,用来表示选主时服务器的优先级.若没有这个优先级,则之前版本的MGR会选择一个或许不是用户想要的节点,这是一个令人头疼的问题.相信5.7.20版本新增的该参数能解决一些用户的痛点. 1. 下载: mysql-5.7.20是解压版免

  • windows下MySQL5.6版本安装及配置过程附有截图和详细说明

    windows下MySQL5.6版本安装及配置过程附有截图和详细说明

                        编辑者:Vocabulary 下面详细介绍5.6版本MySQL的下载.安装及配置过程. 图1.1 MySQL5.6 目前针对不同用户,MySQL提供了2个不同的版本: Ø         MySQL Community Server:社区版,该版本完全免费,但是官方不提供技术支持. Ø         MySQL Enterprise Server:企业版,它能够高性价比的为企业提供数据仓库应用,支持ACID事物处理,提供完整的提交.回滚.崩溃恢复和行级锁

  • Symfony的安装和配置方法

    本文实例讲述了Symfony的安装和配置方法.分享给大家供大家参考,具体如下: 手工安装Symfony很简单,几乎没有太多需要讲的.打开 http://symfony.com/download ,从页面的选择列表中选择一个 Symfony 的发行版本,再点击旁边的 "DOWNLOAD NOW",把下载到的文件包解压到你的 Web 服务器上的某个位置,安装就算完成了.(选择版本号最高的那个通常是最好的,tgz格式还是zip格式只是个人喜好问题,每个版本的Symfony还有一个"

  • IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置

    IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置

    本例是在wiondws XP下 IIS5.1 php5.2.1(zip) MySQL5.0.37 phpmyadmin2.10.0.2 ZendOptimizer-3.2.6 的安装与配置 IIS 的安装 1 在光驱中放入WindowsXP SP2系统安装光盘 2 依次在 控制面板 > 添加与删除 > 添加/删除Windows组件 > Windows组件向导 中选中 Internet信息服务(IIS) 3 点击 下一步 进行文件复制,直到完成安装 4 完成 IIS 安装 5 打开浏览器,

  • Ubuntu下MySQL安装及配置远程登录教程

    Ubuntu下MySQL安装及配置远程登录教程

    本文实例为大家分享了MySQL安装及配置远程登录教程,供大家参考,具体内容如下 一.安装MySQL 一.安装MySQL 1. sudo apt-get install mysql-server 2. sudo apt-get install mysql-client 3. sudo apt-get install libmysqlclient-dev 注意:安装过程中会提示设置密码和确认密码.记住密码. 安装完成之后可以使用如下命令来检查是否安装成功: root@root:/# ps aux|g

  • MySQL5.7.17安装及配置图文教程

    MySQL5.7.17安装及配置图文教程

    博主说:最近在写「史上最简单的 MySQL 教程」系列博文,写着写着,忽然想到或许有些童鞋还没有接触过 MySQL 数据库呢?理论与实践相结合才是王道啊,因此有了这篇关于 MySQL 数据库的安装及配置介绍的博文.说实话,这篇博文并没有什么技术含量,姑且给未接触过 MySQL 数据库的童鞋一些参考吧! 首先,下载 MySQL 数据库的安装包:mysql-5.7.17.msi.链接: https://pan.baidu.com/s/1nuVVEEd 密码: 2fxw 下载完成之后,双击打开此msi

  • FCKeditor 2.6.6在ASP中的安装及配置方法分享

    FCKeditor 2.6.6在ASP中的安装及配置方法分享

    首先从FCKEditor官方下载最新的版本我们提供的下载地址 http://www.jb51.net/codes/21294.html 安装及配置方法:一.打开文件夹发现有许多文件对于ASP来说是用不到的:删除FCKEditor2.6.6中不必要的文件:解压缩FCKeditor_2.6.6.zip到你网站根目录 fckeditor文件夹中,同时把文件夹内带_的文件夹和文件一并删除:1.fckeditor目录下除editor目录.fckconfig.js.fckeditor.asp.fckedit

  • Sql Server安装出错,安装程序配置服务器失败的解决方法小结

    Sql Server安装出错,安装程序配置服务器失败的解决方法小结

    错误重现:首先在控制面板里卸载了sqlserver软件,一切正常,然后重启(一定要重启,否则没法重装),执行sqlserver的安装程序,一切似乎都正常,一路下一步,安装到了最后,突然提示"安装程序配置服务器失败". 当出现安装程序配置服务器失败时,可以试着用一下方法解决 推荐方法:在安装SQL Server 2000时,安装快要完成,到最后提示一个错误,如上图,怎么解决呢,不急,请看下面的方法: 把上次安装时产生的"Microsoft SQL Server"文件夹

  • PostgreSQL安装、配置及简单使用方法

    一.PostgreSQL简介 1.什么是PostgreSQL PostgreSQL数据库是目前功能最强大的开源数据库,支持丰富的数据类型(如JSON何JSONB类型,数组类型)和自定义类型.而且它提供了丰富的接口,可以很容易地扩展它的功能,如可以在GiST框架下实现自己的索引类型等,它还支持使用C语言写自定义函数.触发器,也支持使用流行的语言写自定义函数,比如其中的PL/Perl提供了使用Perl语言写自定义函数的功能,当然还有PL/Python.PL/Tcl,等等. 2.PostgreSQL数

随机推荐