Echarts 数据可视化

最新推荐文章于 2024-04-28 12:06:25 发布
最新推荐文章于 2024-04-28 12:06:25 发布
阅读量1k 收藏 9
点赞数 1
分类专栏： 前端学习 文章标签： 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/f944913628/article/details/111451692
版权

目录

1. Echarts 简介

  • Echarts 缩写来自 Enterprise Charts（商业级数据图表），是百度的一个开源的数据可视化工具
  • Echarts 能够绘制 2D 和 3D 的饼状图、柱状图、折线图等几乎所有我们能够见到的图形
  • Echarts 能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器
  • Echarts 是一个纯 JavaScript 的图表库，底层依赖轻量级的 Canvas 库 ZRender
  • 官网： https://echarts.apache.org/zh/index.html

2. Echarts快速上手

使用步骤：

  1. 下载

  2. 复制/粘贴代码

  3. 代码分析

  4. 结论

实现：

1)下载

  • 从官网下载
  • npm 安装： npm i echarts
  • 按需定制

在这里插入图片描述
2) 复制代码 （5分钟上手 Echarts）

在这里插入图片描述
3) 分析代码

通过分析代码得出结论，使用 Echarts 绘制图形只需要做 5 件事情

① 引入 echarts.js 核心文件

② 定义一个用来显示图表的div （使用样式可以控制图表的宽高）

③ 初始化 echarts 实例 （此处要将div的dom对象作为参数传入）

④ 配置图表所需的数据

⑤ 调用 setOption 方法绘制图表

4)结论

  • Echarts 使用是比较简单的，按照固定的五个步骤来写即可
  • 想要产生不同的图表就需要不同的配置项，学习Echarts就是学习各种配置项
  • 不要死记配置项，要熟练使用文档

第四步配置数据项是最为关键的，要掌握里面的主要配置项

在这里插入图片描述

  • title： 标题组件，里面包含主标题、副标题等
  • xAxios： 坐标系的 x 轴
  • yAxios： 坐标系的 y 轴
  • legend： 图例组件，用于展现不同系列的标记、颜色和名字
  • series： 系列列表，配置具体的图标类型、数据等
  • 配置项知道的越多越好，但是不要死记硬背，要学会使用文档

3. 柱状图

3.1 柱状图基本使用

在这里插入图片描述

const xData = ['华为 mate 40', '华为 P40', '小米10', 'vivo X60', 'oppo Reno5 pro']
const yData = [1608, 1323, 908, 809, 1010]

const option = {
    title: {
        text: '12月手机销售数据'  // 图表标题
    },
    xAxis: {
        type: 'category',  // 类目轴
        data: xData        //显示在x轴的分类名称
    },
    yAxis: {
        type: 'value'      // 数值轴，y轴坐标不用设置，系统会自动产生
    },
    series: [
        {
            name: '销售数据'
            type: 'bar',   // 图表类型，bar代表是柱状图
            data: yData    // y轴数据
        }
    ]
}

3.2 其他常见效果

  • 最大值： series.markPoint
  • 最小值： series.markPoint
  • 平均值： series.markLine
series: [
    {
        type: 'bar', 
        data: yData, 
        markPoint: {   //标记点
            data: [
                { type: 'max', name: '最大值'},
                { type: 'min', name: '最小值'}
            ]
        },
        markLine: {
            data: [
              { type: 'average', name: '平均值', lineStyle: {color: 'orange'},
              { type: 'max', name: '最大值'},
              { type: 'min', name: '最小值', lineStyle: {color: 'red'}}
            ]
        }
    }
]
  • 数值显示： series. label
  • 柱宽： series.barWidth
const option = {
    title: {
        text: '12月手机销售数据'
    },
    xAxis: {
        type: 'category',  // 类目轴
        data: xData  //显示在x轴的分类名称
    },
    yAxis: {
        type: 'value'   // 数值轴，y轴坐标不用设置，系统会自动产生
    },
    series: [
        {
            type: 'bar',      // 图标类型，bar代表是柱状图
            data: yData,      // y轴数据
            label: {          
                show: true,   // 是否显示数据
                position: 'insideTop'  // 数据显示位置
            },
            barWidth: '30%',  // 柱宽，可以使用百分百也可以使用像素
        }
    ]
}
  • 横向显示

交换 xAxis 和 yAxis 中的配置项即可

const option = {
    title: {
        text: '12月手机销售数据'
    },
    xAxis: {
        type: 'value'   // 数值轴，y轴坐标不用设置，系统会自动产生
    },
    yAxis: {
        type: 'category',  // 类目轴
        data: xData  //显示在x轴的分类名称

    },
    series: [
        {
            type: 'bar',   // 图标类型，bar代表是柱状图
            data: yData,    // y轴数据
            label: {
                show: true,
                position: 'insideTop'
            },
            barWidth: '50px',
        }
    ]
}

4. 通用配置项

通用配置项就是所有图表都能使用的配置项

4.1 title

title： 用来设置主标题、副标题、标题样式等

title: {
    text: '12月手机销售数据',            // 主标题文字
    subtext:  '销售数据前5名',          // 副标题文字
    textStyle: {                      // 标题样式
        color: 'red',
        fontSize: 30
    },       
    link: 'http://www.baidu.com',     // 标题超链接
    left: 'right'                     // 标题距离左侧的位置， left、right、center
}

在这里插入图片描述

4.2 tooltip

tooltip： 提示框组件，用来配置鼠标进入或者点击时的提示信息

tooltip: {
    trigger: 'item',   // 提示信息， itme、axis
    triggerOn: 'mousemove',   //提示方式， mousemove（默认）、click
    formatter: '{b} <br /> {a}: {c}'      // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
}
  • {a}: 系列名称，就是 series 中的 name
  • {b}: 类目值， 就是 x 轴的分类名
  • {c}: 数值， 当前分类对应的数值
tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    formatter: function (arg) {
    	return `${arg.name}: <br> ${arg.seriesName}: ${arg.value}`
    }
}

在这里插入图片描述

4.3 toolbox

工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

toolbox: {
  feature: {
    saveAsImage: {   // 保存为图片
      type: 'png',
      title: '保存为图片'
    },
    dataView: {},    // 数据视图
    restore: {},     // 重置视图
    dataZoom: {},    // 区域缩放
    magicType: {     // 图表切换
      type: ['bar', 'line']    // 在柱状图和折线图之间切换
    }
  }
}

在这里插入图片描述

4.4 legend

legend： 图例，用于筛选系列，要和 series 配合使用

在 series 中可以有多组数据， 只要定义多个对象即可

legend:{
              orient:'vertical',
              left:'left',
              data:[
                {name:'11月销量',icon:'circle'},
                {name:'12月销量',icon:'diamond'},
              ]
            },
            xAxis: {
                data: xData
            },
            yAxis: {},
            series: [
              {
                type: 'bar',
                data: yData1,
                name:'11月销量'
              },
              {
                type: 'bar',
                data: yData2,
                name:'12月销量'
              }
            ]
        };
  • series 是一个数组，在series中每多定义一个对象，就意味着多了一组数据
  • legend 用来做数据筛选
    • name： 系列数据的名称，该名称必须和 series 中的 name 值一致
    • icon： 图标样式

5. 柱状图综合练习

展示如图所示
在这里插入图片描述

<script>
    const xData = ['2017年', '2018年', '2019年', '2020年']
    const yData1 = [650, 588, 720, 703]
    const yData2 = [570, 820, 998, 409]
    const yData3 = [768, 629, 529, 209]
    const yData4 = [356, 763, 685, 358]
    // 初始化
    var barCharts = echarts.init(document.getElementById('bar'));
    // 指定图表的配置项和数据
    var option = {
            title: {
                text: '历年招生数量分布图',
                textStyle:{
                  color:'orange',
                  fontSize:'26px',
                },
            },
            toolbox:{
              feature:{
                dataZoom:{},
                restore:{
                  title:'重置数据'
                },
                dataView:{
                  title:'数据视图',
                  textColor:'orange'
                },
                saveAsImage:{
                  type:'jpg',
                },
                magicType: {
                  type: ['line', 'bar']
                }
              }
            },
            legend:{
              left:'center',
              data:[
                {name:'java',icon:'diamond'},
                {name:'Web',icon:'diamond'},
                {name:'Python',icon:'diamond'},
                {name:'C/C++',icon:'diamond'},
              ]
            },
            xAxis: {
                data: xData
            },
            yAxis: {},
            series: [
              {
                type: 'bar',
                data: yData1,
                name:'java',
                label:{
                  show:true,
                  position: 'insideTopLeft'
                }
              },
              {
                type: 'bar',
                data: yData2,
                name:'Web',
                label:{
                  show:true,
                  position: 'insideTopLeft'
                }
              },
              {
                type: 'bar',
                data: yData3,
                name:'Python',
                label:{
                  show:true,
                  position: 'insideTopLeft'
                }
              },
              {
                type: 'bar',
                data: yData4,
                name:'C/C++',
                label:{
                  show:true,
                  position: 'insideTopLeft'
                }
              }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        barCharts.setOption(option);
  </script>

6. 折线图

6.1 折线图基本使用

折线图和柱状图基本上是一样的

在这里插入图片描述

var xdata = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月',]
var ydata = [1580, 2198, 3672, 3856, 6978, 8125, 8210, 8186, 7568, 6321, 3890, 2210]


var option = {
    title: {
        text: '2020年销售数据'
    },
    xAxis: {
        type: 'category',
        data: xdata
    },
    yAxis: {},
    series: [
        {
            name: '康师傅',
            type: 'line',
            data: ydata
        }
    ]
}

6.2 通用配置

在这里插入图片描述

var option = {
    title: {
        text: '2020年销售数据'
    },
    xAxis: {
        type: 'category',
        data: xdata
    },
    legend: {
        data: [
            {name: '康师傅'},
            {name: '统一'}
        ]
    },
    tooltip: {},
    toolbox: {
        feature: {
            saveAsImage: {},
            dataZoom:{},
            magicType: {
                type: ['line', 'bar']
            }
        }
    },
    yAxis: {},
    series: [
        {
            name: '康师傅',
            type: 'line',
            data: ydata1
        },
        {
            name: '统一',
            type: 'line',
            data: ydata2
        }
    ]
}

6.2 其他效果

  • 线条控制： series.smooth，折线（false）、平滑曲线（true）
  • 填充风格： series.areaStyle，折线内部的填充风格
    • color： 填充颜色
    • opacity： 透明度
  • 紧挨边缘： xAxis.boundaryGap , 值在y轴上（false），值在中间（true）
var option = {
    title: {
        text: '2020年销售数据'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xdata
    },
    yAxis: {},
    series: [
        {
            name: '康师傅',
            type: 'line',
            data: ydata,
            smooth: true,
            areaStyle: {
                color: 'red',
                opacity: 0.3
            }
        }
    ]
}

7. 饼状图

在这里插入图片描述
实际工作时，我们通常都使用复制/粘贴，修改数据 的方式来使用 echarts


    // 初始化
    var pieCharts = echarts.init(document.getElementById('pie'));
    var data = [
          {value: 122000, name: '18岁以下'},
          {value: 335380, name: '19-28岁'},
          {value: 266892, name: '29-45岁'},  
          {value: 102020, name: '46-65岁'},
          {value: 9782, name: '65岁以上'},
    ]
    var ageAry = ['18岁以下', '19-28岁', '29-45岁', '46-65岁', '65岁以上']
    // 指定图表的配置项和数据
    var option = {
              title: {
                  text: 'App用户年龄层分部图',
                  left: 'center'
              },
              tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              legend: {
                  orient: 'vertical',
                  left: 'left',
                  data: ageAry
              },
              series: [
                  {
                      name: '用户年龄层',
                      type: 'pie',
                      radius: '55%',
                      center: ['50%', '60%'],
                      data:data,
                      emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                      }
                  }
              ]
          };
    // 使用刚指定的配置项和数据显示图表。
        pieCharts.setOption(option);

8. 补：vue中使用Echarts

  1. 创建 Report.vue 组件，并正常显示

  2. 安装 echarts

  3. 在 Report.vue 组件中导入 echarts

  4. 绘制折线图

  5. 发送ajax请求获取数据，再绘制真正的图形

  6. 修改配置项

​ lodash.merge 合并数组 （深度合并）

main.js

// 将echarts对象挂载到Vue对象上
Vue.prototype.$echarts = window.echarts

Report.vue

<template>
  <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>统计报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div id="line" style="width:800px; height:600px">
      </div>
    </el-card>
  </div>
</template>

<script>
// 导入echarts
// import echarts from '../../../public/static/echarts.min.js'
import _ from 'lodash'
export default {
  // data () {},
  // methods: {},
  async mounted () {
    // ajax
    const { data: result } = await this.$http.get('reports/type/1')
    console.log(result.data)
    // 初始化echarts实例
    const lineCharts = this.$echarts.init(document.getElementById('line'))
    // 定义配置项
    const option = {
      xAxis: [
        { boundaryGap: false }
      ]
    }
    // 合并配置项
    const res = _.merge(result.data, option)
    // 使用刚指定的配置项和数据显示图表。
    lineCharts.setOption(res)
  }
}
</script>>
Floatwor青舟
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts数据可视化
FellAsleep的博客
01-07 362
border-image:相关说明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
Echarts简介
qq_44718666的博客
08-25 9475
一.简述数据可视化技术 什么是数据可视化技术 借助图形化的数段，清晰有效的传递和沟通信息，以视觉的方式展现数据，便于用户的认知，偏于图表的样式，相对于文字说明更加直观 科学可视化（出现最早，最成熟） 处理科学数据，面向科学和工程数据方面，研究带有空间坐标和几何信息的三维空间，如何呈现数据中的几何特征 主要面向自然科技中产生数据的建模操作和处理 应用于医疗（透析，CT），科研，航天，天气，生物等技术 信息可视化（更常见，接触更多） 科学可视化演变而来，主要处理非结构化，非几何的数据 金融交易，社交网络，文本数
echarts数据可视化介绍+常用的图表案例分析（值得收藏的干活）
promise466的博客
10-28 8134
Echarts的优点比较明显体积小，免费、上手快，只需要有一些js基础，剩下的就是复制粘贴的事情，而且是国产的东西，文档看起来也比较方便
Echarts数据可视化教程(超详细，持续更新中(1)
最新发布
2401_84418883的博客
04-28 1009
1.什么是数据可视化？把数据以图表(更直观)的形式展现 -->图表2.数据可视化的好处清晰有效地传达与沟通信息更好的观察隐藏在数据中的信息3.数据可视化的的实现方式报表类Excel水晶报表商业智能BIIPower BI编码类(最佳灵活、门槛高)Echarts.jsD3.jsEcharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度 个性化定制的数据可视化图表。
饼图大小调整_这么漂亮的双层饼图，你会做吗？让你工作汇报更出彩！
weixin_39645343的博客
12-24 2010
我们在工作中，经常需要制作图表，特别是饼图，看着一目了然！但是有些朋友还不会制作？和大家分享一下制作双层饼图的方法教程！让你工作汇报更出彩！效果图如下：操作步骤：第一步：插入饼图选中“地区”和“总计”列，然后点击插入——图表——插入饼图或圆环图，之后选择二维饼图即可。第二步：添加数据系列选中图表，右击选择【选择数据】，之后在打开的界面中选择【添加】，在编辑数据系列中重新命名，比如“城市”，之后将【...
ECharts 数据可视化简介与基本使用
qq_64133626的博客
09-18 1377
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。简单来讲就是：ECharts 是一个JS插件，可流畅运行于PC与移动设备，性能优异；兼容性强，兼容当前绝大部分主流浏览器；并能提供很多常用图表，且可定制折线图、柱状图、散点图、饼图、K线图。
php foreach id是否存在数组_10个php编程最容易犯的错误
weixin_39845241的博客
12-19 193
错误1：foreach循环后留下悬挂指针 在foreach循环中，如果我们需要更改迭代的元素或是为了提高效率，运用引用是一个好办法： $arr = array(1,2,3,4); foreach($arr as&$value){ $value = $value *2; } // $arr is now array(2, 4, 6, 8) 这里有个问题很多人会迷糊。错误1：fore...
echarts数据可视化作业
01-14
在本“ECharts数据可视化作业”中，我们将深入探讨ECharts的使用方法以及它在数据可视化的应用。 1. **ECharts基础概念** - **图表类型**：ECharts提供了多种图表类型，如柱状图（bar）、折线图（line）、饼图...
Echarts数据可视化通用模板
07-04
在这个"Echarts数据可视化通用模板"中，我们可以看到一系列针对不同应用场景的示例，包括但不限于大屏设计、物联网统计、运营监控、信用风控、销售分析、大数据展示以及空气污染指数的分析等。 首先，`e017-echarts...
基于ECharts数据可视化大屏案例源码
12-03
在“基于ECharts数据可视化大屏案例源码”中，我们可以学习到以下几个关键知识点： 1. **ECharts基础使用**：了解如何引入ECharts库，设置图表容器，以及初始化图表。这包括配置项的设置，如`title`、`legend`、`...
基于JavaScript的echarts数据可视化大屏设计源码
03-28
**基于JavaScript的ECharts数据可视化大屏设计源码详解** 在大数据时代，数据可视化成为企业理解和展示业务数据的重要工具。ECharts，一个基于JavaScript的开源图表库，因其丰富的图表类型和强大的交互性，广泛应用...
Echarts数据可视化图表案例+数据可视化大屏模板
06-21
18个Echarts数据可视化图表案例，每个案例都有代码注释，简单易懂。 还有三套echarts可视化大屏模板，案例下载后在编辑器内打开html，可以根据需求修改样式和数据，学习echarts绘图，也可以制作新的数据可视化大屏。
echarts 图表无数据/空数据 展示“暂无数据”
热门推荐
细节怪的博客
08-15 2万+
我们从后端获取数据动态渲染图表时，难免会遇到数据为空的情况（虽然实际应用中这样的bug极少遇到），但考虑周全一点也好，看如何实现吧。
ECharts-让数据不再枯燥
X-77
11-29 1904
echarts 玩转数据！让数据不再枯燥！
Echarts图表示例（死数据）
爱吃早餐的程序员
04-30 810
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Echarts</title> <script src="https://libs.cdnjs.net/echarts/4.7.0/echarts.js"></script> <...
用excel制作双层饼图_教你制作好看的excel双层饼状图
weixin_35398679的博客
01-09 1万+
我们平时在使用excel做图标的时候，饼状图的出现率是很高的，今天就教大家怎么做出好看又高级的双层饼状图。图1图一是我做的一张表格，现在要将它变成一张双层饼状图，首先选择品牌这一列，然后按住Ctrl键，选择合计这一列，点击插入里面的饼状图，就会出现下面这个图形。图二出现这个图之后，我们用鼠标点击图片，按鼠标右键，选中选择数据（如图三），出现图四的时候，选择添加，出现图五，点击图五的尖头位置，选择表...
springboot初始化加载数据_小程序 echarts图表初始化与加载动态数据
weixin_39765695的博客
12-14 298
在小程序中，根据需求有时候需要添加多个echarts图表进行动态数据的显示。但是动态数据是异步加载的，不能确定究竟是数据加载完成在前，还是echarts图表初始化完成在前，因此会出现图表上无数据显示控制台却有数据获取的情况发生。使用绑定事件监听函数addEvent（），当完成事件再进行通知callEvent（）可参考例子外部封装方法 function endInitData() { event...
用excel制作双层饼图_Excel中怎么绘制双层饼图?
weixin_30785057的博客
12-24 1091
你还在为Excel双层饼图怎么做而苦恼吗，今天小编教你Excel双层饼图怎么做，让你告别Excel双层饼图怎么做的烦恼。更多Excel经验请关注Excel小新，如果帮到了你，请在上方给个投票谢谢支持。好人一生平安。先顶后看年薪百万，如果帮到了你，帮忙给个好评，这对小编很重要，万分感谢。一、表格数据的选择1、选中表格的数据区域——插入——推荐的图表。2、点击图表工具——设计——选择数据。3、进行图例...
ECharts数据可视化
06-04
很高兴为您解答关于ECharts数据可视化的问题。ECharts是百度开源的一个数据可视化库，它支持多种类型的图表展示，例如折线图、柱状图、饼图等。ECharts提供了丰富的配置项，使得用户可以方便地定制自己想要的图表...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值