Echarts使用

介绍

ECharts 是一个强大的,基于 JavaScript 的开源数据可视化库,适用于创建多种类型的图表,满足广泛的业务需求。它由百度团队开发并维护,后来捐赠给了 Apache 软件基金会,并已在2021年从孵化项目毕业,成为Apache顶级项目。

echarts支持折线图、柱状图、散点图、饼图、K线图、盒须图、地图、热力图、线图、关系图、树状图、旭日图、平行坐标等多种图表,几乎覆盖所有常见的数据可视化需求。

可以再前端开发,手机APP,论文,组会各种可视化场景中使用到

比如:VUE3 显示Echarts百度地图,等各种应用。

echarts官网:https://echarts.apache.org/examples/zh/index.html#chart-type-bar

非常精彩的一个网站。

绘图指南

我这里就用他来开开组会绘图了,顺便记录一下平时的配置代码。需要用到的时,我就直接打开链接直接修改网页代码就行。

绘制柱状图

绘图地址:https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category

绘图效果:

绘图代码:

javascript 复制代码
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: { textStyle: { fontSize: 40 }},
  grid: {
    left: '4%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    min:95,
    max:100,
    axisLabel: {fontSize: 20}
  },
  yAxis: {
    type: 'category',
    data: ['准确率', '特异性', '敏感度'],
    axisLabel: {fontSize: 40}
  },
  series: [
    {
      name: '位置嵌入',
      type: 'bar',
      data: [97.24, 97.47, 97.12]
    },
    {
      name: 'Patch嵌入',
      type: 'bar',
      data: [97.90, 98.12, 97.70]
    },
    {
      name: '时间嵌入',
      type: 'bar',
      data: [97.94, 98.43, 97.63]
    },
    {
      name: 'WPE嵌入',
      type: 'bar',
      data: [98.50, 99.07, 98.14]
    }
  ]
};
相关推荐
夜焱辰8 小时前
浏览器端 Agent 的文件版本管理:不用 Git,基于 OPFS + SQLite 自己造了一个
前端·人工智能
梦想的颜色8 小时前
TypeScript 完全指南(下):从类型体操到生产级配置
前端·javascript·typescript
Hi~晴天大圣9 小时前
npm使用介绍
前端·npm·node.js
888CC++10 小时前
如何在 C 语言中进行程序调试?
前端·javascript·算法
喵个咪10 小时前
基于 Taro 的 Headless CMS 多端前端架构:技术解析与二次开发导引
前端·react.js·taro
狂炫冰美式10 小时前
你还在古法PPT吗,试试HTML呢?免费编辑导出工具给 xdm 放这了
前端·后端·github
万少11 小时前
未来组织的分水岭不是员工数量,而是人才密度
前端·后端·面试
任磊abc11 小时前
nextjs16配置eslint+prettier
前端·eslint·nextjs·prettier
x***r15111 小时前
Another-Redis-Desktop-Manager.1.3.7安装步骤详解(附Redis可视化连接与Key管理教程)
前端·bootstrap·html
Captaincc11 小时前
你真的知道自己把 AI 用在了哪里吗?这是 Vibe Usage 想回答的问题
前端·vibecoding