1. import styles from './index.less';
  2. import fullScreen from '@sl-theia/full-screen';
  3. import { useState, useEffect, useRef } from 'react';
  4. // import { useSocket } from '@sl-theia/theia-socket-io-client';
  5. import * as echarts from 'echarts';
  6. import Title from '@/components/Title';
  7. const titlesData = [
  8.   { name: '强农产业', spell: 'Strengthening agricultural industry' },
  9. ]
  10. const Industry = ((props: any) => {
  11.   const barChartRef = useRef<HTMLDivElement>(null);
  12.   useEffect(()=>{
  13.     chart();
  14.   },[]);
  15.   const chart = ()=>{
  16.     const {current} = barChartRef;
  17.     if(current){
  18.       let myChart = echarts.init(current,undefined);
  19.       myChart.setOption({
  21.       })
  22.     }
  23.   }
  24.   return (<>
  25.     <div className={styles.leftItem}>
  26.       <Title data={titlesData[0]}></Title>
  27.       <div ref={barChartRef} className={styles.barChart} style={{ width: '100%', height: '100%' }}></div>
  28.     </div>
  29.   </>
  30.   )
  31. })
  32. export default Industry

柱状图间隔颜色

  1.                   itemStyle: {
  2.                     color: function(params:any) {
  3.                       var colorList = [
  4.                         [
  5.                           {
  6.                             offset: 0,
  7.                             color: 'rgba(0,204,255, 0.1)', // 0% 处的颜色
  8.                           },
  9.                           {
  10.                             offset: 0.5,
  11.                             color: 'rgba(0,204,255, 0.5)', // 100% 处的颜色
  12.                           },
  13.                           {
  14.                             offset: 1,
  15.                             color: 'rgba(0,204,255)', // 100% 处的颜色
  16.                           }],
  17.                           [
  18.                             {
  19.                               offset: 0,
  20.                               color: 'rgba(249, 191, 0, 0.1)', // 0% 处的颜色
  21.                             },
  22.                             {
  23.                               offset: 0.5,
  24.                               color: 'rgba(249, 191, 0, 0.5)', // 100% 处的颜色
  25.                             },
  26.                             {
  27.                               offset: 1,
  28.                               color: '#FFCC00', // 100% 处的颜色
  29.                             }]
  30.                       ];
  31.                       return new echarts.graphic.LinearGradient(0,0,0,1,colorList[(params.dataIndex)%2])
  32.                     }
  33.                   },