下面的例子展示了如何在bizchart上改变颜色，你只需要在“color”属性下引入你的新颜色

import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, LineAdvance } from 'bizcharts';

const data = [
    {
        month: "Jan",
        city: "Tokyo",
        temperature: 7
    },
    {
        month: "Jan",
        city: "London",
        temperature: 3.9
    },
    {
        month: "Feb",
        city: "Tokyo",
        temperature: 13
    },
    {
        month: "Feb",
        city: "London",
        temperature: 4.2
    },
    {
        month: "Mar",
        city: "Tokyo",
        temperature: 16.5
    },
    {
        month: "Mar",
        city: "London",
        temperature: 5.7
    },
];

function Demo() {
    return <Chart padding={[10, 20, 50, 40]} autoFit height={300} data={data} >
        <LineAdvance
            shape="smooth"
            point
            area
            position="month*temperature"
            color={"city",["red","#5225ab"]}
        />
    </Chart>
}

ReactDOM.render(<Demo />, mountNode);

Geom组件的颜色属性也接受[keyOnWichTheColorDepends, (key) => color]这样的数组。因此，以您为例，它可能类似于以下内容：

import React from "react";
    import {
      G2,
      Chart,
      Geom,
      Axis,
      Tooltip,
      Coord,
      Label,
      Legend,
      View,
      Guide,
      Shape,
      Facet,
      Util
    } from "bizcharts";
    import DataSet from "@antv/data-set";

    class Areanull extends React.Component {
      render() {
        var data = [
          {
            year: "1986",
            ACME: 162,
            Compitor: 42
          },
          {
            year: "1987",
            ACME: 134,
            Compitor: 54
          },
          {
            year: "1988",
            ACME: 116,
            Compitor: 26
          },
          {
            year: "1989",
            ACME: 122,
            Compitor: 32
          },
          {
            year: "1990",
            ACME: 178,
            Compitor: 68
          },
          {
            year: "1991",
            ACME: 144,
            Compitor: 54
          },
          {
            year: "1992",
            ACME: 125,
            Compitor: 35
          },
          {
            year: "1993",
            ACME: 176,
            Compitor: 66
          },
          {
            year: "1994",
            ACME: 156
          },
          {
            year: "1995",
            ACME: 195
          },
          {
            year: "1996",
            ACME: 215
          },
          {
            year: "1997",
            ACME: 176,
            Compitor: 36
          },
          {
            year: "1998",
            ACME: 167,
            Compitor: 47
          },
          {
            year: "1999",
            ACME: 142
          },
          {
            year: "2000",
            ACME: 117
          },
          {
            year: "2001",
            ACME: 113,
            Compitor: 23
          },
          {
            year: "2002",
            ACME: 132
          },
          {
            year: "2003",
            ACME: 146,
            Compitor: 46
          },
          {
            year: "2004",
            ACME: 169,
            Compitor: 59
          },
          {
            year: "2005",
            ACME: 184,
            Compitor: 44
          }
        ];
        var dv = new DataSet.View().source(data);
        dv.transform({
          type: "fold",
          fields: ["ACME", "Compitor"],
          key: "type",
          value: "value"
        });
        const scale = {
          value: {
            alias: "The Share Price in Dollars",
            formatter: function(val) {
              return "$" + val;
            }
          },
          year: {
            range: [0, 1]
          }
        };
        return (
          <div>
            <Chart
              data={dv}
              padding={"auto"}
              scale={scale}
              forceFit
            >
              <Tooltip crosshairs />
              <Axis />
              <Legend />
              <Geom type="area" position="year*value" color="type" shape="smooth" />
              <Geom
                type="line"
                position="year*value"
                color={["type", (type) => type === 'foo' ? 'red' : 'blue']}
                shape="smooth"
                size={2}
              />
            </Chart>
          </div>
        );
      }
    }

    ReactDOM.render(<Areanull />, mountNode)