在react中引用echarts

如何在react中引用echarts?请往下看:

首先在项目终端去安装

npm install echarts --save


然后在import里面输入
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

进行引用

之后写入项目中,可以去echarts官方文档里去复制粘贴
 

<div id="main" style="width: 600px;height:400px;"></div>
var myChart = echarts.init(document.getElementById('main'));
        var option =({
           title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
        };
        myChart.setOption(option);

相关推荐

  1. react引用echarts

    2023-12-28 15:12:07       56 阅读
  2. React使用React.createRef:更优雅的DOM引用方式

    2023-12-28 15:12:07       56 阅读
  3. uniapp怎么引入echarts(最简单)

    2023-12-28 15:12:07       36 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-28 15:12:07       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-28 15:12:07       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-28 15:12:07       82 阅读
  4. Python语言-面向对象

    2023-12-28 15:12:07       91 阅读

热门阅读

  1. Kotlin 枚举类

    2023-12-28 15:12:07       58 阅读
  2. 工具系列:TensorFlow决策森林_(6)模型预测

    2023-12-28 15:12:07       48 阅读
  3. Kotlin 密封类与接口

    2023-12-28 15:12:07       61 阅读
  4. 计算机网络的7层协议和4层协议的区别

    2023-12-28 15:12:07       57 阅读
  5. Linux:环境变量

    2023-12-28 15:12:07       61 阅读
  6. 2024 年软件工程将如何发展

    2023-12-28 15:12:07       47 阅读
  7. leetcode18. 四数之和

    2023-12-28 15:12:07       59 阅读
  8. go语言10进制与16进制转换

    2023-12-28 15:12:07       56 阅读
  9. 关于:网络安全

    2023-12-28 15:12:07       56 阅读
  10. mysql导入tab符号txt文件到数据库

    2023-12-28 15:12:07       52 阅读
  11. Vue.js

    Vue.js

    2023-12-28 15:12:07      41 阅读
  12. 如何判断网站服务器的访问承载量?

    2023-12-28 15:12:07       54 阅读
  13. html隐藏元素的方法

    2023-12-28 15:12:07       55 阅读