【react + BizCharts】

import React from 'react';

import {

  G2,

  Chart,

  Geom,

  Axis,

  Tooltip,

  Coord,

  Label,

  Legend,

  View,

  Guide,

  Shape,

  Facet,

  Util,

} from 'bizcharts';

const { Line } = Guide;

/**

1. 这里使用的是原始数据, 所以是 dates * first, 而格式化后的应该是 dates * value 把所有的 first 换成 value

2. colors: 自己可定义, 看是否可以使用对象(以方便日后指定关键词的颜色对应)

3. 上边数据中注释掉的是超出了 keywordTrend最小值和最大值范围之外的数据, 导致线太长出去了

*/

class Series extends React.Component {

  state={

    

  }

  render() {

    //平均值数组 value平均值

    let avgSpreadScore = [

    {          

      key: "冬天",

      value: 8,

      checked: true,

      startDate: "2000-01-03 00:39:29",

      endDate: "2021-08-17 18:06:55",

    },

    {

      key: "夏天",

      value: 28,

      checked: true,

      startDate: "2000-01-03 00:39:29",

      endDate: "2021-08-17 18:06:55",

    },

  ]

    let keywordTrend=[

    { keyword: "冬天", dates: "2000-01-03 00:39:29", first: -3 },

    { keyword: "冬天", dates: "2005-07-22 13:57:24", first: 0 },

    { keyword: "冬天", dates: "2010-10-10 19:40:08", first: 9 },

    { keyword: "冬天", dates: "2015-08-25 20:59:11", first: 11 },

    { keyword: "冬天", dates: "2021-08-17 18:06:55", first: 5 },

    { keyword: "夏天", dates: "2000-01-03 00:39:29", first: 33 },

    { keyword: "夏天", dates: "2005-07-22 13:57:24", first: 45 },

    { keyword: "夏天", dates: "2010-10-10 19:40:08", first: 27 },

    { keyword: "夏天", dates: "2015-08-25 20:59:11", first: 32 },

    { keyword: "夏天", dates: "2021-08-17 18:06:55", first: 30 },

  ]

    const cols = {

      dates: {

        range: [0.05, 0.95],

        type:'timeCat'

      },

      first: {

        // min: 0,// 这里要设置一个最小值, 否则可能图表中按照了 keywordTrend 中的最小值设置Y轴最小值

      }

    };

    const colors = ["#f72525", "#ea870b"];

    

    return (

      <div>

        <Chart height={400} data={keywordTrend} filter={[['keyword',(keyword) => {

            console.log(keyword)

            return avgSpreadScore.find(d => d.key === keyword).checked;

          }]]} scale={cols} autoFit>

          <Legend onClick={(ev) => {

              console.log(ev);

              const key = ev.item.value;

              avgSpreadScore.find(d => d.key === key).checked = ev.checked;

              

            }} 

            position="top-center"

            offsetY={8}

            marker={{

                symbol: (x, y, radius) => {

                    const r = radius / 2;

                    return [

                        ['M', x - 3 * r, y],

                        ['L', x + 3 * r, y],

                        ['M', x - r, y],

                        ['A', r, r, 0, 0, 0, x + r, y],

                        ['A', r, r, 0, 0, 0, x - r, y],

                    ];

                },

            }}

            />

            <Tooltip shared={true}/>

            <Axis name="dates" />

            <Axis name="first" />

              {/*shape="smooth" 可配置为曲线，不设置为折线*/}

            <Geom type="line" shape="circle" position="dates*first" size={1} color={['keyword', colors]} />

            <Geom type="point" position="dates*first" size={2} color={['keyword', colors]} 

             tooltip={['dates*first*keyword', (time, first, keyword) => {

            return {

                //自定义 tooltip 上显示的 title 显示内容等。

                name: keyword,

                title: time,

                value: first + '°'

            };

        }]}

            />

            {/*<Geom/> 和 <Guide/> 是独立控制的，可以通过chart filter来建立交互联动*/}

            <Guide>

              {avgSpreadScore.map((item, index) => {

                if (!item.checked) {

                  return;                

                }

                return <Line

                top

                start={{ dates: item.startDate, first: item.value }}

                end={{ dates: item.endDate, first: item.value }}

                lineStyle={{

                  lineWidth: 2,

                  // 手动维护颜色

                  stroke: colors[index],

                }}

                 /** 调整位置 */

                text={{

                  position: 'end',

                  style: {

                    fill: colors[index],

                  },

                  offsetX: -320,

                  content: `均值${item.key}`

                 }}

                />

              })}

          </Guide>

        </Chart>

      </div>

    );

  }

}

ReactDOM.render(<Series />, mountNode)