React:echarts

安装

yarn add echarts

使用

/**
 * 使用文档
 * https://echarts.apache.org/handbook/zh/get-started
 *
 * echarts.init 方法及参数介绍
 * https://echarts.apache.org/zh/api.html#echarts.init
 *
 * setOption  参数介绍
 * https://echarts.apache.org/zh/option.html#title
 *
 * Echarts图标模板
 * http://www.isqqw.com/
 */


import { Button } from 'antd'
import Head from 'next/head'
import type { NextPage } from 'next'
import Layout from '../components/Layout'
import * as echarts from 'echarts';
import { useEffect } from 'react';
import styled from 'styled-components';

const Echarts:NextPage = (props:any)=> {

  useEffect(()=>{
    const ele = document.getElementById('echarts')
    if (ele){
      const myChart = echarts.init(ele);
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        grid:{
          // show:false
        },
        legend: {
          data:['销量']
        },
        xAxis: {
          data: [{
            value: '衬衫',
            // 突出衬衫
            textStyle: {
                fontSize: 20,
                color: 'yellow'
            }
          },"羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
          // tool框里显示的名字
          name: '销量1',
          type: 'bar',
          data:[
            {
              value:5,
              // 普通样式
              itemStyle: {
                // 背景色
                color: 'blue',
                 // 阴影的大小
                shadowBlur: 20,
                // 阴影水平方向上的偏移
                shadowOffsetX: 10,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 10,
                // 阴影颜色
                shadowColor: 'rgba(0, 255, 0, 0.5)'
              },
              label: {
                  show: true,
                  // 标签的文字。
                  formatter: 'This is a normal label.'
              },

              // 高亮样式。(鼠标移动上去)
              emphasis: {
                itemStyle: {
                    // 高亮时点的颜色。
                    color: 'yellow'
                },
                label: {
                    show: false,
                    // 高亮时标签的文字。
                    formatter: 'This is a emphasis label.'
                }
              }
            },20, 36, 10, 10, 20
          ],
          },
          {
            name: '销量',
            type: 'line',
            data: [45, 60, 76, 50, 50, 60]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }

  },[])
  return (
    <MainView>
      <div id='echarts' style={{width:500,height:500,backgroundColor:'red'}}/>
    </MainView>
  )
}
const MainView = styled.div`
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
`
export default Echarts

image.png