Echart
Echart
HaanLen
这个作者很懒,什么都没留下…
展开
-
Echart柱状图:自定义tooltip浮窗内容-字符串模板
折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)效果图:当存在多个系列数据时,可以使用{a0}表示第一个系列的数据,{a1}表示第二个系列的数据,以此类推!效果图:字符串模也可以直接使用字符串模板来书写自定义标签样式,例如没一项数据前的market标识!效果图:当存在多个系列数据时,使用{a}、{c}只会展示第一个系列!原创 2022-12-13 12:01:07 · 2519 阅读 · 0 评论 -
Echart柱状图:多系列柱状图基本实现
多系列纵向柱状图基本实现。多系列横向柱状图基本实现。多系列纵向柱状图配置。多系列横向柱状图配置。原创 2022-12-13 12:00:54 · 838 阅读 · 0 评论 -
Echart地图:地图区域点击事件(React)
echart实现地图点击事件原创 2022-06-22 21:40:39 · 2479 阅读 · 0 评论 -
Echart堆叠柱状图:色块之间添加白色间距效果设置
堆叠柱状图给色块之间添加白色间距效果设置原创 2022-06-22 21:02:14 · 2514 阅读 · 2 评论 -
Echart:实现堆叠柱状图与折线图混合,图例显示类别,x轴显示年份,双坐标轴
echart实现堆叠柱状图与折线混合,图例显示类别,双坐标轴原创 2022-06-16 20:51:28 · 2474 阅读 · 1 评论 -
Echart:柱状图每条柱子根据类别显示不同的颜色,图例显示类别;点击图例实现控制多条柱子的显示与隐藏
echart实现不同类型的柱子显示不同的颜色,点击图例可控制多条柱子的显示与隐藏原创 2022-06-16 20:18:21 · 4466 阅读 · 0 评论 -
Echart初步实现地图(React)
echart初步实现地图原创 2022-06-15 21:02:58 · 2088 阅读 · 0 评论 -
Echart矩形树图:简单实现矩形树图
矩形树图定义:矩形树图( Treemap)也叫矩形式树状结构图,它采用多组面积不等的矩形嵌套而成。在一张图中,所有矩形的面积之和代表了总体数据。各个小矩形的面积表示每个子项的占比,矩形面积越大,表示子数据在整体中的占比越大。矩形树图作用:矩形树图把具有层次关系的数据可视化为一组嵌套的矩形,它直观地以面积表示数值,以颜色表示类目。所有矩形的面积之和表示整体的大小,各个小矩形的面积表示每个子项的占比,矩形面积越大,表示子数据在整体中的占比越大,擅长可视化带权重的数据关系。echart官网例子:.原创 2022-05-27 21:20:44 · 4553 阅读 · 0 评论 -
Echart柱状图:堆叠柱状图value格式化显示
option = { title: { text: 'World Population' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'v...原创 2022-05-27 20:45:31 · 850 阅读 · 0 评论 -
Echart柱状图:堆叠柱状图显示value
option = { title: { text: 'World Population' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'va..原创 2022-05-27 20:33:25 · 766 阅读 · 0 评论 -
Echart柱状图:echart实现堆叠柱状图
Echart实现堆叠柱状图原创 2022-05-27 20:25:40 · 1028 阅读 · 0 评论 -
Echart柱状图:x轴显示value,y轴显示类别
option = { title: { text: 'World Population' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: {}, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: {..原创 2022-05-27 20:12:28 · 1182 阅读 · 0 评论 -
Echart折线图:当多条折线存在相同name,图例仍全部显示
默认情况option = { title: { text: 'Stacked Line' }, tooltip: { trigger: 'axis' }, legend: { show: true // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] }, grid: { left: '3%', right: '4%', botto原创 2022-05-23 22:08:38 · 3043 阅读 · 0 评论 -
Echart折线图:多条折线图每次仅展示一条
正常展示多条折线option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, tooltip: { trigger: 'axis' }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 160]原创 2022-05-21 18:08:12 · 3846 阅读 · 0 评论 -
Echart折线图:当多条折线图的name一样时也显示不同的颜色
echart折线图,当多条折线图的name一样的,颜色也是一致。option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, tooltip: { trigger: 'axis' }, yAxis: { type: 'value' }, series: [ { data: [150, 230,原创 2022-05-21 17:58:28 · 1506 阅读 · 0 评论 -
Echart: legend图例的icon开启或关闭时大小样式设置
legend: { data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'], icon:'circle', }, legend: { data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'], icon: 'circle', itemHeight: 10, itemWidth: 20...原创 2022-04-12 23:34:27 · 4335 阅读 · 3 评论 -
Echart:tooltip悬浮窗遮挡了折线解决
原因:悬浮窗的z-index非常大。解决:将悬浮窗的z-index设置减少即可。解决的效果图如下:tooltip相关配置 tooltip: { show: true, trigger: 'axis', extraCssText: 'z-index: -1', },原创 2022-02-26 12:31:30 · 1189 阅读 · 0 评论 -
echart:图例legend底部显示【圆形+自定义icon+名称】
效果:实现思路:前面的icon通过echart的配置项icon设置,自定义图标通过样式backgroundColor设置legend配置信息 legend: { show: true, data: [ { name: 'Forest', icon: 'circle' }, { name: 'Steppe',原创 2022-02-26 11:31:50 · 3679 阅读 · 0 评论 -
Echart柱状图-柱子使用图片填充
效果配置信息说明:图片为base64图片信息data:image/png;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N原创 2022-01-09 22:04:43 · 2269 阅读 · 0 评论 -
Echart柱状图-柱子顶部显示数值/显示图标
柱子顶部显示数值效果柱子顶部显示数值+图标import EchartInit from '@/components/EchartInit';const IMG = [ 'https://scpic.chinaz.net/Files/pic/icons128/8328/h1.png', 'https://scpic.chinaz.net/Files/pic/icons128/8319/w2.png', 'https://img0.baidu.com/it/u=3119542616原创 2022-01-09 21:27:33 · 7418 阅读 · 2 评论 -
Echart柱状图x轴label显示文本与图片
柱状图x轴label显示图片效果如下:配置信息import EchartInit from '@/components/EchartInit';const IMG = [ 'https://scpic.chinaz.net/Files/pic/icons128/8328/h1.png', 'https://scpic.chinaz.net/Files/pic/icons128/8319/w2.png', 'https://img0.baidu.com/it/u=3119542616,原创 2022-01-09 21:09:22 · 2526 阅读 · 0 评论 -
Echart折线图篇:x轴刻度不显示的解决方法
X轴刻度线的默认效果没有刻度的效果 // x轴 xAxis: { type: 'category', data: xAxisData, axisLabel: { interval: 0, rotate: 45, }, axisTick: { show: false }, },...原创 2021-11-06 19:29:57 · 9412 阅读 · 0 评论 -
Echart折线图篇:x轴坐标label显示不全的解决办法
peix原创 2021-11-06 14:53:20 · 4654 阅读 · 0 评论 -
Echart-折线图篇:多条折线,设置折线颜色(React版)
无论有多少条直线,都是按照一定的颜色顺序进行展示原创 2021-11-05 21:37:32 · 3161 阅读 · 0 评论 -
Echart-折线图篇:折线上的拐点去除,平滑的曲线(React版)
折线上的拐点去除原创 2021-11-05 21:28:56 · 2562 阅读 · 0 评论 -
React封装折线图
实现思路:外层直接传入整个完整的options,实现渲染效果原创 2021-11-05 21:14:52 · 352 阅读 · 0 评论 -
Echart-react封装echart图表(React版)
饼图基础配置原创 2021-11-05 20:47:22 · 532 阅读 · 0 评论