echarts官网：https://www.echartsjs.com/zh/index.html
echarts官网手册：https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
菜鸟教程：https://www.runoob.com/echarts/echarts-tutorial.html
菜鸟教程在线编辑器：https://www.runoob.com/try/try.php?filename=tryecharts_intro

文章目录

一、使用案例

情形一：在Vue组件中使用

echarts 使用主要有以下几个步骤：

Step1. 下载安装

在项目中安装echarts，安装方式有多种，这里采用 npm 方法

npm install echarts --save
Step2. 使用 echarts

接下来讲的是在组件化开发中的使用方法

首先，你要先有一个组件

<template>
</template>

<script>
</script>

<style>
</style>

接下来，是 echarts 的使用步骤

Step2.1 导入 echarts
<script>
	// 注意，以下写法固定，不能写错
	import echarts from 'echarts'
</script>
Step2.2 创建 DOM

注意：创建的DOM 应该具备宽高

<template>
	<div id="echarts_box" style="width: 600px;height:400px;"></div>
</template>
Step2.3 初始化 echarts 和填充数据

注意：这步操作应该放在 mounted 中，即在 DOM 渲染完成之后触发，显示 echarts 图表

此步骤具体分为三步：
（1）基于准备好的 DOM，初始化 echarts 实例
（2）发起数据请求，获取数据（json 格式）
（3）setOption

// DOM 渲染完成触发
mounted() {
  // 1. 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('echarts_box'))
  // 2. 发起请求，获取数据
  const { data: res } = await this.$http.get('reports/type/1')
  if (res.meta.status !== 200) {
     return this.$message.error('获取折线图数据失败！')
  }
  // 3. 使用刚指定的配置项和数据，显示图表
  myChart.setOption(data)
}
完整实例代码
<template>
	<div id="echarts_box" style="width: 600px;height:400px;"></div>
</template>

<script>
	import echarts from 'echarts'
	export default {
		data() {
			return {}
		},
		created() {},
		// DOM 渲染完成触发
		mounted() {
		  // 1. 基于准备好的dom，初始化echarts实例
		  var myChart = echarts.init(document.getElementById('echarts_box'))
		  // 2. 发起请求，获取数据
		  const { data: res } = await this.$http.get('reports/type/1')
		  if (res.meta.status !== 200) {
		     return this.$message.error('获取折线图数据失败！')
		  }
		  // 3. 使用刚指定的配置项和数据，显示图表
		  myChart.setOption(data)
		}
	}
</script>

情形二：在 html 页面中使用

过程和上面差不多，只是这里不需要下载安装 echarts，可以直接通过 CDN 引入；或者将 echarts.js 文件下载到本地引入，这里和普通的 js 文件引入一样。

附上一个教程实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    // 1. 引入 echarts.js
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
	// 2. 准备DOM
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 3. 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 4. 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 5. 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

运行效果展示
在这里插入图片描述

二、echarts 中数据的说明

通过上面的实例，大概对 echarts 有了初步了解。下面针对 json 数据项进行分析，空口白话讲解不易理解，下面通过结合一个折线图细细道来~~
在这里插入图片描述

1. setOption(data)

setOption() 方法的参数 data 要求为 json 格式的数据，表示使用 json 数据格式的配置来绘制图表

2. 标题 title

即给图表配置的标题，通过 title 实现

title: {
    text: '用户来源'
}
3. 提示信息 tooltip

配置提示信息，是鼠标移入图表上某位置时，显示出该位置对应的数据信息，实际效果如图
在这里插入图片描述
部分代码如下所示

tooltip: {
	trigger: "axis",
	axisPointer: {
		type: "cross",
		label: {
			backgroundColor: "#76baf1"
		}
	}
}
4. 图例组件 legend

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

图示：在折线图中，legend 对应的是每条折线的系列
在这里插入图片描述

legend: {
    data: ["华东","华南","华北","西部","其他"]
}
5. X 轴 xAxis

配置要在 X 轴显示的项

xAxis: { 
	data: ["2017-12-27","2017-12-28","2017-12-29","2017-12-30","2017-12-31", "2018-1-1"]
}
6. Y 轴 yAxis

配置要在 Y 轴显示的项

yAxis: {
	type: "value"
}
7. 系列列表 series

每个 系列 的详情

series: [
	{ name: "华东", type: "line", stack: "总量", areaStyle: {normal: {}}, data: [999,3111,4100,3565,3528,6000] },
	{ name: "华南", type: "line", stack: "总量", areaStyle: {normal: {}}, data: [5090,2500,3400,6000,6400,7800] },
	……
]
8. 类型 type

每个 系列 通过 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'：自定义系列
附：data 数据截图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支：3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区