ECharts
每一天,每一步
相信自己,你可以的
展开
-
echarts绘制多条刻度线仪表盘,文本内容带背景且颜色渐变,echarts绘制复杂仪表盘
【代码】echarts绘制多条刻度线仪表盘,文本内容带背景且颜色渐变,echarts绘制复杂仪表盘。原创 2024-01-23 14:10:13 · 715 阅读 · 0 评论 -
echarts绘制饼图,部分数据隐藏指示线和文本,hover时隐藏指示线和文本的类别也不显示tooltip提示
【代码】echarts绘制饼图,部分数据隐藏指示线和文本,hover时隐藏指示线和文本的类别也不显示tooltip提示。原创 2024-01-23 13:43:17 · 1264 阅读 · 0 评论 -
echarts饼图绘制圆环线条
【代码】echarts饼图绘制圆环线条。原创 2024-01-23 13:30:41 · 496 阅读 · 0 评论 -
echarts 排序柱状图使用datazoom设置纵轴显示滚动条
【代码】echarts 排序柱状图使用datazoom设置纵轴显示滚动条。原创 2024-01-23 11:15:31 · 468 阅读 · 0 评论 -
vue echarts地图
范围选择器右侧行政区划范围中输入需要选择的省份或地市,选择自己想要的数据格式,这里选择了geojson格式,点右侧的蓝色按钮复制到浏览器地址栏中,打开的geojson文件内容右键另存为json文件即可。原创 2024-01-22 17:18:46 · 780 阅读 · 0 评论 -
Echarts折线图鼠标hover悬停时,数据显示在某一条折线上方,用背景图片填充样式,不是tooltip
【代码】Echarts折线图鼠标hover悬停时,数据显示在某一条折线上方,用背景图片填充样式,不是tooltip。原创 2024-01-17 15:39:35 · 738 阅读 · 0 评论 -
React echarts tooltip悬停时获取当前数据并呈现到页面中
【代码】React echarts tooltip悬停时获取当前数据并呈现到页面中。原创 2024-01-17 14:37:37 · 344 阅读 · 0 评论 -
解决echarts tooltip在最右侧时部分被遮挡
size: 包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:{contentSize: [width, height], viewSize: [width, height]}。rect: 只有鼠标在图形上时有效,是一个用x, y, width, height四个属性表达的图形包围盒。tooltip.position:提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。params: 同 formatter 的参数相同。point: 鼠标位置,如 [20, 40]。原创 2023-09-07 19:49:14 · 694 阅读 · 0 评论 -
jquery.min.js:2 Uncaught TypeError: Failed to execute ‘createLinearGradient‘ on ‘CanvasRenderingCont
页面报错:jquery.min.js:2 Uncaught TypeError: Failed to execute 'createLinearGradient' on 'CanvasRenderingContext2D': The provided double value is non-finite.原因:echarts图表数据不正确。例如,图表中的数据应该是不带单位的数据,但是接口返回了带单位的数据,未经过处理直接应用到图表的data中。原创 2023-08-02 10:11:33 · 704 阅读 · 0 评论 -
echarts tooltip被遮挡的解决办法
官网中下面这段代码乍一看有点不解,obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]]这里解释一下:obj中第一个数组[left, right]是属性名的集合,第二个数组中的计算结果作为第一个数组的索引值,如pos[0] < size.viewSize[0] / 2为true的时候通过+转换为数字1,即obj[['left', 'right'][1]] = obj['right']。原创 2023-07-13 17:55:34 · 1206 阅读 · 0 评论 -
Echarts圆环图设置title及其背景色和边框颜色
问题:最初才用的方法是使用title中的padding属性设置title的背景宽度,但是发现位置不能自适应居中。圆环的legend设置在圆环左侧,垂直显示。原创 2023-07-03 09:28:34 · 2463 阅读 · 0 评论 -
Echarts拼接折线图,左右两部分设置不同的样式及formatter的处理
【代码】Echarts拼接折线图,左右两部分设置不同的样式及formatter的处理。原创 2023-07-03 09:31:18 · 566 阅读 · 0 评论 -
Echarts区域面积areaStyle用图片进行纹理填充
【代码】Echarts区域面积areaStyle用图片进行纹理填充。原创 2023-07-03 09:29:18 · 554 阅读 · 0 评论 -
Echarts折线图交点呈现为圆点加圆环的效果实现
【代码】Echarts折线图交点呈现为圆点加圆环的效果实现。原创 2023-07-03 09:29:29 · 1316 阅读 · 1 评论 -
Echarts双Y轴左右splitLine分割线无法重合 双Y轴保持Y轴分割线等分
给yAxis添加min(坐标轴刻度最小值)、max(坐标轴刻度最大值)、interval(强制设置坐标轴分割间隔)属性。根据数值大小计算最大值、最小值并取整,数值较大可整百、整千取整,默认分割成5份。原创 2023-06-30 16:58:09 · 1032 阅读 · 0 评论 -
Echarts自定义legend图例
【代码】Echarts自定义legend图例。原创 2023-06-30 16:38:22 · 251 阅读 · 0 评论 -
Echarts X轴文本显示不全 axisLabel设置旋转角度进行展示
【代码】Echarts X轴文本显示不全 axisLabel设置旋转角度进行展示。原创 2023-06-30 16:36:56 · 535 阅读 · 0 评论 -
Echarts设置X轴只显示刻度线,不显示X轴轴线
【代码】Echarts设置X轴只显示刻度线,不显示X轴轴线。原创 2023-06-30 16:27:29 · 1685 阅读 · 0 评论 -
Echarts折线图设置折线阴影
【代码】Echarts折线图设置折线阴影。原创 2023-06-30 15:37:36 · 967 阅读 · 1 评论 -
echarts tooltip自定义线条样式及数据提示框内容
【代码】echarts tooltip自定义线条样式及数据提示框内容。原创 2023-06-30 15:05:53 · 1685 阅读 · 0 评论 -
Echarts折线图默认不显示数据圆点,鼠标hover时折线图上才显示圆点
【代码】Echarts折线图默认不显示数据圆点,鼠标hover时折线图上才显示圆点。原创 2023-06-30 14:56:57 · 2799 阅读 · 0 评论 -
Echarts X轴label标签文本和刻度线对齐显示,而不是呈现在两个刻度线之间
【代码】Echarts X轴label标签文本和刻度线对齐显示,而不是呈现在两个刻度线之间。原创 2023-06-30 14:36:03 · 2827 阅读 · 1 评论 -
Echarts折线图折线呈现为渐变线条
【代码】Echarts折线图折线呈现为渐变线条。原创 2023-06-30 14:29:35 · 2194 阅读 · 0 评论 -
echarts水球图动画加载完出现灰色背景色,如何去除?
问题:默认配置label文字89%为黑色,加载完动画后,文字显示成白色;水球未到的地方颜色显示成了灰色,而backgroundStyle背景色设置的明明是白色。文字问题在label下增加或修改insideColor为 'transparent',文字即显示成原来设置的颜色;水球未到的地方呈现灰色背景,考虑是受到阴影影响,将itemStyle中的shadowBlur:设为0即可。原创 2023-02-04 17:31:08 · 1249 阅读 · 0 评论 -
echarts yAxis.type设置为log,某条折线数据为0时折线图显示不正常
yAxis.type = 'log'的时候,为对数解析方式,y轴坐标皆默认为10的对数方式展示,而10的对数不能为0。所以在初始化数据有0的情况下,需要换个思路。原创 2022-11-14 15:59:26 · 3729 阅读 · 2 评论 -
去除ECharts圆环鼠标悬停时中间显示的文字
ECharts中鼠标悬浮到图形元素上时,一般会出现高亮的样式,主要是通过 emphasis 属性来自定义,series中有下述代码的时候,鼠标悬停到图形元素上时,会在图形的中间位置显示图形块对应的文字:emphasis: { label: { show: true, title: '#fff', fontSize: '40', fontWeight: 'bold' }},想要去除ECharts圆环鼠...原创 2021-11-03 21:15:00 · 5542 阅读 · 1 评论 -
ECharts饼图距离容器上下左右边界的调整
ECharts饼图距离容器上下左右边界的调整使用grid调整无效,需要使用series中的center属性,如:center: ['50%', '45%'],第一个数值表示左右位置,第二个数值表示上下位置,根据需要调整数值大小即可得到想要的效果。...原创 2021-11-03 21:00:00 · 9850 阅读 · 0 评论