React使用echarts并且修改echarts图大小

最新推荐文章于 2024-10-13 14:40:06 发布

原创最新推荐文章于 2024-10-13 14:40:06 发布 · 924 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #echarts #前端

本文介绍了如何在React应用中使用echarts库进行数据可视化，包括安装步骤、配置饼图选项、设置tooltip和legend，以及如何修改Echarts图表的大小。

React使用echarts

引入

npm install --save echarts-for-react
npm install --save echarts

使用

<ReactECharts
        option={option}
        notMerge={true}
        lazyUpdate={true}
        style={{
          "width": "100%",
          "height": "800px"
        }}
        theme={"theme_name"}
      />
// 主组件

设置option

  const option = {
    title: {
      text: '接口使用情况统计',
      subtext: '所有接口使用情况',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '80%',
        center: ["50%", "50%"],
        data: originalData.map((item) => {
          return {
            name : item.name,
            value : item.totalNum
          }
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
      }
    ]
  };

修改Echarts的整体大小

能够直接通过style修改

<ReactECharts
        option={option}
        notMerge={true}
        lazyUpdate={true}
        style={{
          "width": "100%",
          "height": "800px"
        }}
        theme={"theme_name"}
      />