Web开发：小结Apache Echarts官网上常用的配置项（前端可视化图表）

原创 已于 2025-04-24 13:58:05 修改 · 395 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #echarts #javascript

于 2024-08-01 21:31:56 首次发布

目录

一、须知

二、Title

三、 Legend

四、Grid

五、yAxis

六、Tooltip

 七、axisPointer

八、toolbox

九、rich（以title和label为例）

一、须知

配置项官方文档：点此进入。

我总结了比较常用的功能，写进注释里面，附带链接分享和效果图展示。（更新中....）

二、Title

option = {
  title: {
    text: 'Weekly Sales',//标题文本
    textStyle: {
      color: '#333',  // 标题文本颜色
      fontWeight: 'bold',  // 标题文本字体粗细，可选'normal','bold','bolder','lighter'
      fontSize: 18,  // 标题文本字体大小
    },
    subtext: 'Unit: Pieces',  // 副标题文本内容
    subtextStyle: {
      color: '#aaa',  // 副标题文本颜色
      fontStyle: 'normal',  // 副标题文本字体风格
      fontWeight: 'normal',  // 副标题文本字体粗细
      fontSize: 14  // 副标题文本字体大小
    },
    textAlign: 'auto',  // 标题文本水平对齐方式，可选值：'auto'、'left'、'right'、'center'
    padding: [10, 10, 10, 10],  // 标题的内边距，上右下左
    itemGap: 10,  // 主副标题之间的间距
    left: 'center',  // 标题组件离容器左侧的距离，可选'left', 'center', 'right'，20，'20%'
    top:'top'  // 标题组件离容器顶部的距离，可选'top', 'middle', 'bottom'，20，'20%'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

【分享链接：点此进入】

【实现效果】

【备注】padding://上、右、下、左     上指：本元素距离上个元素多远，左右指：左右是调整位置的（距离左/右多远），下指：下面的元素距离本元素多远

三、 Legend

option = {
  title: {
    text: 'Referer of a Website',
    left: 'center'
  },
  tooltip: {
    trigger: 'item', // 提示框触发类型为数据项触发
    formatter: '{a} <br/>{b} : {c} ({d}%)' // 提示框内容格式器:显示series的name、data的name、data的value和百分比
  },
  legend: {
    orient: 'vertical', // 图例布局方式为垂直，可选'horizontal','vertical'
    left: 'left', // 图例组件离容器左侧的距离，可选'left', 'center', 'right'
    itemHeight: 14, // 图例的高
    itemWidth: 14, // 图例的宽
    itemGap: 20, // 图例之间的间隔
    padding: [40, 20, 10, 5], // 上、右、下、左的内边距（移动位置）
    textStyle: {
      color: '#333', // 图例文字颜色
      fontSize: 12 // 图例文字大小
    },
    data: ['Search Engine', 'Direct', 'Email', 'Union Ads', 'Video Ads'] // 图例数据，与series中的name对应
  },
  series: [
    {
      name: 'Access From',
      type: 'pie', // 图表类型为饼图
      radius: '50%', // 饼图半径，可设置为相对的百分比或绝对的像素值
      center: ['50%', '60%'], // 饼图的中心（圆心）坐标，支持绝对像素和相对百分比
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      label: {
        show: true, // 是否显示标签
        formatter: '{b} : {c} ({d}%)', // 显示data的name、data的value和百分比
        fontSize: 12 // 标签文字大小
      },
      labelLine: {
        show: true // 是否显示标签的视觉引导线
      },
      emphasis: {//鼠标悬浮阴影
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      animationType: 'scale', // 数据更新动画的类型
      animationEasing: 'elasticOut', // 数据更新动画的缓动效果
      animationDelay: function (idx) { // 数据更新动画的延迟
        return idx * 50;
      }
    }
  ]
};

【分享链接】

【实现效果】

四、Grid

option = {
  grid: {
    show: true,
    left: '10%', // 网格左边距
    top: 60, // 网格顶边距
    borderWidth: 1 // 网格边框宽度
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    show: true, // 显示提示框
    trigger: 'axis', // 触发类型，鼠标悬停显示提示框
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'line' // 指示器类型为直线
    }
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
};

【实现链接】 

五、yAxis

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',  // 设置 Y 轴类型为数值轴
    offset: 10,  // Y 轴距离图形的长度
    name: 'Sales',  // Y 轴名称
    nameLocation: 'center',  // Y 轴名称的位置，可以是 'start', 'center', 'end'
    nameTextStyle: {  // Y 轴名称的样式
      color: '#333',
      fontSize: 14
    },
    nameGap: 40,  // Y 轴名称与轴线之间的距离
    nameRotate: 0,  // Y 轴名称的旋转角度
    interval: 50,  // 强制设置坐标轴分割间隔
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line' 
    }
  ]
};

【链接】

【效果】

六、Tooltip

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',  // 设置触发类型为 item，即鼠标悬浮在图形元素上时触发，饼图、散点图选'item'，柱形图、折线图选'axis'
    // 提示框内容格式化字符串，{b} 代表数据项名称，{c} 代表数值，{d} 代表百分比
    formatter: '{a}<br>{b}: {c} ({d}%})' //若不设置则显示默认值
  },
  legend: {
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '40%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' }
      ]
    }
  ]
};

【链接】

【效果】

 七、axisPointer

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      symbolSize: 20,
      data: [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33],
        [14.0, 7.66],
        [13.4, 6.81],
        [10.0, 6.33]
      ],
      type: 'scatter'
    }
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross' // 设置axisPointer的类型为十字准星，可选：'line' 直线指示器,'shadow' 阴影指示器,'cross' 十字准星指示器。
    }
  },
  axisPointer: {
    label: {
      precision: 2, // 标签显示的小数精度
      textStyle: {
        color: '#FFF', // 标签文字颜色
        fontSize: 12, // 标签文字大小
      }
    },
    lineStyle: {
      color: '#555', // axisPointer线的颜色
      width: 1, // axisPointer线的宽度
      type: 'dashed' // axisPointer线的类型，可选'solid','dashed','dotted'
    }
  }
};

【链接】

【效果】 

八、toolbox

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ],
  toolbox: {
    feature: {
      saveAsImage: {}, // 添加保存为图片按钮
      restore: {},     // 添加重置按钮，用于还原初始状态
      dataZoom: {},    // 添加数据区域缩放按钮
      dataView: {},    // 添加数据视图按钮，可以查看数据详细信息
      magicType: {     // 添加切换图表类型按钮
        type: ['line', 'bar']  // 可切换的图表类型，这里包括折线图和柱状图
      }
    }
  }
};

【链接】

【效果】

九、rich（以title和label为例）

let bgColor = "#fff";
let color = ["#0E7CE2", "#FF8352", "#E271DE", "#F8456B", "#00FFFF", "#4AEAB0"];
let echartData = [
  {
    name: "A类",
    value: "20",
  },
  {
    name: "B类",
    value: "80",
  }
];


let total = 200

option = {
  backgroundColor: bgColor,
  color: color,
  title: [
    {
      text: `{s1|共}\n{val|${total}}\n{s1|个}`,
      top: "center",
      left: "center",
      textStyle: {
        rich: {
          s1: {
            fontSize: 15,
            fontWeight: "normal",
            color: "#666666",
            padding: [10, 0],
          },
          val: {
            fontSize: 32,
            fontWeight: "bold",
            color: "#333333",
          },
        },
      },
    },
    {
      text: "类型统计",
      left: 'center'
    },
  ],
  series: [
    {
      type: "pie",
      radius: ["45%", "60%"],
      center: ["50%", "50%"],
      data: echartData,
      hoverAnimation: false,
      itemStyle: {
        normal: {
          borderColor: bgColor,
          borderWidth: 2,
        },
      },
      label: {
        normal: {
          formatter: (params) => {
            return (
              `{icon|●}{name|${params.name}}{value|${params.value}%}`
            );
          },

          rich: {
            icon: {
              fontSize: 16,
            },
            name: {
              fontSize: 14,
              padding: [0, 10, 0, 4],
              color: "#666666",
            },
            value: {
              fontSize: 18,
              fontWeight: "bold",
              color: "#333333",
            },
          },
        },
      },
    },
  ],
};

【链接】 

【效果】

【说明】：可以调节s1 val的样式，使得文本内容获得改变

`{s1|共}\n{val|${total}}\n{s1|个}`

样式指定： 

 textStyle: {
        rich: {
          s1: {
            fontSize: 15,
            fontWeight: "normal",
            color: "#666666",
            padding: [10, 0],
          },
          val: {
            fontSize: 32,
            fontWeight: "bold",
            color: "#333333",
          },
        }

十、MarkLine标线位置

var topWidth = 30
var leftWidth = 40
var rightWidth = 50
var bottomWidth = 60
var xdata = [0,1,2,3,4,5,6,7]
var ydata = [150, 230, 224, 218, 135, 147, 260,130]
var width1 = (myChart.getWidth() - leftWidth -rightWidth) / Math.max(...xdata) //横坐标 一个格子的宽度：(总宽 - 左右两边)/横坐标最大值
var position1 =  5 * width1 + leftWidth //标线x像素坐标 = 格子宽度 * 标线位置 + 左边距 【可通过调整这个改变标线位置】
var height1 = (myChart.getHeight() -topWidth-bottomWidth) / Math.max(...ydata) //纵坐标 一个格子的宽度：(总高 - 上下两边)/纵坐标最大值
var position2 =  Math.max(...ydata) * height1 + topWidth //标线y像素坐标 = 格子宽度 * 标线位置 + 上边距
var option = {
    grid: {
      top: topWidth,
      left: leftWidth,
      right: rightWidth,
      bottom: bottomWidth
    },
  xAxis: {
    type: 'category',
    data: xdata,
    boundaryGap: false,//让数字落在刻度上
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: ydata,
      type: 'line',
      markLine: {
        symbol: 'none',
        lineStyle:{color: '#000000'},
        label:{color: '#000000'},
        data: [
          [
            {
              name: '标签1',//上面的点坐标
              x: position1,
              y: position2
            },
            {
              x: position1,//下面的点坐标
              y: topWidth
            }
          ]
        ]
      }
    }
  ]
};

 实现链接

十一、组合图

1.总分关系

var option = {
    color:["#7179CB","#4CCEFE"],
    legend: {
        data: ["总量", "分量"],
    },
    tooltip: {},
    xAxis: {
        data: ['a','b','c','d']
    },
    yAxis: {
        splitArea: {show: false}
    },

    series: [
        {
            barWidth: 20,
            data:  [47, 59, 95, 74,],
            name: "总量",
            type: "bar",
        },
        {
            barGap: "-100%", /*这里设置包含关系，只需要这一句话*/
            barWidth: 20,
            data: [27, 24, 43, 10, ],
            name: "分量",
            type: "bar"
        }
    ]
};
myChart.setOption(option, true);

实现 

2.对比关系

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'bar'
    },
    {
      data: [140, 250, 204, 118, 125, 197, 200],
      type: 'bar'
    },
  ]
};

实现 

 

 

前端数据可视化—Echart——笔记整理
Thaley的博客
02-03 3468
前端数据可视化Echart——笔记整理（黑马课程）
web前端技术不断迭代，我们如何突破？
在线学习web前端开发教程
12-30 1423
进入 2019 年，大前端技术生态似乎进入到了一个相对稳定的环境，React 在 2013 年发布至今已经 6 年时间了，Vue 1.0 在 2015 年发布，至今也有 4 年时间了。 整个业界在前端框架不断迭代中，也寻找到了许多突破方向，例如跨平台中的 RN、Flutter，服务端 GraphQL、Serverless，前端和客户端的融合越来越紧密，前端在 Node 和 Electron 的加持...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
wuyxinu的博客
02-13 5952
数据可视化-echarts入门、常见图表案例及项目案例 一、简介 一、数据可视化简介 什么是数据可视化？ 数据可视化是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析；主要是借助于图形化手段，清晰有效地传达与沟通信息。 二、echarts简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备
ECharts数据可视化（上）
江南、寻你的博客
03-01 2056
数据可视化介绍、Echarts的基本使用以及高级使用学习
Echarts+大屏
不愧是暮言的博客
02-20 5742
通过网店运营的销售数据，分别从各月的销售情况、各产品销售情况、各地区销售情况、各省份销售情况及各产品经理的销售情况进行可视化。1、根据给定初步方案制定详细方案根据案例需求，按照大数据可视化流程的实施步骤进行实验方案的制订。主要包括但不限于：数据如何读取？如何处理？如何进行页面的整体设计？需要用那些图表？如何实现交互？如何发现问题与解决问题等。2、数据读取和处理选择合适的方式读取和处理网店运营数据。3、页面设计和图表选择利用格式塔理论、色彩搭配理论以及数据可视化设计原则与技巧，进行页面的整体设计。将页面划分成
Java Web可视化实践项目
二哈喇子！
04-03 990
Java Web可视化实践指导书
python flask + js ajax + echarts 53万条招聘信息可视化系统的渣实现
JCPser的博客
03-07 3561
（从0到1非常详细步骤）flask+ajax+echarts 53万条招聘信息可视化系统的实现 本篇blog默认：您已经入门echarts、html、js、json、python，知道一些大概的东西，但是具体细节部分需要上网查找资料解决。如果您满足上述条件，那么这篇博客是适合您的 由于编码时间限制，本篇blog涉及的代码可能存在很多的不严谨，有问题的地方还请大家不吝赐教。 交互提示： 最下面的分布柱状图和右上角的平行坐标系无内对外交互 地图无外对内交互 词云既有内对外交互，也有外对内交互
基于Python+数据可视化大屏+大数据爬虫的短视频内容理解与可视化推荐平台设计和实现(源码+LW+部署讲解)
java李阳勇的博客
09-13 6993
短视频内容理解与推荐系统是针对短视频平台上海量视频内容进行理解、分类、推荐和个性化服务的一种智能化系统。在当今数字娱乐时代，短视频已成为人们日常生活中不可或缺的一部分，而短视频内容理解与推荐系统的研究和应用对于优化用户体验、提高平台活跃度具有重要的背景和意义。了解其研究背景。随着移动互联网的普及和智能手机的普及，短视频平台如今已经成为人们获取信息、娱乐放松的重要途径。然而，面对海量的视频内容，用户往往面临信息过载和选择困难的问题。
数据可视化项目
m0_66506641的博客
09-11 539
数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。完成该项目需要具备以下知识：- div + css 布局- flex 布局- css3动画- css3渐变- css3边框图片- 原生js + jquery 使用- rem适配- **echarts基础**粗略代码统计：- css 580行- html 450行- js 400行 (有效)
基于大数据爬虫+数据可视化大屏+Python的广东省人口流动数据分析设计和实现(源码+论文+部署文档等)
热门推荐
java李阳勇的博客
09-02 1万+
广东省人口流动数据分析项目旨在通过Python技术对广东省的人口流动数据进行深入分析，以揭示人口流动的规律和趋势。该项目将收集广东省各地市的人口流动数据，包括流入人口、流出人口、常住人口等指标，并利用Python的数据处理和分析工具对这些数据进行处理和挖掘。通过对数据的可视化展示，可以直观地了解广东省各地区的人口流动情况，为政府决策提供科学依据。此外，该项目还将探索人口流动与经济发展、城市化进程等因素之间的关系，为制定相应的人口政策和城市规划提供参考。
数据可视化专家：在Elsevier模板中完美展示图表
本文首先介绍了数据可视化的基础理论，随后详细阐述了Elsevier模板中图表的展示规范和制作要点，以及如何选择合适的图表类型以适应不同的学术需求。通过分析具体的实践案例，本文展示了如何在Elsevier模板中集成高...
01 【介绍 使用步骤 引入方式 基础配置】
DSelegent的博客
08-22 324
01 【介绍 使用步骤 引入方式 基础配置】
Vue.js 数据可视化与Word整合：同步展现图形与数据的新方法
本文综合探讨了Vue.js在数据可视化与Word文档处理方面的应用，涵盖了基础概念、结构理解、交互机制、数据同步、动态展示以及优化策略。首先，介绍了Vue.js在数据可视化中的基本使用方法和优势。随后，深入分析了Word...
css的white-space: pre
qq_51035159的博客
08-22 245
简单来说，这个组件的核心就是让用户能够粘贴任何文本内容（特别是配置文件、JSON等），并且保证粘贴的内容格式完全不变，然后可以原样发送给后端处理。- white-space: pre ：这是最关键的CSS属性，确保所有空格、制表符、换行符都被保留。- 用户粘贴的内容会完整存储在 inputJson.value 中，包括所有格式字符。- 使用Vue3的 v-model="inputJson" 实现双向数据绑定。- wrap="off" ：防止浏览器自动换行，保持原始的行结构。- 聚焦时的视觉反馈。
Vue 自定义指令
前端小巷子的博客
08-20 520
在 Vue 中，组件负责“可见”的 UI，自定义指令则负责“不可见”的底层 DOM 行为。当你需要直接操作节点、监听第三方库、或封装浏览器原生 API 时，指令往往比组件更轻量、更灵活。Vue 为自定义指令设计了五条钩子函数，覆盖从首次绑定到最终解绑的完整生存周期。
前端AI工具——TRAE
最新发布
2301_80841939的博客
08-22 407
Trae 是一款直接与 Cursor 形成竞争的、由中国团队开发的AI编程助手。它同样采用基于Visual Studio Code核心的编辑器，深度集成了AI功能。
前端别名与环境变量使用
m0_51511868的博客
08-21 650
wp:heading。
构建现代化电商网站：前端开发实战与代码解析
yzx991013的博客
08-21 1243
本文介绍了电商网站前端开发的核心技术与实践方案。主要内容包括：1）电商网站必备功能模块（商品展示、搜索过滤、购物车、用户系统）；2）推荐技术栈（React/Vue、TailwindCSS等）；3）通过代码示例详细演示了商品卡片组件、商品筛选功能和购物车系统的实现；4）提出响应式设计和性能优化建议（图片懒加载、代码分割等）。文章强调组件化开发、状态管理和持续优化是构建高质量电商平台的关键，为开发者提供了可直接应用的实用解决方案。
人工智能驱动的现代电商前端开发：从基础到智能体验
yzx991013的博客
08-21 826
本文介绍了AI技术在电商前端开发中的应用实践，包含代码示例和技术方案。主要涵盖：1）基于用户行为的个性化推荐系统实现；2）智能搜索与自动完成功能开发；3）视觉搜索和图像识别技术集成；4）智能客服聊天助手构建。文章重点讲解了性能优化策略，包括模型懒加载、智能预加载和优雅降级方案，强调在保证用户体验的前提下实现AI功能。这些技术方案可以帮助开发者构建更智能、个性化的现代电商平台，同时提供了处理AI服务不可用时的备选方案。
ECharts可视化库：兼容多浏览器的前端图表
开发者只需要通过简单的配置即可创建出功能丰富的图表，大大降低了前端开发者在数据可视化方面的开发难度。此外，ECharts还拥有大量的官方文档和示例，帮助开发者快速上手和深入学习。 ECharts由百度团队维护并开源...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值