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

2023-12-13 14:30:59

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"}
      />

文章来源:https://blog.csdn.net/Go_ahead_forever/article/details/134839720
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。