react之引用echarts
npm:
npm install echarts --save
代码:
import React, { Component } from 'react'; // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts'; // 引入柱状图 import 'echarts/lib/chart/bar'; // 引入提示框和标题组件 import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/title'; class EchartsTest extends Component { componentDidMount() { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } render() { return ( <div id="main" style={{ 400, height: 400 }}></div> ); } } export default EchartsTest;
使用 echarts 提供的模块化加载方法,按需导入我们需要的图表。
转载自:https://www.cnblogs.com/wgl1995/p/6489038.html