8lab_echarts 中文文档教程

Question

echarts

基于 echarts 的免配组件 可以传入自定义配置来覆盖默认配置

条形图

<Bar
    data={{'04/06': {increase: 123, decrease: 224}, '04/07': {...}, '04/08': {...}}}
    option={{
        // color: ['red', 'yellow'],
        legend: { show: false },
        xAxis: [{
            axisLabel: {
                interval: 0,
                rotate: 40,
            },
            type: 'category',
            data: [],
        }],
        grid: {
            top: 10,
            bottom: 30,
            right: 0,
        },
    }}
    barColumns={{
        increase: '新增',
        decrease: '减少',
    }}
    barWidth={10}
    stack
    style={{ height: 110 }}
/>

饼图&环图

const data = {
  name: "pIe",
  data: [
    { value: 1048, name: "搜索引擎123222" },
    { value: 735, name: "直接访问" },
    { value: 580, name: "邮件营销" },
    { value: 484, name: "联盟广告" },
    { value: 300, name: "视频广告" },
  ],
};

<Pie
  seriesProcessor={(series) => {
    series[0].radius = ["0%", "80%"];
    series[0].center = ["30%", "50%"];

    return series;
  }}
  data={data}
  style={{ width: 500, height: 300 }}
/>;

仪表盘

<Gauge
  seriesProcessor={(series) => {
    const curSeries = series[0];
    if (curSeries) {
      const lineStyle = curSeries?.axisLine?.lineStyle;
      if (lineStyle) {
        lineStyle.width = 40;
      }
      curSeries.center = ["50%", "85%"];
      curSeries.radius = "120%";
      return series;
    }

    return [];
  }}
  style={{ height: 300 }}
  data={66}
/>

折线图

<Line
  style={{ height: 300 }}
  lineColumns={{
    new: "新增",
    delete: "删除",
    same: "保持",
  }}
  autoResize
  seriesProcessor={(s) => {
    s.forEach((eachS) => {
      eachS.areaStyle = {}; //区域图
      eachS.smooth = true; //曲线图
    });
    return s;
  }}
  stack //堆叠
  data={{
    "04/06": {
      new: 123,
      delete: 225,
      same: 92,
    },
    "04/07": {
      new: 2,
      delete: 56,
      same: 17,
    },
    "04/08": {
      new: 89,
      delete: 22,
      same: 190,
    },
    "04/09": {
      new: 5,
      delete: 5,
      same: 67,
    },
  }}
/>