react 图表CHarts的使用

程序员会变秃头

已于 2024-07-19 20:58:42 修改

阅读量321

点赞数 3

文章标签： react.js javascript ecmascript

于 2024-07-19 19:59:53 首次发布

本文链接：https://blog.csdn.net/m0_74199622/article/details/140558317

版权

安装插件

npm install echarts --save

npm i echarts-for-react

组件内使用

import React from 'react'
import ReactECharts from 'echarts-for-react';
export default function index() {
  const option = {
    title: {
      text: 'ECharts Example'
    },
    tooltip: {},
    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {},
    series: [
      {
        name: 'Sales',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  };


  return (
    <div>
      <h1>柱状图</h1>
      <ReactECharts option={option} style={{ height: 400, width: '100%' }} />
    </div>
  )
}