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

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

在这里插入图片描述
下方代码可直接运行在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' }
        ]
      }
    }
  ]
};