React使用ECharts

ECharts官网
安装ECharts
引入模块
入门示例
- 运行结果
向后台发送请求获取数据
设置阴影部分颜色渐变
- 运行结果
x轴的一些配置
- 运行结果
使用echarts水波球
- 在package.json中引入echarts-liquidfill
- 创建waterWavBallEcharts.js
- 引入waterWavBallEcharts
- 完成效果如下

ECharts官网

安装ECharts

 npm install echarts --save

引入模块

// 引入 ECharts 主模块
import * as echarts from 'echarts';

入门示例

import * as echarts from 'echarts';
import ReactDOM from 'react-dom';
import React, { Component } from 'react';class Index extends Component {componentDidMount() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('forms'));// 绘制图表myChart.setOption({   title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量1','销量2']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量1',type: 'bar',data: [5, 20, 36, 10, 10, 20]},{name: '销量2',type: 'line',data: [15, 30, 46, 46, 46, 30]}]});}render() {return (<div id="forms" style={{width:'650px',height:'350px'}}></div>)}
}ReactDOM.render(<Index />,document.getElementById('root')
)

运行结果

向后台发送请求获取数据

import * as echarts from 'echarts';
import ReactDOM from 'react-dom';
import React, { Component } from 'react';class Index extends Component {constructor(props) {super(props);this.state = {data1: [],data2: []}}componentDidMount() {/** 页面加载时从后台获取数据*/this.getData();}getData() { //请求数据函数fetch('请求路径', {method: 'GET'}).then(res => res.json()).then(data => {this.setState({data1: data.data1,data2: data.data2})this.demo()})}demo() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('forms'));// 绘制图表myChart.setOption({title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量1', '销量2']},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: '销量1',type: 'bar',data: this.state.data1},{name: '销量2',type: 'line',data: this.state.data2}]});}render() {return (<div id="forms" style={{ width: '650px', height: '350px' }}></div>)}
}ReactDOM.render(<Index />,document.getElementById('root')
)

设置阴影部分颜色渐变

import * as echarts from 'echarts';
import ReactDOM from 'react-dom';
import React, { Component } from 'react';class Index extends Component {componentDidMount() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('forms'));// 绘制图表myChart.setOption({   title: {text: '阴影部分颜色渐变'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'line',data: [20, 30, 46, 46, 46, 30],areaStyle: {color: {// type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#FF6600' // 0% 处的颜色}, {// offset: 0.5, color: '#FFFFFF' // 100% 处的颜色 offset: 1, color: '#FFFFFF' // 100% 处的颜色}],global: false // 缺省为 false}}}]});}render() {return (<div id="forms" style={{width:'650px',height:'350px'}}></div>)}
}ReactDOM.render(<Index />,document.getElementById('root')
)

运行结果

x轴的一些配置

import * as echarts from 'echarts';
import ReactDOM from 'react-dom';
import React, { Component } from 'react';class Index extends Component {componentDidMount() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('forms'));// 绘制图表myChart.setOption({title: {text: 'demo'},tooltip: {},legend: {data: ['销量']},xAxis: {boundaryGap: false,//默认true，数据显示在刻度线中间，false显示在刻度线上position: "top",//数据显示位置，默认在下面，top显示在上面data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],splitLine: {  show: true, //是否显示分割线lineStyle: { //刻度线的样式设置。color:'#FF9933',opacity: 0.1}},//axisLine: {show:false},//默认true，显示轴线，false不显示轴线},yAxis: {},series: [{name: '销量1',type: 'line',data: [15, 30, 46, 46, 46, 30],}]});}render() {return (<div id="forms" style={{ width: '650px', height: '350px' }}></div>)}
}ReactDOM.render(<Index />,document.getElementById('root')
)

运行结果

使用echarts水波球

在package.json中引入echarts-liquidfill

"echarts-liquidfill": "^2.0.2",

创建waterWavBallEcharts.js

import * as echarts from "echarts";
import "echarts-liquidfill";export function shuiBoQiuchers(id,data) {var chartDom = document.getElementById(id);if (null != chartDom) {var myChart = echarts.init(chartDom);var option = {backgroundColor: '#F0FFF0',series: [{type: 'liquidFill',radius: '80%',center: ['50%', '50%'],data: data,backgroundStyle: {borderWidth: 1,color: '#F0FFFF' },waveLength: '30%',amplitude: 10,//波浪的幅度itemStyle: {color: '#32C5FF'},label: {normal: {formatter: function (value) {return  value.data*100 + '%';},textStyle: {fontSize: 45,color: '#000'}}},outline: {show: false,}},]}option && myChart.setOption(option);}
}

引入waterWavBallEcharts

import React from 'react';
import ReactDOM from 'react-dom';
import {shuiBoQiuchers} from "./waterWavBallEcharts";export class WaterWavBall extends React.Component{componentDidMount(){let data=[0.6];shuiBoQiuchers("shuiboqiu", data);}render(){return (<div id="shuiboqiu" style={{width:600,height:600}}></div>)}
}ReactDOM.render(<React.StrictMode><WaterWavBall /></React.StrictMode>,document.getElementById('root')
);

完成效果如下

React使用ECharts相关推荐

在react中用echarts实现3d地球
在react中用echarts实现3d地球 1.安装echarts,和3d,去官网看如何安装就行 2.导入import echarts from 'echarts' import echartsGL ...
React使用Echarts/Ant-design-charts
目录 React使用Echarts 1.React项目安装导入Echarts 2.组件页面中使用Echarts React使用Ant-design-charts 1.React项目安装导入Ant-de ...
react实现echarts的疫情地图
视频 https://www.bilibili.com/video/BV1T7411W72T?p=12 需要运用react-app和安装echats的插件 json文件是视频中提供的链接复制到本地的 ...
React 集成 ECharts实现柱状图、折线图、饼状图
一.简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Saf ...
项目实战：在线报价采购系统（React +SpreadJS+Echarts）
小伙伴们对采购系统肯定不陌生,小到出差路费.部门物资采购:大到生产计划.原料成本预估都会涉及到该系统. 管理人员可以通过采购系统减少管理成本,说是管理利器毫不过分,对于采购的效率提升也有极大帮助. 但 ...
react使用echarts自定义还原事件
思路: 1.点击还原按钮的时候,对现有的echars进行清楚操作: 2.再将新的options配置数据放入图标里, 3.将自定义的图例按钮的状态更新为true(图例并没有跟echars图在一个容器里) ...
echarts setoption方法_在Vue和React中使用ECharts的多种方法
前言俗话说:"工欲善其事,必先利其器".现如今已经有许多成熟易用的可视化解决方案,例如ECharts,AntV等等.我们可以把这些解决方案比作是一套套成熟的"工具&qu ...
React Echarts 点击事件
在React中用Echarts画了一个环形图,如下. 现在想要实现一个点击事件然后查询了一下Echarts的官方文档.http://www.echartsjs.com/api.html#events ...
在Ant Design Pro（React）中使用ECharts
使用Ant Design Pro解决方案可以快速搭建前端框架,而ECharts是前端最流行,功能最强大的前端图表库. 下面将讲解下如何在Ant Design Pro使用ECharts. Ant Des ...
echarts结合react开发基础知识学习
echarts基础知识学习 1.echarts简介 ECharts,一个使用 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,S ...

React使用ECharts

React使用ECharts

ECharts官网

安装ECharts

引入模块

入门示例

运行结果

向后台发送请求获取数据

设置阴影部分颜色渐变

运行结果

x轴的一些配置

运行结果

使用echarts水波球

在package.json中引入echarts-liquidfill

创建waterWavBallEcharts.js

引入waterWavBallEcharts

完成效果如下

React使用ECharts相关推荐

最新文章

热门文章