Geom Color 线性渐变类型

2020-12-07 03:01:29 阅读：243 来源： 互联网

标签：const render Color 渐变 value 柱状图 Geom year

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);

标签：const,render,Color,渐变,value,柱状图,Geom,year
来源： https://www.cnblogs.com/zhang-blog/p/14095421.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Geom Color 线性渐变 类型

Geom Color 线性渐变类型