init

src/components/RightBar/Chart1.jsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react'
+
+import Item from './substitutionCharts/Chart1/index.jsx'
+import Icon1 from '../../assets/Icon/rightChart1ICon.png'
+
+import "./Chart1.less"
+
+export default function Chart1() {
+    return (
+        <div className='rightChart1Border'>
+
+            <div className='RightChart1ItemitemBorder'>
+                <img src={Icon1} alt="图片加载错误" className='RightChart1ItemIcon' />
+                <div className='RightChart1Title'>储能电站</div>
+            </div>
+            <div className='RightChart1ItemBorder'>
+                <Item index={1} data={345} name={'日充电量'} unit={'kwh'} />
+                <Item index={2} data={345} name={'月充电量'} unit={'kwh'} />
+                <Item index={3} data={2} name={'日收益'} unit={'万元'} />
+                <Item index={1} data={215} name={'日放电量'} unit={'kwh'} />
+                <Item index={2} data={345} name={'月放电量'} unit={'kwh'} />
+                <Item index={3} data={12} name={'月收益'} unit={'万元'} />
+            </div>
+
+
+        </div>
+    )
+}

src/components/RightBar/Chart1.less

@@ -0,0 +1,45 @@
+.rightChart1Border {
+  width: 625px;
+  height: 306px;
+  background: url('../../assets/ItemBg.png');
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .RightChart1ItemitemBorder {
+    margin-top: 24px;
+    margin-left: 24px;
+    width: 100%;
+    height: 24px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    vertical-align: middle;
+
+    .RightChart1ItemIcon {
+      width: 24px;
+      height: 24px;
+      margin-top: 3px;
+    }
+
+    .RightChart1Title {
+      font-size: 24px;
+      color: #ffffff;
+      margin-left: 8px;
+      margin-top: -5px;
+      
+    }
+  }
+
+  .RightChart1ItemBorder {
+    width: 579px;
+    height: 230px;
+    margin-left: 16px;
+    margin-bottom: 8px;
+    display: flex;
+    flex-direction: row;
+    justify-content:space-around;
+    flex-wrap: wrap;
+    
+  }
+}

src/components/RightBar/Chart2.jsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { useState, useEffect } from 'react'
+import styled from 'styled-components'
+import { motion } from 'framer-motion'
+
+import Icon from '../../assets/Icon/rightChart2ICon.png'
+
+import Item from './substitutionCharts/Chart2.jsx'
+
+import './Chart2.less'
+
+const Daytitle = "日电量统计";
+const DayLendged = ["日储能", "日放能"];
+const Dayxdata = ["7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00"]
+const Daydata = [[70, 45, 10, 28, 18, 28, 46], [80, 55, 70, 18, 48, 58, 76]]
+
+const Monthtitle = "月电量统计";
+const MonthLendged = ["月储能", "月放能"];
+const Monthxdata = ["一月", "二月", "三月", "四月", "五月", "六月", "七月"]
+const Monthdata = [[70, 45, 10, 28, 18, 28, 46], [80, 55, 70, 18, 48, 58, 76]]
+
+const Yeartitle = "收益统计";
+const YearLendged = ["日收益", "月收益"];
+const Yearxdata = ["2016", "2017", "2018", "2019", "2020", "2021", "2022"]
+const Yeardata = [[70, 45, 10, 28, 18, 28, 46], [80, 55, 70, 18, 48, 58, 76]]
+
+
+const Gap = styled.div`
+width:1px;
+height:80%;
+margin-top:20px;
+
+transform: translatey(-17px);
+background-color:#010D18;
+`
+
+const Gap2 = styled(Gap)`
+transform: translateX(0px);
+transform: translatey(-17px);
+`
+
+// rgba(2,69,126,1)
+export default function Chart2() {
+
+    const [index, setIndex] = useState(1)
+
+    useEffect(() => {
+       const timer = setInterval(() => { SwitchIndex() }, 10000);
+        return () => clearInterval(timer);
+    }, [])
+
+    let num = 1;
+
+
+    function SwitchIndex() {
+        num = num + 1
+        if (num < 4) {
+            setIndex(num)
+        }
+        else {
+            num = 1
+            setIndex(num)
+
+        }
+    }
+
+    function SwitchPage(index) {
+
+        switch (index) {
+            case 1: return <Item title={Daytitle} xdata={Dayxdata} data={Daydata} lendge={DayLendged} />
+            case 2: return <Item title={Monthtitle} xdata={Monthxdata} data={Monthdata} lendge={MonthLendged} />
+            case 3: return <Item title={Yeartitle} xdata={Yearxdata} data={Yeardata} lendge={YearLendged} />
+
+        }
+    }
+
+    return (
+        <div className='rightchart2AllBorder'>
+            <div className='rightchart2ItemitemBorder'>
+                <img src={Icon} alt="图片加载错误" className='rightchart2ItemIcon' />
+                <div className='rightchart2ItemTitle'>光伏发电统计</div>
+            </div>
+            < div className='rightchart2Switchbox'>
+                <div className='rightchart2SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 1 ? 1 : 0})` }}><p>日</p></ div>
+                <Gap style={{opacity:index==3?'100%':'0%',}}></Gap>
+                <div className='rightchart2SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 2 ? 1 : 0})` }}><p>月</p> </ div>
+                <Gap2 style={{opacity:index==1?'100%':'0%',}}></Gap2>
+                <div className='rightchart2SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 3 ? 1 : 0})` }}><p>年</p></ div>
+            </ div>
+            <motion.div className='rightchart2ItemBorder'
+            // key={index}
+            // initial={{ opacity: 0, y: 5 }}
+            // animate={{ opacity: 1, y: 0 }}
+            // transition={{ ease: "easeIn", duration: 0.5 }}
+            >
+
+                {SwitchPage(index)}
+            </motion.div>
+
+        </div>
+
+
+
+
+
+
+
+    )
+}

src/components/RightBar/Chart2.less

@@ -0,0 +1,71 @@
+.rightchart2AllBorder {
+  width: 625px;
+  height: 306px;
+  background: url('../../assets/ItemBg.png');
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-top: 24px;
+
+  .rightchart2ItemitemBorder {
+    margin-top: 24px;
+    margin-left: 24px;
+    width: 100%;
+    height: 24px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+
+
+    .rightchart2ItemIcon {
+      width: 24px;
+      height: 24px;
+      margin-top: 3px;
+    }
+
+    .rightchart2ItemTitle {
+      font-size: 24px;
+      color: #ffffff;
+      margin-left: 8px;
+      margin-top: -5px;
+
+    }
+  }
+
+
+  .rightchart2Switchbox {
+    width: 150px;
+    height: 32px;
+    background-color: #03233C;
+    align-self: flex-end;
+    margin-right: 15px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .rightchart2SlelectBox {
+      width: 33%;
+      height: 100%;
+   
+      border-radius: 5px;
+
+    }
+
+    .rightchart2SlelectBox p {
+      margin: 3 auto;
+      color: #fff;
+      font-size: 15px;
+      text-align: center;
+      cursor : pointer;
+    }
+  }
+
+  .rightchart2ItemBorder {
+    width: 95%;
+    height: 300px;
+    margin-left: 16px;
+    margin-top: -15px;
+
+  }
+}

src/components/RightBar/Chart3.jsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react'
+import { motion } from "framer-motion"
+import styled from 'styled-components'
+
+
+import Item from './substitutionCharts/Chart3.jsx'
+import Icon from '../../assets/Icon/rightChart3ICon.png'
+import './Chart3.less'
+
+const Dayxdata = ["7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"]
+const Daydata = [70, 45, 10, 28, 18, 28, 46, 18, 28, 46, 20]
+
+const Monthxdata = ["一月", "二月", "三月", "四月", "五月", "六月", "七月"]
+const Monthdata = [70, 45, 10, 28, 18, 28, 46]
+
+const Yearxdata = ["2016", "2017", "2018", "2019", "2020", "2021", "2022"]
+const Yeardata = [70, 45, 10, 28, 18, 28, 46]
+
+
+
+
+const Gap = styled.div`
+width:1px;
+height:80%;
+margin-top:20px
+transform: translateX(22px);
+transform: translatey(3px);
+background-color:#010D18;
+`
+
+const Gap2 = styled(Gap)`
+transform: translateX(0px);
+transform: translatey(3px);
+`
+
+
+
+export default function Chart3() {
+
+    const [index, setIndex] = useState(1)
+
+    useEffect(() => {
+        setInterval(() => { SwitchIndex() }, 10000);
+    }, [])
+
+
+
+    let num = 1;
+
+
+    function SwitchIndex() {
+        num = num + 1
+        if (num < 4) {
+            setIndex(num)
+        }
+        else {
+            num = 1
+            setIndex(num)
+
+        }
+    }
+
+    function SwitchPage(index) {
+
+        switch (index) {
+            case 1: return <Item xdata={Dayxdata} data={Daydata} />
+            case 2: return <Item xdata={Monthxdata} data={Monthdata} />
+            case 3: return <Item xdata={Yearxdata} data={Yeardata} />
+
+        }
+    }
+
+
+
+    return (
+        <div className='RightChart3AllBorder'>
+
+            <div className='RightChart3ItemitemBorder'>
+                <img src={Icon} alt="图片加载错误" className='RightChart3ItemIcon' />
+                <div className='RightChart3ItemTitle'>储能电站</div>
+            </div>
+            < div className='rightchart3Switchbox'>
+                <div className='rightchart3SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 1 ? 1 : 0})` }}><p>日</p></ div>
+                <Gap style={{ opacity: index == 3 ? '100%' : '0%', }}></Gap>
+                <div className='rightchart3SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 2 ? 1 : 0})` }}><p>月</p> </ div>
+                <Gap2 style={{ opacity: index == 1 ? '100%' : '0%', }}></Gap2>
+                <div className='rightchart3SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 3 ? 1 : 0})` }}><p>年</p></ div>
+            </ div>
+            <motion.div className='RightChart3ItemBorder'
+                key={index}
+                initial={{ opacity: 0, y: 5 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ ease: "easeIn", duration: 0.5 }}
+            >
+                {SwitchPage(index)}
+            </motion.div>
+        </div>
+
+    )
+}

src/components/RightBar/Chart3.less

@@ -0,0 +1,70 @@
+.RightChart3AllBorder {
+  width: 625px;
+  height: 306px;
+  background: url('../../assets/ItemBg.png');
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .RightChart3ItemitemBorder {
+    margin-top: 24px;
+    margin-left: 24px;
+    width: 100%;
+    height: 24px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    vertical-align: middle;
+
+    .RightChart3ItemIcon {
+      width: 24px;
+      height: 24px;
+      margin-top: 3px;
+     
+    }
+
+    .RightChart3ItemTitle {
+      font-size: 24px;
+      color: #ffffff;
+      margin-left: 8px;
+      margin-top: -5px;
+    }
+  }
+
+  .rightchart3Switchbox {
+    width: 150px;
+    height: 32px;
+    background-color: #03233C;
+    align-self: flex-end;
+    
+    margin-right: 15px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .rightchart3SlelectBox {
+      width: 33%;
+      height: 100%;
+   
+      border-radius: 5px;
+
+    }
+
+    .rightchart3SlelectBox p {
+      margin: 3 auto;
+      color: #fff;
+      font-size: 15px;
+      text-align: center;
+      cursor : pointer;
+    }
+  }
+
+  .RightChart3ItemBorder {
+    width: 95%;
+    height: 227px;
+    margin-left: 16px;
+    margin-bottom: 16px;
+    
+  }
+}

src/components/RightBar/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+
+import Chart1 from './Chart1'
+
+import Chart2 from './Chart2'
+
+import Chart3 from './Chart3'
+// import RightChart2 from './Chart2'
+
+//引用原来的公共工程
+import RightChart2 from './Chart2'
+
+
+import RightChart3 from './Chart3'
+
+import './index.less'
+
+export default function index() {
+    return (
+        <div className='RightBorder'>
+            <Chart1 />
+            <Chart2 />
+            <Chart3 />
+        </div>
+    )
+}

src/components/RightBar/index.less

@@ -0,0 +1,18 @@
+.RightBorder {
+  width: 625px;
+  height: 966px;
+  margin-left: 24px;
+  display: flex;
+  flex-direction:column;
+  justify-content: flex-start;
+
+  .RightBorder1 {
+    width: 440px;
+    height: 340px;
+  }
+  .RightBorder2 {
+    width: 850px;
+    height: 305px;
+    margin-left: 25px;
+  }
+}

src/components/RightBar/substitutionCharts/Chart1/Chart1.jsx

@@ -0,0 +1,126 @@
+
+import React, { Component } from 'react';
+import './Chart1.less'
+import ReactECharts from 'echarts-for-react';
+
+class Chart1 extends Component {
+
+    switchColor = (index) => {
+
+        switch (index) {
+            case 1: return '#52FFF8';
+            case 2: return '#52FFF8';
+            case 3: return '#52FFF8';
+        }
+    }
+
+    getOption = () => (
+        {
+            title: [{
+                text: this.props.data,
+                x: "center",
+                y: "28%",
+                textStyle: {
+                    fontWeight: "normal",
+                    color: this.props.color,
+                    fontSize: 24,
+                },
+
+            },
+            {
+                text: this.props.unit,
+                x: "center",
+                y: "55%",
+                textStyle: {
+                    fontWeight: "normal",
+                    color: this.props.color,
+                    fontSize: 15,
+                },
+
+            },
+            ],
+
+            series: [
+                {
+                    name: "Line 1",
+                    type: "pie",
+                    clockWise: false,
+                    radius: [40, 46],
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false,
+                            },
+                            labelLine: {
+                                show: false,
+                            },
+                            shadowBlur: 5,
+                            shadowColor:this.props.color,
+                        },
+                    },
+                    hoverAnimation: false,
+                    data: [
+                        {
+                            value: 25,
+                            name: "invisible",
+                            itemStyle: {
+                                normal: {
+                                    color: "rgba(255,255,255,0.5)" //未完成的颜色
+                                }
+                            }
+                        },
+                        {
+                            value: 75,
+                            name: "01",
+                            itemStyle: {
+                                normal: {
+                                    color: this.props.color //完成的颜色
+                                }
+                            }
+                        },
+                       
+                    ],
+                },
+                {
+                    name: "Line 2",
+                    type: "pie",
+                    animation: false,
+                    clockWise: false,
+                    radius: [33, 36],
+                    itemStyle: {
+                        
+                        normal: {
+                            label: {
+                                show: false,
+                            },
+                            color: this.props.color, //内圈颜色
+                            opacity: 0.2,
+
+                        }
+                    },
+                    hoverAnimation: false,
+                    data: [
+                        {
+                            value: 100,
+                            name: "02",
+
+                        },
+                        {
+                            value: 0,
+                            name: "invisible",
+                        },
+                    ],
+                },
+            ],
+        })
+
+    render() {
+        return (
+            <div className='RightChart3itemDetailBorder'>
+                <ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
+            </div >
+        );
+    }
+}
+
+export default Chart1;

src/components/RightBar/substitutionCharts/Chart1/Chart1.less

@@ -0,0 +1,5 @@
+.RightChart3itemDetailBorder {
+    width: 100%;
+    height: 100%;
+    overflow:visible;
+}

src/components/RightBar/substitutionCharts/Chart1/index.jsx

@@ -0,0 +1,100 @@
+
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import RightChart1Icon2 from '../../../../assets/Icon/RightChart1Icon2.png'
+
+import Chart1 from './Chart1.jsx'
+
+import './index.less'
+
+
+//#52FFF8
+
+
+function Index(props) {
+
+
+    const switchColor = (index) => {
+
+        switch (index) {
+            case 1: return '#52FFF8';
+            case 2: return '#49B2FF';
+            case 3: return '#FFB94D';
+            default: return '#fff'
+        }
+    }
+
+
+
+    let Border = styled.div`
+    width: 74px;
+    height: 24px;
+    margin-top:50px;
+    overflow: hidden;
+    `
+
+
+
+    let Ion2 = styled.div`
+    width: 100%;
+    height: 100%;
+    float:left;
+    background: url(${RightChart1Icon2});
+    background-repeat: no-repeat;
+    transform: translatex(-82px);      
+    filter:drop-shadow(82px 1px ${switchColor(props.index)});
+    `
+
+    //最大值75
+    let Stuff = styled.div`
+    float:left;
+    margin-top:-17.5px;
+    transform: translatex(3px); 
+    width:${58}%;
+    height: 12px;
+    background: linear-gradient(to right,#051226,${switchColor(props.index)})
+    `
+
+
+    //中间三条gap的位置
+
+    let Gap1 = styled.div`
+    // float:left;
+    margin-top:6px;
+    transform: translatex(15px); 
+    position:absolute;
+    width: 2px;
+    height:13px;
+    background-color: #051226;
+    `
+
+    const Gap2 = styled(Gap1)`
+    transform: translatex(29px); 
+    `;
+
+    const Gap3 = styled(Gap1)`
+    transform: translatex(45px); 
+    `;
+
+
+    return (
+
+        <div className='RightChart1ItemBorderRow' >
+            <div className='RightChart1ItemB1'>
+                <Chart1 color={switchColor(props.index)} data={props.data} unit={props.unit}/>
+            </div>
+            <div className='RightChart1ItemB2'>
+                <h2 className='RightChart1ItemB2TXT'>{props.name}</h2>
+                <Border>
+                    <Ion2 ></Ion2>
+                    <Stuff></Stuff>
+                    <Gap1></Gap1>
+                    <Gap2></Gap2>
+                    <Gap3></Gap3>
+                </Border>
+            </div>
+        </div>
+    );
+}
+
+export default Index;

src/components/RightBar/substitutionCharts/Chart1/index.less

@@ -0,0 +1,33 @@
+.RightChart1ItemBorderRow {
+    width: 178px;
+    height: 96px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+
+    .RightChart1ItemB1 {
+        width: 96px;
+        height: 96px;
+        overflow: visible;
+    }
+
+    .RightChart1ItemB2 {
+        width: 76px;
+        height: 76px;
+        margin-top: 10px;
+        margin-left: 8px;
+     
+
+
+        .RightChart1ItemB2TXT {
+            font-size:16px;
+            font-weight: 400px;
+            float: left;
+            color: #fff;
+            position: absolute;
+            margin-top: 15px;
+            white-space: nowrap;
+        }
+
+    }
+}

src/components/RightBar/substitutionCharts/Chart2.jsx

@@ -0,0 +1,133 @@
+
+import React, { Component } from 'react';
+import './Chart2.less'
+import ReactECharts from 'echarts-for-react';
+
+import * as echarts from 'echarts';
+
+var fontColor = '#fff'
+var lineColor = 'rgba(33, 50, 89,0.8)'
+
+class Chart2 extends Component {
+
+    getOption = () => ({
+        
+        grid: {
+            left: "2%",
+            right: "4%",
+            bottom: "5%",
+            top: "15%",
+            containLabel: true,
+        },
+        legend: {
+            data: this.props.lendge,
+            left: "2%",
+            top: 0,
+            textStyle: {
+                color: "#fff",
+            },
+            itemWidth: 12,
+            itemHeight: 10,
+            // itemGap: 35
+        },
+        xAxis: {
+            type: "category",
+            data:this.props.xdata,
+            axisLine: {
+                lineStyle: {
+                    color: lineColor,
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    color: lineColor,
+                    width: 0.5,
+                },
+            },
+            axisLabel: {
+                show: true,
+                color: fontColor,
+                textStyle: {
+                    fontFamily: "Microsoft YaHei",
+                },
+            },
+        },
+        yAxis: {
+            type: "value",
+            max:(value) => {  // 百位起最大值向上取整
+                return Math.ceil(value.max / 100) * 100;
+              },
+              axisLabel: {
+                show: true,
+                color: fontColor,
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: lineColor,
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    color: lineColor,
+                    width: 0.5,
+                },
+            },
+        },
+        series: [
+            {
+                name: this.props.lendge[0],
+                type: "bar",
+                barWidth: "15%",
+                itemStyle: {
+                    normal: {
+                        color: '#92D675',
+                        barBorderRadius: 2,
+                    },
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    valueAnimation: true,
+                    color: "#fff"
+                },
+                data: this.props.data[0],
+            },
+            {
+                name:this.props.lendge[1],
+                type: "bar",
+                barWidth: "15%",
+                itemStyle: {
+                    normal: {
+                       
+                        color:  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(92,183,255,1)' },
+                            { offset: 0.5, color: 'rgba(92,183,255,1)' },
+                            { offset: 1, color: 'rgba(90,107,255,1)' }
+                        ]),
+                        
+                        barBorderRadius: 3,
+
+                    },
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    valueAnimation: true,
+                    color: "#fff"
+                },
+                data: this.props.data[1],
+            },],
+
+    })
+
+    render() {
+        return (
+            <div className='RightChart2itemDetailBorder'>
+                <ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
+            </div >
+        );
+    }
+}
+
+export default Chart2;

src/components/RightBar/substitutionCharts/Chart2.less

@@ -0,0 +1,5 @@
+.RightChart2itemDetailBorder {
+    width: 100%;
+    height: 100%;
+  
+}

src/components/RightBar/substitutionCharts/Chart3.jsx

@@ -0,0 +1,106 @@
+
+import React, { Component } from 'react';
+import './Chart3.less'
+import ReactECharts from 'echarts-for-react';
+
+//颜色渐变必须要
+import * as echarts from 'echarts';
+
+var fontColor = '#fff'
+var lineColor = 'rgba(33, 50, 89,0.8)'
+
+class Chart3 extends Component {
+
+    getOption = () => ({
+        grid: {
+            left: "2%",
+            right: "4%",
+            bottom: "5%",
+            top: "8%",
+            containLabel: true,
+          },
+        xAxis: {
+            type: "category",
+            data: this.props.xdata,
+            axisLine: {
+                lineStyle: {
+                    color: lineColor,
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    color: lineColor,
+                    width: 0.5,
+                },
+            },
+            axisLabel: {
+                show: true,
+                color: fontColor,
+                textStyle: {
+                    fontFamily: "Microsoft YaHei",
+                },
+            },
+        },
+        yAxis: {
+            type: "value",
+            scale:true,
+            max:(value) => {  // 百位起最大值向上取整
+                return Math.ceil(value.max / 100) * 100;
+              },
+              axisLabel: {
+                show: true,
+                color: fontColor,
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: lineColor,
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    color: lineColor,
+                    width: 0.5,
+                },
+            },
+        },
+        series: [
+            {
+                name: "M1",
+                type: "bar",
+                barWidth: "15%",
+                itemStyle: {
+                    normal: {
+                        color:  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(92,183,255,1)' },
+                            { offset: 0.5, color: 'rgba(92,183,255,1)' },
+                            { offset: 1, color: 'rgba(90,107,255,1)' }
+                        ]),
+                        barBorderRadius: 3,
+                    },
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    valueAnimation: true,
+                    color:"#fff"
+                  },
+                data: this.props.data,
+            },
+          
+        ],
+
+    })
+
+    render() {
+        return (
+            <div className='RightChart3itemDetailBorder'>
+
+                <ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
+
+            </div >
+        );
+    }
+}
+
+export default Chart3;

src/components/RightBar/substitutionCharts/Chart3.less

@@ -0,0 +1,5 @@
+.RightChart3itemDetailBorder {
+    width: 100%;
+    height: 100%;
+  
+}