常见echarts(详细配置代码见git开源项目)

一麻袋小猫

已于 2023-09-21 10:25:42 修改

阅读量565

点赞数

CC 4.0 BY-SA版权

分类专栏：工具文章标签： echarts 开源前端

于 2022-09-26 14:19:04 首次发布

本文链接：https://blog.youkuaiyun.com/Zmongo/article/details/127052638

工具专栏收录该内容

31 篇文章

订阅专栏

本文介绍了ECharts的坐标轴配置方法，包括动态设置固定间隔和段数，并解决了安装过程中出现的错误。同时，还提供了饼图、折线图等多种图表类型的配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

地址：整理后更新
根据编号对应配置项

echarts安装遇到的问题

Uncaught Error: Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open 'D:\ProgrammingHero\foodie\client\node_modules\core-js-pure\modules\esnext.global-this.js'
    at ./node_modules/core-js-pure/modules/esnext.global-this.js (global-this.js:6:1)

npm install 之后报错，把node-modules删除，重新npm i 即可

给坐标轴动态设置固定间隔或固定的段数

min: 最小值 max：最大值 split：固定间隔
split = max-min <= 6 ? 1 : max - min <= 12 ? 2 : max - min <= 24 ? 4 : 1;
xAxis: { 
	  min: min,
      max: max, // 最大值
      splitNumber: (max - min) / split, // 坐标轴的分割段数(预估值)
      interval: split, // 强制设置坐标轴分割间隔
}

min: 最小值 max：最大值 split：分割段数
split = max-min <= 6 ? 1 : max - min <= 12 ? 2 : max - min <= 24 ? 4 : 1;
xAxis: { 
	  min: min,
      max: max, // 最大值
      splitNumber: split, // 坐标轴的分割段数(预估值)
      interval: (max - min) / split, // 强制设置坐标轴分割间隔
}

** 示例：**

解决treemap tooltip 不生效

tooltip: {
      show: true,
      trigger: "item"
    },

1.1饼图

在这里插入图片描述

1.2折线图

在这里插入图片描述

1.3柱状图

在这里插入图片描述

1.4双纵轴折现

在这里插入图片描述

1.5柱状图

在这里插入图片描述

1.6多分类柱状图

在这里插入图片描述

1.7折线图

在这里插入图片描述

1.8实时折线图

在这里插入图片描述

1.9百分比面积堆积图

在这里插入图片描述

2.0面积堆积图

在这里插入图片描述

3.0雷达图

在这里插入图片描述

3.1环状图

在这里插入图片描述

chart.js 使用

Line图表中，position: ‘nearest’，不生效的解决办法
options增加interaction

interaction: {
    mode: 'nearest',
    intersect: false
  },
  plugins: {
    tooltip: {
      position: 'nearest'
    }
  }

多个坐标轴，让一组数据，在同一个点全部显示(其实是按照index显示，要注意需求场景)

 responsive: true,
                    interaction: {
                      mode: 'index',
                      intersect: false,
                    },
                    stacked: false,
                    plugins: {
                      title: {
                        display: true,
                      },
                    },