import React from "react";
import {
G2,
Chart,
Geom,
Axis,
Tooltip,
Coordinate,
Label,
Legend,
View,
Guide,
Shape,
Facet,
Util,
Line,
Point,
Interval,
Interaction
} from "bizcharts@3.5.8";

class Basic extends React.Component {
render() {
const data = [
{
year: "1991",
value: 3,
},
{
year: "1992",
value: 4,
},
{
year: "1993",
value: 5,
},
{
year: "1994",
value: 6,
}
];
const cols = {
value: {
min: 0,
alias: "次数",
},
year: {
range:[0, 1000],
alias: "主观评分",
},
};

return (
  <div>
    <h1 style={{ textAlign: "center" }}>
      柱状图渐变色Demo（type="linear"）
    </h1>
    <h1 style={{ textAlign: "center" }}>柱状图类型Demo（type="cat"）</h1>
    <Chart height={300} data={data} scale={cols} autoFit>
      <Axis name="year" title />
      <Axis name="value" title />
      <Tooltip
        // showCrosshairs
      />
				<Interaction type="active-region" />
   <Geom color={['year', ['#ff0000', '#00ff00','#29b1f1',"#7962ff"]]}/>
      <Interval
        position="year*value"
        color={[
          "year",
          [
            "red",
            "gra",
            "#ff6565",
            // "#ff8f1f",
            // "#00bfd0",
            // "#c19030",
          ],
        ]}
      />
    </Chart>
  </div>
);

}
}

ReactDOM.render(, mountNode);