eCharts 去除拐点设置、eCharts 修改线条图例拐点、并正常展示数据再上方

281 阅读1分钟

去除线条上的拐点(圆点)

import ReactEcharts from 'echarts-for-react';

const Demo = () => {
  const getOption = {
    grid: {
      top: 80, right: 36, bottom: 70, left: 38,
    },
    title: [
      {
        text: '',
        left: 'lefter',
      },
    ],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
        {
          name: 'LineData',
          type: 'line',
          stack: 'stackLine',
          label: {
            show: true,
          },
          data: [150, 232, 201, 154, 190, 330, 410],
          barWidth: 20,
          showSymbol: true, // 设置拐点可以展示数据
          symbolSize: 0,  // 设置拐点大小为0
          symbol: 'image://', // 图例中的拐点设置为 'none' 的时候为一个实心圆,所以这里设置空地址
        },
    ],
  };
  
  return <>
  <ReactEcharts
      style={{
        height: '430px',
        width: '1200',
        border: '1px solid #dadada',
      }}
      option={getOption}
    />
  </>
 }

1657093139891.jpg

PS

  • 有更多eCharts 或 Highcharts 的知识想知道可以在下方留言
  • 刘师兄的微信:LMT0797 ,备注:掘金