栏目一:使用echarts绘制简单图形

栏目一:使用echarts绘制简单图形

  • 前言
  • [1. 在线编辑图形](#1. 在线编辑图形)
    • [1.1 折线图](#1.1 折线图)
    • [1.2 柱状图](#1.2 柱状图)
    • [1.3 扇形图](#1.3 扇形图)
  • [2. 本地绘制图表](#2. 本地绘制图表)
    • [2.1 下载echarts.min.js](#2.1 下载echarts.min.js)
    • [2.2 创建一个简单的图形](#2.2 创建一个简单的图形)

前言

Echarts是一款基于JavaScript的可视化图表库。它提供了丰富的图表类型和交互功能,可以用于在网页中展示各种数据。Echarts支持多种数据格式的转换和操作,可以轻松地将数据转换为图表所需的格式,并且可以对图表进行个性化的配置和设置。Echarts还支持响应式布局,可以根据不同的设备和屏幕大小自动调整图表的显示效果。Echarts的文档齐全,使用简便,并且具有强大的扩展性,可以满足各种复杂的数据可视化需求。

官网链接:https://echarts.apache.org/zh/index.html

快速入门:https://echarts.apache.org/handbook/zh/get-started/

本章节将从在线编辑图表和本地绘制图表两个方面进行介绍

1. 在线编辑图形

1.1 折线图

以下是官网的一个简单示例

代码介绍

// 注释说明:

// 1. 这个配置对象定义了一个简单的折线图,其中X轴是周几('Mon'到'Sun'),Y轴是对应的数值。

// 2. xAxis 定义了X轴的基本属性,包括轴的类型(类目轴)和轴上的数据(周一至周日)。

// 3. yAxis 定义了Y轴的基本属性,即轴的类型(数值轴)。

// 4. series 是图表的核心,定义了图表的数据和类型。这里只定义了一个系列,类型为折线图,数据为一周内每天的某个数值。

javascript 复制代码
// ECharts 配置对象  
option = {  
  // X 轴配置  
  xAxis: {  
    // X轴类型,'category' 表明是类目轴,适用于离散的类目数据  
    type: 'category',  
    // X轴上的数据,数组项表示类目名  
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  
  },  
  // Y 轴配置  
  yAxis: {  
    // Y轴类型,'value' 表明是数值轴,适用于连续数据  
    type: 'value'  
  },  
  // 系列列表,每个系列通过 type 决定渲染成哪种图表  
  series: [  
    {  
      // 数据数组,数组项通常为具体的数据值  
      data: [150, 230, 224, 218, 135, 147, 260],  
      // 图表类型,'line' 表示折线图  
      type: 'line'  
    }  
  ]  
};  

1.2 柱状图

简单柱状图展示

代码介绍

// 注释说明:

// 1. 这个配置对象定义了一个简单的柱状图,其中X轴是周几('Mon'到'Sun'),Y轴是对应的数值。

// 2. xAxis 定义了X轴的基本属性,包括轴的类型(类目轴)和轴上的数据(周一至周日)。

// 3. yAxis 定义了Y轴的基本属性,即轴的类型(数值轴)。

// 4. series 是图表的核心,定义了图表的数据和类型。这里定义了一个系列,类型为柱状图。

// 5. 在 series 的 data 数组中,周二的数据被设置为一个对象,其中不仅包含了值(value: 200),还包含了数据点的样式(itemStyle),特别地将颜色设置为红色(#a90000)。

// 6. 其余数据点直接使用数值表示,没有额外设置样式,将使用默认的样式渲染。

javascript 复制代码
// ECharts 配置对象  
option = {  
  // X 轴配置  
  xAxis: {  
    // X轴类型,'category' 表明是类目轴,适用于离散的类目数据  
    type: 'category',  
    // X轴上的数据,数组项表示类目名  
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  
  },  
  // Y 轴配置  
  yAxis: {  
    // Y轴类型,'value' 表明是数值轴,适用于连续数据  
    type: 'value'  
  },  
  // 系列列表,每个系列通过 type 决定渲染成哪种图表  
  series: [  
    {  
      // 数据数组,数组项通常为具体的数据值,但也可以是包含值和样式的对象  
      data: [  
        120,                 // 周一的数据  
        {  
          value: 200,        // 周二的数据值  
          itemStyle: {       // 数据点的样式配置  
            color: '#a90000' // 将周二的数据点颜色设置为红色  
          }  
        },  
        150,                 // 周三的数据  
        80,                  // 周四的数据  
        70,                  // 周五的数据  
        110,                 // 周六的数据  
        130                  // 周日的数据  
      ],  
      // 图表类型,'bar' 表示柱状图  
      type: 'bar'  
    }  
  ]  
};  

1.3 扇形图

扇形图示例

代码介绍

// 注释说明:

// 1. 这个配置对象定义了一个饼图,展示了不同来源的访问量。

// 2. tooltip 组件用于在鼠标悬停时显示更详细的数据信息。

// 3. legend 组件用于显示图例,方便用户通过点击图例来筛选显示的数据系列。

// 4. series 定义了饼图的具体配置,包括名称、类型、半径范围、扇区样式、标签设置、高亮状态样式以及数据内容。

// 5. 在 series 的 data 数组中,每个对象代表一个扇区,包含数值(value)和名称(name)。

// 6. 注意:由于 label 的 show 属性被设置为 false,所以默认的标签不会显示,只有在扇区被高亮(如鼠标悬停)时,通过 emphasis 设置的标签才会显示。

javascript 复制代码
// ECharts 配置对象  
option = {  
  // 提示框组件,用于展示更详细的数据信息  
  tooltip: {  
    // 触发类型,'item' 表示数据项图形触发,主要在类目轴(category axis)上使用  
    trigger: 'item'  
  },  
  // 图例组件,用于展示系列的标记(symbol)、颜色和名字  
  legend: {  
    // 图例组件距离容器上边界的距离,单位可以是像素(px)或百分比(%)  
    top: '5%',  
    // 图例组件距离容器左边界的距离,这里设置为居中  
    left: 'center'  
  },  
  // 系列列表,每个系列通过 type 决定渲染成哪种图表  
  series: [  
    {  
      // 系列名称,用于 tooltip 的显示,legend 的图例筛选  
      name: 'Access From',  
      // 图表类型,'pie' 表示饼图  
      type: 'pie',  
      // 饼图的半径范围,数组的第一项是内半径,第二项是外半径  
      radius: ['40%', '70%'],  
      // 是否启用标签的防重叠策略,这里设置为 false 表示不启用  
      avoidLabelOverlap: false,  
      // 扇形的圆角角度,用于绘制圆角的扇形  
      padAngle: 5,  
      // 扇形的样式设置  
      itemStyle: {  
        // 扇形的边框圆角  
        borderRadius: 10  
      },  
      // 标签的显示设置  
      label: {  
        // 是否显示标签  
        show: false,  
        // 标签的位置  
        position: 'center' // 注意:由于 show 设置为 false,这里的位置设置实际上不会生效  
      },  
      // 高亮状态的样式设置  
      emphasis: {  
        // 高亮时标签的显示设置  
        label: {  
          // 是否显示标签  
          show: true,  
          // 标签的字体大小  
          fontSize: 40,  
          // 标签的字体粗细  
          fontWeight: 'bold'  
        }  
      },  
      // 是否显示扇区到标签的连线  
      labelLine: {  
        show: false  
      },  
      // 数据内容数组,表示每个扇区的数值和名称  
      data: [  
        { value: 1048, name: 'Search Engine' }, // 搜索引擎来源  
        { value: 735, name: 'Direct' },         // 直接访问  
        { value: 580, name: 'Email' },          // 邮件营销  
        { value: 484, name: 'Union Ads' },      // 联盟广告  
        { value: 300, name: 'Video Ads' }       // 视频广告  
      ]  
    }  
  ]  
};  

2. 本地绘制图表

2.1 下载echarts.min.js

下载链接:https://gitee.com/hope_xi/common-js-files/blob/master/echarts.min.js#

选择echarts.min.js下载

如果觉得下载麻烦,也可以直接复制echarts.min.js代码,在本地创建echarts.min.js文件后把代码拷贝进取,保存。

2.2 创建一个简单的图形

常见一个demo.html文件,放入下方代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="../js/echarts.min.js"></script>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
            borderRadius: 10
        },
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
        ]
        }
    ]
    };

    option && myChart.setOption(option);
</script>
</html>

打开页面,便可看到echart图表

接下来就可以根据自己的项目选择合适的图表进行展示了。

具体图形设置可以观看echart配置项手册

后续我也会分享一些自己平时用到的好看的图表。

相关推荐
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具6 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端