echart中线性渐变的应用

知识拓展

在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient，但不知为啥官方文档并没有此API的介绍

语法

new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: '#000'},
                    {offset: 1, color: '#ddd'}
                ] )

该方法传入了5个参数：

• 前4个参数用于配置渐变色的起止位置，分别是：右/下/左/上四
• 第5个参数则是一个数组，用于配置颜色的渐变过程.，每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color不用多说肯定是表示颜色了

示例

{
    type: 'bar',
    itemStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: '#000'},
                    {offset: 0.5, color: '#888'},
                    {offset: 1, color: '#ddd'}
                ]
            )
        }
    }
}

柱状图应用示例

//  ... 省略无关代码
series: [
  {
         name:'同比',
         type:'bar',
         data: [-60,-70,75,-70],
         itemStyle: {
             normal:{
                 barBorderRadius: 4,
                     color: new echarts.graphic.LinearGradient(
                     0, 0, 1, 0,
                     [
                         {offset: 0, color: 'rgba(224,130,247,1)'},
                         {offset: 1, color: 'rgba(119,108,254,1)'}
                     ]
                  )
             }
         },
     },
     {
         name:'环比',
         type:'bar',
         data: [60,-50,60,60],
         itemStyle: {
             normal:{
                 barBorderRadius: 4,
                 color: new echarts.graphic.LinearGradient(
                     0, 0, 1, 0,
                     [
                         {offset: 0, color: 'rgba(47,172,255,1)'},
                         {offset: 1, color: 'rgba(27,79,226,1)'}
                     ]
               )
             }
         },
     }
 ]
//  ... 省略无关代码

折线图应用示例

//  ... 省略无关代码
series: [
   {
         name:'交通事故',
         type:'line',
         data: [60,50,70,30,50,20,50],
         smooth: true,
         symbol: 'image:///static/admin/nodeMonitor/img/symbol-purple.png',
         symbolSize: [28,37],
         symbolOffset: [0,-18],
         showSymbol: false,
         label: {
             show: true,
             color: '#fff',
             fontWeight: 'bold',
             position: 'insideTop',
             distance: 12
         },
         areaStyle: {
             normal:{
                 barBorderRadius: 4,
                     color: new echarts.graphic.LinearGradient(
                     0, 0, 0, 1,
                     [
                         {offset: 0, color: 'rgba(255,0,170,.45)'},
                         {offset: 1, color: 'rgba(255,0,170,0)'}
                     ]
                  )
             }
         },
     },
 ],
 //  ... 省略无关代码

仪表盘应用示例

// 定义渐变颜色
var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
         offset: 0,
         color: '#45ba14'
     },
     {
         offset: 0.23,
         color: '#a2c30a'
     },
     {
         offset: 0.5,
         color: '#ffcc00'
     },
     {
         offset: 1,
         color: '#ff0000'
     }
 ]);
 
var option = {
	 //  ... 省略无关代码
     series: [
         {
             axisLine: { //设置默认刻度盘上的刻度不显示，重新定义刻度盘
                 show: true,
                 lineStyle: {
                     width: 2,
                     color: [
                         [0, "#006bd6"],
                         [0.25, "#1e8dfc"],
                         [0.51, "#007fff"],
                         [0.63, "#198cff"],
                         [0.75, "#3198ff"],
                         [1, "#007fff"],
                     ]
                 }
             }, 
         },
         {
             name: "彩环",
             type: 'gauge',
             radius: '65%', //大小
             axisLine: { // 坐标轴线
                 lineStyle: { // 属性lineStyle控制线条样式
                     width: 5, //粗细
                     color: [
                         [1, axislineColor]
                     ],
                 }
             },
         }
     ]
 };
 //  ... 省略无关代码