可视化/数字孪生专业社区
资源中心
问答
文章
实用工具
ByteVCharts
开源中台
申请建模
申请帮助
登录
注册
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
业务咨询
开发咨询
微信咨询
杜老师
黄老师
熊老师
支付信息
×
购买文章
(3)、React中使用ECharts——柱状图
订单金额
¥
0
实付金额
¥
0
我已阅读并同意ByteV组件购买协议
取消
提交订单
支付宝支付
微信支付
提交订单
2
点赞
1
评论
收藏
分享
举报
(3)、React中使用ECharts——柱状图
小白
关注
已关注
0
2
1
4446
发表于 2020-05-27 06:48:50
### 一、柱形图实例1 ##### 1、代码如下: __ import React, { Component } from 'react' import { Card } from 'antd' // import echarts from 'echarts' //按需导入 import echarts from 'echarts/lib/echarts' //导入柱形图 import 'echarts/lib/chart/bar' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/title' import 'echarts/lib/component/legend' import 'echarts/lib/component/markPoint' import ReactEcharts from 'echarts-for-react' //引入样式 import '../common.less' export default class BarA extends Component { getOption = ()=>{ let option = { title: { text: '用户订单' }, tooltip:{ trigger: 'axis' }, xAxis: { data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'] }, yAxis: { type: 'value' }, series : [ { name:'订单量', type:'bar', barWidth: '50%', data:[1000, 1500, 2000, 3000, 2500, 1800, 1200] } ] } return option; } render() { return (
) } } ##### 2、效果图:  ### 二、柱形图实例2 ###### 1、代码如下: __ import React, { Component } from 'react' import { Card } from 'antd' // import echarts from 'echarts' //按需导入 import echarts from 'echarts/lib/echarts' //导入柱形图 import 'echarts/lib/chart/bar' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/title' import 'echarts/lib/component/legend' import 'echarts/lib/component/markPoint' import ReactEcharts from 'echarts-for-react' //引入样式 import '../common.less' export default class BarB extends Component { getOption = ()=>{ let option = { title: { text: '用户订单' }, tooltip:{ trigger: 'axis' }, legend: { data:['A','B','C'] }, xAxis: { data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'] }, yAxis: { type: 'value' }, series : [ { name:'A', type:'bar', barWidth: '15%', data:[800, 1300, 2000, 2300, 1800, 1100, 500] }, { name:'B', type:'bar', barWidth: '15%', data:[1000, 1800, 2200, 3100, 2200, 1500, 1000] }, { name:'C', type:'bar', barWidth: '15%', data:[300, 800, 1200, 1800, 1300, 600, 200] } ] } return option; } render() { return (
) } } (1) [**legend:**](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23legend) 图例组件。图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。 \--- data[i] (object):图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 `name`(如果是[饼图](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23series- pie),也可以是饼图单个数据的 `name`)。图例组件会自动根据对应系列的图形标记(symbol)来绘制自己的颜色和标记,特殊字符串 `''`(空字符串)或者 `'\n'`(换行字符串)用于图例的换行。 如果 `data` 没有被指定,会自动从当前系列中获取。多数系列会取自 [series.name](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23series.name) 或者 [series.encode](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23series.encode) 的 `seriesName` 所指定的维度。如 [饼图](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23series- pie) and [漏斗图](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23series- funnel) 等会取自 series.data 中的 name。 如果要设置单独一项的样式,也可以把该项写成配置项对象。此时必须使用 `name` 属性对应表示系列的 `nam` **示例:** __ data : [{ name: '系列1', // 强制设置图形为圆。 icon: 'circle', // 设置文本为红色 textStyle: { color: 'red' } }] ##### 2、效果图: * * * **更多柱状图实例信息请参考ECharts:[https://www.echartsjs.com/examples/#chart-type- bar](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.echartsjs.com%2Fexamples%2F%23chart- type-bar)**
点击查看更多
全部评论
登录
|
注册
花小瓣
厉害
2022-04-01 11:03:36
加载更多
关于作者
小白
TA的个人主页
关注
已关注
文章
5942
粉丝
14
获赞
21
评论
26
访问
539150
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
《Google软件测试之道》读书笔记
Cesium数据(五)3D Tiles之i3dm 和 cmpt
cesium实战(三)设置地球颜色为任意纯色
推荐文章
ThreeJS 轮廓线特效 OutLinePath
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
防抖节流
创建海洋特效组件 THREEJS 海洋效果 Shader实现
文章目录
文章分享
×
扫一扫分享
复制链接