1. 下载相关依赖
npm install --save echarts-for-react
2.引入到项目中去
import ReactEchartsfrom 'echarts-for-react'
定义数据类型以及需要用到的需要展示的功能--1
定义数据类型以及需要用到的需要展示的功能--2
定义数据类型以及需要用到的需要展示的功能--3
最外层的结构简称骨架
3.最后渲染页面
用的时候直接把定义的optionUsers给属性option
下面说一下其他的属性以及作用
series接收的是一个数组里面有几个对象就是显示的几个，比如下面的一条数据中显示了三个那么需要series有三个对象
对象里面有一个type属性，这个属性的意思就是需要把数据展示成什么形状其次就是data他是需要展示的数据来源data接收的是一个数组里面直接放我们的数据源，比如[2,5,6,3,2,8,55,44,23,65,65,21,34],data只接受这样的数据源
这个是所有的类型
需要让展示成什么样子就写什么比如说我需要饼图那我就写type: Pie,就OK了很简单的下面来说一下其他的属性以及作用
骨架属性
注意：这些都是一个单独的对象里面放我们需要的属性以及值
我们不止可以设置要显示的形状还可以设置颜色以及粗细等总之这个东西很好玩大家没事的时候一定要玩一玩，相信你们一定会爱上Echarts的接下来再详细的说一下其他的，比如说我们需要如图1-1这样的效果该怎么办呢（这个表暂时没有数据轻忽略），在图中1-2中加入name属性即可
1-1
1-2
下面看一下如何设置展示出来的宽以及颜色1-3
1-3
我们拿条形图说明
series里面的barWidth属性是改变条形图的宽度的一般写百分比为什么呢，原因是如果当前数据很少的情况下图片的宽会拉大格局会显的不是那么不均匀itemStyle属性是用来改变条形图的颜色，切记series里面可以放多个对象具体根据需求来书写。下面我们来说一下series本身具体看1-4，大家看到我用红色的框圈出来一个东西这个浮层是鼠标放到上面才会出来的这个具体是怎么设置的呢具体设置代码看1-5大家看一下就能明白，那么在下就废话不多说了
1-4
1-5
Echarts太强大了里面的属性很多我就不给大家一一说明了总之他很强大，如果大家想深入学习的话就去Earcharts官网看一下把在下把官网的地址贴上来https://www.echartsjs.com/zh/index.html，我给大家说的是一下简单的Echarts入门属性也不难大家可以看一下，欢迎回帖。
网友评论