当前位置：首页 > news >正文

echarts各种踩坑记录

news 2025/5/23 7:43:04

echarts各种踩坑

文章目录

1.图表面积没占满
2 data想展示，除了显示在图表上外的附加数据
3 设置最大gap间距分5行，最大显示100%（bar图，折线图）
4 line的图不要换行
5 bar的图需要hover后覆盖全部框显示淡淡灰色
7 渐变背景色(虽然感觉可以更容易)
8 line图的渐变
9 折线图里，不连续的点也要连起来

1.图表面积没占满

这个非常头大，官方也不好好说明怎么办（还是我的阅读效率太低？？？？）
如果是饼图，设置面积，面积越大越占满，默认是缩小的

 type: 'pie',
radius: ['90%'], 或者radius: ['65%', '90%'],

如果是bar或者radius，用grid，百分比就是空出来的宽度，而且一定要containLabel 包含标签的，不然显示不全标签，啊

grid: {top: '15%',bottom: '15%',left: '0%',right: '0%',containLabel: true,},

2 data想展示，除了显示在图表上外的附加数据

一般来说，data是直接给予一个数组，都是数组，但是实际上也可以展示其他的数据，这主要是给tooltip用的，
比如value: xxx, number: xxx 直接赋值，展示的是展示出来value，其他的其他自会处理

 const newItem = aaaaaaa?.map((item) => {return {value: item.exist? item.aa? item.aa * 100: 0: undefined,...item,};});return newItem;

可以直接往外面来个getdata，返回具体的值，这里在tooltip这里就比较麻烦，需要定义好类型。

     formatter: function (params) {const data = params as CallbackDataParams;const _data = data.data as 你自己定义的那个item类型;return `

3 设置最大gap间距分5行，最大显示100%（bar图，折线图）

注意xAxis必须得和y一起用，不然就报错

xAxis: {type: 'category',data:[1,2,3,4]},yAxis: {type: 'value',axisLabel: {formatter: '{value}%',},max: 100,splitNumber: 5,},

4 line的图不要换行

xAxis: {type: 'category',data: xAxisData(),axisLabel: {interval: 0,},},

5 bar的图需要hover后覆盖全部框显示淡淡灰色

 tooltip: {borderWidth: 0,borderColor: 'transparent',trigger: 'axis',showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位mspadding: 0,axisPointer: {type: 'shadow',crossStyle: {width: 30,},shadowStyle: {color: 'rgba(0, 0, 0, 0.06)',},},

7 渐变背景色(虽然感觉可以更容易)

一定要注意，这个color要在serires的itemstyle的color里面，否则没法生效的啊啊啊啊啊啊

  series: {data: data,barWidth: 20,type: 'bar',itemStyle: {borderWidth: 2,color: {type: 'linear',x: 1,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, color: #111111' },{ offset: 1, color: #222222' },],},},},

8 line图的渐变

area时面积，item是小圆点，line是连线。
areaStyle: {
origin: ‘start’,
color: {
type: ‘linear’,
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: ‘rgba(212, 56, 13, 0.15)’ },
{ offset: 1, color: ‘rgba(212, 56, 13, 0)’ },
],
},
},
itemStyle: {
borderWidth: 2,
borderColor: ‘rgba(237, 111, 46, 1)’,
color: ‘transparent’,
},
lineStyle: {
color: ‘rgba(237, 111, 46, 1)’,
},

9 折线图里，不连续的点也要连起来

connectNulls: true,
需要在series那一栏里。

PS： echarts一定一定要按需引入, 官方文档里有


export type EChartsOption = echarts.ComposeOption<| TitleComponentOption| TooltipComponentOption| LegendComponentOption| PieSeriesOption| LinesSeriesOption| LineSeriesOption| BarSeriesOption
>;
const EchartsDiv = ({ option }: { option: EChartsOption }) => {echarts.use([TitleComponent,TooltipComponent,LegendComponent,PieChart,LineChart,BarChart,CanvasRenderer,LabelLayout,GridComponent,UniversalTransition,]);const PieRef = useRef<HTMLDivElement | null>(null);useEffect(() => {const myChart = echarts.init(PieRef.current);myChart?.setOption(option);return () => {myChart.dispose();};}, [option.series]);return <div className="w-full h-full" ref={PieRef}></div>;
};export default EchartsDiv;

其他替代方案
chart.js 感觉更友好一点？？？？？

查看全文

http://www.xdnf.cn/news/592147.html