React中使用图表插件(ECharts)

在React项目中是如何使用ECharts的呢

简单粗暴不多bb 直接上代码 新手上路 不喜勿喷

ECharts文档:https://www.echartsjs.com/zh/option.html#tooltip.trigger

代码如下：

import React from 'react'; import {Card} from 'antd'; import ReactEcharts from 'echarts-for-react'; export default class Line extends React.Component{ componentWillMount(){ //主题的设置要在willmounted中设置 } getOption =()=> { let option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { data:['蒸发量','降水量','平均温度'] }, xAxis: [ { type: 'category', data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', name: '水量', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: '温度', min: 0, max: 25, interval: 5, axisLabel: { formatter: '{value} °C' } } ], series: [ { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, { name:'降水量', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] }, { name:'平均温度', type:'line', yAxisIndex: 1, data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] } ] }; return option } render(){ return( <div> <Card title="折线图表之一" style={{margin:'20px'}}> <ReactEcharts option={this.getOption()} style={{width:'500px'}}/> </Card> </div> ) } }

步骤说明

第一步：npm安装echarts-for-react

npm install --save echarts-for-react npm install echarts --save // 如有报错找不到echarts模块，需安装一下echarts

第二步：引入模块

import ReactEcharts from 'echarts-for-react';

第三步： 引入组建

<ReactEcharts option={this.getOption()} theme="Imooc"/>

喜欢文章 反手就是一个赞console.log(([][[]]+[])[+!![]]+([]+{})[!+[]+!![]])