echarts示例分享-自定义折线图的图标与最大最小值图标

拼搏现实的明天。 2024-03-30 14:01 17阅读 0赞

![在这里插入图片描述][0ccdaf160dd14ccc96a93444296a633c.png]  
下方代码可直接运行在https://echarts.apache.org/examples/zh/editor.html?c=line-simple

option = {
        
      tooltip: {
        
        trigger: 'axis'
      },
      title: {
        
        top: 10,
        left: 30,
        text: '{name|年增长率：} {value|' + 10 + '} {unit|%}',
        textStyle: {
        
          rich: {
        
            name: {
        
              fontSize: 14,
              fontWeight: 'bold',
              color: '#15b0b2'
            },
            value: {
        
              fontSize: 14,
              fontWeight: 'bold',
              color: 'black'
            },
            unit: {
        
              fontSize: 12,
              color: '#a2a2a2'
            }
          }
        }
      },
      legend: {
        
        top: 10,
        x: 'right',
        borderRadius: 5,
        itemWidth: 15,
        itemHeight: 15
      },
      grid: {
        
        top: 60,
        right: 15,
        left: 10,
        bottom: 1,
        containLabel: true
      },
      xAxis: {
        
        type: 'category',
        axisTick: {
        
          show: false
        },
        axisLine: {
        
          show: true,
          lineStyle: {
        
            color: '#e2e2e2'
          }
        },
        axisLabel: {
        
          color: 'black',
          lineHeight: 30
        },
        axisPointer: {
        
          type: 'shadow'
        },
        splitLine: {
        
          show: true,
          lineStyle: {
        
            type: 'dashed',
            color: '#e0e0e0'
          }
        },
        splitArea: {
        
          show: false,
          areaStyle: {
        
            color: ['#ffffff', '#fafafa']
          }
        },
        data: [1, 2, 3]
      },
      yAxis: [
        {
        
          type: 'value',
          axisLine: {
        
            show: true,
            lineStyle: {
        
              color: '#e2e2e2'
            }
          },
          axisLabel: {
        
            color: 'black'
          },
          splitLine: {
        
            show: true,
            lineStyle: {
        
              type: 'dashed'
            }
          },
          splitArea: {
        
            show: true
          }
        },
        {
        
          type: 'value',
          splitLine: {
        
            show: false
          },
          axisLine: {
        
            show: true,
            lineStyle: {
        
              color: '#e2e2e2'
            }
          },
          axisLabel: {
        
            color: 'black',
            formatter: '{value}%'
          }
        }
      ],
      series: [
        {
        
          label: {
        
            color: '#15B7B8',
            show: true,
            position: 'top',
            fontWeight: 'bold'
          },
          name: '年度',
          type: 'bar',
          barWidth: 15,
          data: [10, 20, 30, 40],
          itemStyle: {
        
            borderRadius: [10, 10, 0, 0],
            color: {
        
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
        
                  offset: 0,
                  color: '#2ECFD1' // 0%处的颜色
                },
                {
        
                  offset: 1,
                  color: '#13B4B7' // 100%处的颜色
                }
              ]
            }
          }
        },
        {
        
          name: '增长率',
          type: 'line',
          lineStyle: {
        
            type: 'dashed',
            color: '#F1BF68'
          },
          itemStyle: {
        
            color: '#F1BF68',
            borderColor: '#fff',
            borderWidth: 2,
            shadowColor: '#F1BF68',
            shadowBlur: 10
          },
          symbol: 'circle',
          symbolSize: 10,
          yAxisIndex: 1,
          data: [10, 20, 100],
          markPoint: {
        
            symbol:
              'image://' +
              'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAAAjCAMAAAD1/jdcAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALFQTFRFAAAA661F661F661F661F661F661F661F661F661F661F661F661F661F7bNR8Lxi8b5m8b9n661F661F661F8b5l661F661F661F661F8b5m8b9m7bNR661F7LFM661F661F661F7bRS8b5m8L1k7LBK661F661F661F661F661F661F7rVT8L1k7LBL661F661F661F661F7rZV8L1k7LFN661F661F661F661F661FvQ/oBwAAADt0Uk5TAAIHDBIVFgQcLTk/QSNbzvb/Bg0s7jgRPhT391obTSJDS3/45mVJQgMXHTFz5FUrARAoZNJHDhkeCwVXmKGrAAAA40lEQVR4nO3WxxKCMBAG4IWlg8QgRQTE3nvX938wE73KOJN48MB/znzZ0/4LAIqKmm6IRddQVYDFRMt2XE8srmNbaLJJsOGTJhVNk/gNVEC1fHHj5fhWAC2bSCGUkhBBc+RGoTSKE9BdSYTSdgqGJ614Rq3USq3Uyp8rP9iYbsq2d0cS4dv7N03CWi2TQrK8CHjD5iQSNiLSLVnD8rYP449t3+sPhuzhaDyZVrZ9HBY440eDElRcHvPFcpXR9WZbVF8eCQavy6M6O3N/OJ7O5fsz4ezMy/Vm3OUQxswe6uPLxDxPYLiMPmJuVccAAAAASUVORK5CYII',
            symbolSize: [65, 31],
            symbolOffset: [0, -22],
            label: {
        
              color: '#fff'
            },
            data: [
              {
         type: 'max', name: 'Max' },
              {
         type: 'min', name: 'Min' }
            ]
          }
        }
      ]
    };

[0ccdaf160dd14ccc96a93444296a633c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9681e5b2d53c4b36a924cc08c227278b.png