Color

colorMapping

colorMapping

import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "color": {
    "colorMapping": {
      "利润": "yellow",
      "E": "green",
      "E-销售额": "red"
    }
  },
  "dataset": [
    {
      "date": "2019",
      "type": "A",
      "profit": 10,
      "sales": 20
    },
    {
      "date": "2019",
      "type": "B",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2019",
      "type": "C",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2019",
      "type": "D",
      "profit": 50,
      "sales": 100
    },
    {
      "date": "2019",
      "type": "E",
      "profit": 40,
      "sales": 80
    },
    {
      "date": "2020",
      "type": "A",
      "profit": 10,
      "sales": 20
    },
    {
      "date": "2020",
      "type": "B",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2020",
      "type": "C",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2020",
      "type": "D",
      "profit": 50,
      "sales": 100
    },
    {
      "date": "2020",
      "type": "E",
      "profit": 40,
      "sales": 80
    }
  ],
  "dimensions": [
    {
      "id": "date",
      "alias": "日期"
    },
    {
      "id": "type",
      "alias": "类型"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "利润"
    },
    {
      "id": "sales",
      "alias": "销售额"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

colorScheme

colorScheme

import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "color": {
    "colorScheme": [
      "#cdb4db",
      "#ffc8dd",
      "#ffafcc",
      "#bde0fe",
      "#a2d2ff"
    ]
  },
  "dataset": [
    {
      "date": "2019",
      "type": "A",
      "profit": 10,
      "sales": 20
    },
    {
      "date": "2019",
      "type": "B",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2019",
      "type": "C",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2019",
      "type": "D",
      "profit": 50,
      "sales": 100
    },
    {
      "date": "2019",
      "type": "E",
      "profit": 40,
      "sales": 80
    },
    {
      "date": "2020",
      "type": "A",
      "profit": 10,
      "sales": 20
    },
    {
      "date": "2020",
      "type": "B",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2020",
      "type": "C",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2020",
      "type": "D",
      "profit": 50,
      "sales": 100
    },
    {
      "date": "2020",
      "type": "E",
      "profit": 40,
      "sales": 80
    }
  ],
  "dimensions": [
    {
      "id": "date",
      "alias": "日期"
    },
    {
      "id": "type",
      "alias": "类型"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "利润"
    },
    {
      "id": "sales",
      "alias": "销售额"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}