地址:整理后更新
根据编号对应配置项
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,
},
},