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(([][[]]+[])[+!![]]+([]+{})[!+[]+!![]])

React中使用图表插件(ECharts)相关推荐

Vue 使用图表插件 -- Echarts
目前常用的图表插件有: charts Echarts highcharts d3.js 这次根据Vue 项目中 Echarts 的应用记一笔. 安装插件 npm install echarts -S ...
canvas js 绘图插件_[开盖即食]小程序图表插件eCharts实战
H5时代用来做图表的插件有很多比如:ECharts.Bizcharts.JSCharts等,而这次的小程序本人选用了 ECharts 作为图表组件. 1.选择原因主要有3点: 官方某度在持续维护这个插 ...
js图表插件Echarts
在制作网页的时候,我们有时会需要制作图表,自己画一个很麻烦,这个时候就可以用到echarts. echarts 1.下载js文件使用的时候需要下载echarts的js文件(官网链接),可以去官网下载 ...
【ECharts】百度图表插件ECharts使用
百度ECharts报表呈现组件,挺不错的一个组件官方网址:http://echarts.baidu.com/ 下载 ECharts http://echarts.baidu.com/download ...
react中使用macy插件实现瀑布流布局
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户.适合比较复杂的布局 1.首先先安装并且在页面引入安装方式根据自己的需 ...
echarts setoption方法_在Vue和React中使用ECharts的多种方法
前言俗话说:"工欲善其事,必先利其器".现如今已经有许多成熟易用的可视化解决方案,例如ECharts,AntV等等.我们可以把这些解决方案比作是一套套成熟的"工具&qu ...
保姆级教程｜ECharts图表插件一文搞懂！
黑马程序员视频库播妞QQ号:3077485083 传智播客旗下互联网资讯.学习资源免费分享平台在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一 ...
react 中使用Swiper轮播图插件
第一步.安装 npm i swiper 第二步.使用 import { Swiper, SwiperSlide } from 'swiper/react'; //根据自己的需要引用样式 import ...
canvas js 绘图插件_快速入门前端图表插件Echart
在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一点的图表怎么办呢? 而且黑马的课程大纲已经把canvas课程删掉了,既然canvas有用,为什么要 ...

React中使用图表插件(ECharts)

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

步骤说明

React中使用图表插件(ECharts)相关推荐

最新文章

热门文章