经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Echarts » 查看文章
echarts中几种渐变方式的具体实现方式
来源：jb51　　时间：2022/11/17 8:48:29　　对本文有异议

在echarts 中实现渐变的具体几种方式

在我们日常使用Echarts图表过程中，会遇到一些要求我们的echarts图表能实现颜色渐变，以下几种方式就能满足你的需求。文档参考 ECharts option 文档 。

方式一：

线性渐变：new echarts.graphic.LinearGradient(x,y,x2,y2,offset,boolean)

  • x,y,x2,y2，包围框中的百分比，数值范围 0-1；
  • offset，类似颜色线性梯度，数值范围 0-1；
  • boolean，默认false，若最后参数为true，前四个参数将使用像素位置。

径向渐变：new echarts.graphic.RadialGradient(x,y,r,offset,boolean)

  • x,y，代表圆心，数值范围 0-1；
  • r，代表半径，数值范围 0-1；
  • offset，类似颜色线性梯度，数值范围 0-1；
  • boolean，默认false，若最后参数为true，前四个参数将使用像素位置。

采用图片显示：new echarts.graphic.Pattern(imageDom,repeat)

  • imageDom，仅支持 HTMLImageElement 和 HTMLCanvasElement形式图片；
  • repeat，默认’repeat’，可取值还有’repeat-x’, ‘repeat-y’, or ‘no-repeat’；

代码示例：

  1. // 创建 HTMLImageElement
  2. // HTMLCanvasElement请自行研究去
  3. var imageDom = new Image(); // Image 构造函数
  4. imageDom.src = '/static/img/map_bg.png'; // 图片路径
  5. imageDom.alt = '这是一张图片';
  6.  
  7. // 应用如下
  8. // color:{
  9. //   image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
  10. //    repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
  11. // }

方式二：colorStops

线性渐变：colorStops - linear

  • type：‘linear’，线性渐变
  • x,y,x2,y2，代表包围框中的百分比，数值范围 0-1；
  • colorStops，类似颜色线性梯度，数值范围 0-1；
  • global，默认false

径向渐变：colorStops - radial

  • type：‘radial’，径向渐变
  • x,y，代表圆心，数值范围 0-1；
  • r，代表半径，数值范围 0-1；
  • colorStops，类似颜色线性梯度，数值范围 0-1；
  • global，默认false

效果图：

代码如下：

  1. var imageDom = new Image(); // Image 构造函数
  2. imageDom.src = 'https://github.com/iuvc/magicJs/blob/main/public/images/issues/blue-white-background.jpg?raw=true';
  3. imageDom.alt = '测试';
  4. option = {
  5.   title: {
  6.     text: 'echarts 渐变',
  7.     left: 'center'
  8.   },
  9.   tooltip: {
  10.     trigger: 'item',
  11.     formatter: '{a} <br/>{b} : {c} ({d}%)'
  12.   },
  13.   legend: {
  14.     top: 40,
  15.     left: 0,
  16.     orient: 'vertical',
  17.     data: [
  18.       '线性渐变区域 LinearGradient',
  19.       '径向渐变区域 RadialGradient',
  20.       '线性渐变区域 ColorStep-linear',
  21.       '径向渐变区域 ColorStep-radial',
  22.       '图片显示'
  23.     ]
  24.   },
  25.   series: [
  26.     {
  27.       name: 'Radius Mode',
  28.       type: 'pie',
  29.       radius: [20, '70%'],
  30.       center: ['50%', '50%'],
  31.       roseType: 'radius',
  32.       itemStyle: {
  33.         borderRadius: 5
  34.       },
  35.       label: {
  36.         show: true
  37.       },
  38.       emphasis: {
  39.         label: {
  40.           show: true
  41.         }
  42.       },
  43.       data: [
  44.         {
  45.           value: 40,
  46.           name: '线性渐变区域 LinearGradient',
  47.           itemStyle: {
  48.             //  线性渐变方式一 ======================================================
  49.             // LinearGradient前四个分参数别代表右，下，左，上，数值0-1
  50.             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  51.               {
  52.                 offset: 0,
  53.                 color: 'rgba(255,174,19,0.7)'
  54.               },
  55.               {
  56.                 offset: 1,
  57.                 color: 'rgba(255,174,19,0.05)'
  58.               }
  59.             ])
  60.           }
  61.         },
  62.         {
  63.           value: 40,
  64.           name: '径向渐变区域 RadialGradient',
  65.           itemStyle: {
  66.             //  径向渐变方式一 ======================================================
  67.             // RadialGradient前三个分参数别代表圆心（x,y），半径（数值0-1）
  68.             color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [
  69.               {
  70.                 offset: 0,
  71.                 color: 'rgba(255,154,119,1)'
  72.               },
  73.               {
  74.                 offset: 1,
  75.                 color: 'rgba(255,154,119,0.05)'
  76.               }
  77.             ])
  78.           }
  79.         },
  80.         {
  81.           value: 33,
  82.           name: '线性渐变区域 ColorStep-linear',
  83.           itemStyle: {
  84.             //  线性渐变方式二 ======================================================
  85.             // x,y,x2,y2数值同LinearGradient前四个参数分别代表右，下，左，上，数值0-1
  86.             color: {
  87.               type: 'linear',
  88.               x: 0,
  89.               y: 0,
  90.               x2: 0,
  91.               y2: 1,
  92.               colorStops: [
  93.                 {
  94.                   offset: 0,
  95.                   color: 'rgba(60,216,208,0.7)' // 0% 处的颜色
  96.                 },
  97.                 {
  98.                   offset: 1,
  99.                   color: 'rgba(60,216,208,0.05)' // 100% 处的颜色
  100.                 }
  101.               ],
  102.               global: false // 缺省为 false
  103.             }
  104.           }
  105.         },
  106.         {
  107.           value: 28,
  108.           name: '径向渐变区域 ColorStep-radial',
  109.           itemStyle: {
  110.             //  径向渐变方式二 ======================================================
  111.             // x 0.5 y 0.5 代表圆心，r 代表半径
  112.             color: {
  113.               type: 'radial',
  114.               x: 0.5,
  115.               y: 0.5,
  116.               r: 0.9,
  117.               colorStops: [
  118.                 {
  119.                   offset: 0,
  120.                   color: 'rgba(82,216,60, 0.7)' // 0% 处的颜色
  121.                 },
  122.                 {
  123.                   offset: 1,
  124.                   color: 'rgba(82,216,60, 0.05)' // 100% 处的颜色
  125.                 }
  126.               ],
  127.               global: false // 缺省为 false
  128.             }
  129.           }
  130.         },
  131.         { 
  132.             value: 22, 
  133.             name: '图片显示' ,
  134.             itemStyle: {
  135.             //  图片显示 ======================================================
  136.                 color: {
  137.                   image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
  138.                   repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
  139.                 }
  140.             }
  141.         }
  142.       ]
  143.     }
  144.   ]
  145. };

其他示例：

代码如下：

  1. option = {
  2.   title: {
  3.     text: '渐变区域图'
  4.   },
  5.   tooltip: {
  6.     trigger: 'axis',
  7.     axisPointer: {
  8.       type: 'cross',
  9.       label: {
  10.         backgroundColor: '#6a7985'
  11.       }
  12.     }
  13.   },
  14.   legend: {
  15.     top: 15,
  16.     data: [
  17.       '线性渐变区域 LinearGradient',
  18.       '线性渐变区域 ColorStep-linear',
  19.       '径向渐变区域 ColorStep-radial',
  20.       '径向渐变区域 RadialGradient'
  21.     ]
  22.   },
  23.   grid: {
  24.     top: 55,
  25.     left: 45,
  26.     right: 15,
  27.     bottom: 25
  28.   },
  29.   xAxis: [
  30.     {
  31.       type: 'category',
  32.       boundaryGap: true,
  33.       axisLine: {
  34.         show: false,
  35.         onZero: true,
  36.         lineStyle: {
  37.           color: '#999999'
  38.         }
  39.       },
  40.       splitLine: {
  41.         show: false
  42.       },
  43.       axisTick: {
  44.         show: false
  45.       },
  46.       data: [
  47.         '00:00',
  48.         '00:15',
  49.         '00:30',
  50.         '00:45',
  51.         '01:00',
  52.         '01:15',
  53.         '01:30',
  54.         '01:45',
  55.         '02:00',
  56.         '02:15',
  57.         '02:30',
  58.         '02:45',
  59.         '03:00',
  60.         '03:15',
  61.         '03:30',
  62.         '03:45',
  63.         '04:00',
  64.         '04:15',
  65.         '04:30',
  66.         '04:45',
  67.         '05:00',
  68.         '05:15',
  69.         '05:30',
  70.         '05:45',
  71.         '06:00',
  72.         '06:15',
  73.         '06:30',
  74.         '06:45',
  75.         '07:00',
  76.         '07:15',
  77.         '07:30',
  78.         '07:45',
  79.         '08:00',
  80.         '08:15',
  81.         '08:30',
  82.         '08:45',
  83.         '09:00',
  84.         '09:15',
  85.         '09:30',
  86.         '09:45',
  87.         '10:00',
  88.         '10:15',
  89.         '10:30',
  90.         '10:45',
  91.         '11:00',
  92.         '11:15'
  93.       ]
  94.     }
  95.   ],
  96.   yAxis: [
  97.     {
  98.       type: 'category',
  99.       boundaryGap: true,
  100.       axisLine: {
  101.         show: false,
  102.         onZero: true,
  103.         lineStyle: {
  104.           color: '#999999'
  105.         }
  106.       },
  107.       splitLine: {
  108.         show: false
  109.       },
  110.       axisTick: {
  111.         show: false
  112.       }
  113.     }
  114.   ],
  115.   series: [
  116.     {
  117.       name: '线性渐变区域 LinearGradient',
  118.       type: 'line',
  119.       stack: '总量',
  120.       data: [
  121.         1.67, 1.25, 1.02, 1.44, 1.81, 1.13, 1.58, 1.13, 1.56, 1.3, 1.9, 1.3,
  122.         1.55, 1.94, 1.69, 1.69, 1.8, 1.21, 1.29, 1.58, 1.04, 1.67, 1.07, 1.18,
  123.         1.57, 1.05, 1.63, 1.28, 1.28, 1.58, 1.88, 1.2, 1.63, 1.59, 1.43, 1.25,
  124.         1.68, 1.25, 1.12, 1.31, 1.6, 1.62, 1.57, 1.2, 1.02, 1.42, 1.91, 1.97,
  125.         1.32, 1.06, 1.3, 1.22, 1.74, 1.02, 1.75, 1.2
  126.       ],
  127.       areaStyle: {
  128.         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  129.           {
  130.             offset: 0,
  131.             color: 'rgba(255,174,19,0.7)'
  132.           },
  133.           {
  134.             offset: 1,
  135.             color: 'rgba(255,174,19,0.05)'
  136.           }
  137.         ])
  138.       },
  139.       itemStyle: {
  140.         color: 'rgba(255,174,19,.1)'
  141.       },
  142.       lineStyle: {
  143.         color: 'rgba(255,174,19,.1)'
  144.       },
  145.       smooth: true,
  146.       smoothMonotone: 'x',
  147.       symbol: 'circle'
  148.     },
  149.     {
  150.       name: '线性渐变区域 ColorStep-linear',
  151.       type: 'line',
  152.       stack: '总量',
  153.       data: [
  154.         2.31, 2.27, 1.64, 1.56, 1.75, 1.62, 2.18, 2.12, 1.97, 2.45, 2.39, 2.3,
  155.         1.78, 1.82, 1.82, 1.76, 1.78, 1.63, 1.54, 1.6, 1.61, 1.68, 1.67, 1.67,
  156.         2.34, 1.69, 2.18, 2.25, 2.44, 2.4, 1.97, 2.05, 2.05, 2.46, 1.62, 1.66,
  157.         1.66, 1.87, 1.59, 1.99, 2.45, 2.05, 1.53, 2.39, 1.77, 1.99, 2.14, 2.33,
  158.         1.55, 1.87, 1.65, 2.02, 1.68, 2.13, 1.88, 2.19
  159.       ],
  160.       areaStyle: {
  161.         color: {
  162.           type: 'linear',
  163.           x: 0,
  164.           y: 0,
  165.           x2: 0,
  166.           y2: 1,
  167.           colorStops: [
  168.             {
  169.               offset: 0,
  170.               color: 'rgba(60,216,208,0.7)' // 0% 处的颜色
  171.             },
  172.             {
  173.               offset: 1,
  174.               color: 'rgba(60,216,208,0.05)' // 100% 处的颜色
  175.             }
  176.           ],
  177.           global: false // 缺省为 false
  178.         }
  179.       },
  180.       itemStyle: {
  181.         color: 'rgba(60,216,208,.1)'
  182.       },
  183.       lineStyle: {
  184.         color: 'rgba(60,216,208,.1)'
  185.       },
  186.       smooth: true,
  187.       smoothMonotone: 'x',
  188.       symbol: 'circle'
  189.     },
  190.     {
  191.       name: '径向渐变区域 RadialGradient',
  192.       type: 'line',
  193.       stack: '总量',
  194.       label: {
  195.         normal: {
  196.           show: true,
  197.           position: 'top'
  198.         }
  199.       },
  200.       data: [
  201.         2.69, 2.47, 2.53, 3.31, 3.25, 3.12, 2.66, 2.58, 3.01, 3.21, 2.69, 2.72,
  202.         2.67, 3.34, 3.21, 2.79, 3.23, 3.07, 2.84, 2.46, 3.25, 2.92, 2.42, 2.61,
  203.         2.83, 3.29, 2.44, 3.38, 2.82, 2.56, 2.94, 2.42, 2.95, 2.82, 3.18, 2.6,
  204.         2.91, 3.07, 2.57, 2.45, 2.45, 2.94, 2.86, 3.12, 3.07, 3.02, 2.53, 2.64,
  205.         2.97, 2.62, 2.79, 2.68, 3.24, 3.38, 2.67, 3.17
  206.       ],
  207.       areaStyle: {
  208.         color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [
  209.           {
  210.             offset: 0,
  211.             color: 'rgba(255,154,119,.7)'
  212.           },
  213.           {
  214.             offset: 1,
  215.             color: 'rgba(255,154,119,0.05)'
  216.           }
  217.         ])
  218.       },
  219.       itemStyle: {
  220.         color: 'rgba(255,154,119,.1)'
  221.       },
  222.       lineStyle: {
  223.         color: 'rgba(255,154,119,.1)'
  224.       },
  225.       smooth: true,
  226.       smoothMonotone: 'x',
  227.       symbol: 'circle'
  228.     },
  229.     {
  230.       name: '径向渐变区域 ColorStep-radial',
  231.       type: 'line',
  232.       stack: '总量',
  233.       label: {
  234.         normal: {
  235.           show: true,
  236.           position: 'top'
  237.         }
  238.       },
  239.       data: [
  240.         2.79, 2.57, 2.63, 3.41, 3.35, 3.22, 2.76, 2.68, 3.11, 3.31, 2.79, 2.82,
  241.         2.77, 3.44, 3.31, 2.89, 3.33, 3.17, 2.94, 2.56, 3.35, 3.02, 2.52, 2.71,
  242.         2.93, 3.39, 2.54, 3.48, 2.92, 2.66, 3.04, 2.52, 3.05, 2.92, 3.28, 2.7,
  243.         3.01, 3.17, 2.67, 2.55, 2.55, 3.04, 2.96, 3.22, 3.17, 3.12, 2.63, 2.74,
  244.         3.07, 2.72, 2.89, 2.78, 3.34, 3.48, 2.77, 3.27
  245.       ],
  246.       areaStyle: {
  247.         color: {
  248.           type: 'radial',
  249.           x: 0.5,
  250.           y: 0.5,
  251.           r: 0.9,
  252.           colorStops: [
  253.             {
  254.               offset: 0,
  255.               color: 'rgba(82,216,60, 0.7)' // 0% 处的颜色
  256.             },
  257.             {
  258.               offset: 1,
  259.               color: 'rgba(82,216,60, 0.05)' // 100% 处的颜色
  260.             }
  261.           ],
  262.           global: false // 缺省为 false
  263.         }
  264.       },
  265.       itemStyle: {
  266.         color: 'rgba(82,216,60,.1)'
  267.       },
  268.       lineStyle: {
  269.         color: 'rgba(82,216,60,.1)'
  270.       },
  271.       smooth: true,
  272.       smoothMonotone: 'x',
  273.       symbol: 'circle'
  274.     }
  275.   ]
  276. };

总结

到此这篇关于echarts中几种渐变方式的具体实现的文章就介绍到这了,更多相关echarts渐变方式实现内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Echarts热门文章

  • Python+Pyecharts实现散点图的绘制
  • vue+echarts5实现中国地图的示例代码
  • echarts中几种渐变方式的具体实现方式
  • Echart Bar双柱状图样式最全详解
  • vue echarts实现柱状图动态展示
  • 如何利用echarts画雷达图和折柱混合
  • Echarts Bar横向柱状图实例代码
  • ECharts图表动态修改series显示隐藏
  • 【Dotnet 工具箱】跨平台图表库 LiveCharts2
  • vue2?利用echarts?单独绘制省份的步骤

    • Echarts推荐文章

  • Echarts设置饼状图保证你看的明明白白
  • .NET开源、功能强大、跨平台的图表库 - LiveCharts2
  • echarts X轴类目名太长时隐藏，hover时显示全部
  • vue3+ts打开echarts的正确方式
  • echarts设置多条折线不是你想的那样简单
  • 将ECharts图表插入到Word文档中
  • echarts中几种渐变方式的具体实现方式
  • vue中echarts关系图动态增删节点以及连线方式
  • 如何利用echarts画雷达图和折柱混合
  • pyecharts的Tab和Legend布局详情

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号