本文共 2513 字，大约阅读时间需要 8 分钟。

echarts官网：

echarts官网手册：

菜鸟教程：

菜鸟教程在线编辑器：

一、使用案例

情形一：在Vue组件中使用

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

Step1. 下载安装

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

npm install echarts --save

Step2. 使用 echarts

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

首先，你要先有一个组件

接下来，是 echarts 的使用步骤

Step2.1 导入 echarts

Step2.2 创建 DOM

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

Step2.3 初始化 echarts 和填充数据

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

此步骤具体分为三步：

// 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)}

完整实例代码

情形二：在 html 页面中使用

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

附上一个教程实例

    
           // 1. 引入 echarts.js    	// 2. 准备DOM    
   
    

运行效果展示

二、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 数据截图

转载地址：https://blog.csdn.net/qq_41956139/article/details/104618285 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！