react echarts 绘制带有滑块柱图
实现效果图如下：
需要具备知识：
1 react 项目创建
2 react组件的导入
使用方法：react中引入 TrafficColumnQTI 组件<TrafficColumnQTI />
柱图相关参数和配置参考echarts官网：Examples - Apache ECharts
TrafficColumnQTI 组件code如下（完整code）：
// 安装： npm install echarts --save
// 安装：npm install echarts-for-react --save
import React, { Component } from 'react'
import ReactEcharts from 'echarts-for-react';
export default class TrafficColumnQTI extends Component {
constructor(props){
super(props)
this.state = {
sales:[500, 200, 360, 110, 170, 280, 306, 190, 310, 200],//纵坐标值
time:["2021-10-10","2021-10-11","2021-10-12","2021-10-13",
"2021-10-14","2021-10-15","2021-10-16","2021-10-17","2021-10-18","2021-10-19"], //横坐标值
// 滑块预设位置
begin_slider:50,
end_slider:100,
}
}
// 柱状图的配置对象
getOption = (sales, time) =>{
return {
title: {
text: 'ECharts 入门示例',
left:10,
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: false
},
saveAsImage: {
pixelRatio: 2
}
}
},
tooltip: {},
xAxis: {
data: time,
silent: false,
splitLine: {
show: false
},
splitArea: {
show: false
}
},
yAxis: [
{
splitArea: {
show: false
}
},
],
// dataZoom 控制数据横坐标下的滑块部分，去除则无滑块
dataZoom: [
{
// 鼠标在柱图上滚动
type: 'inside',
show:true,
start:this.state.begin_slider,
end:this.state.end_slider,
},
{
// 显示滑块
type: 'slider'
},
],
series: [{
name: '访问量',
type: 'bar',
data: sales,
label:{
// 柱显示值
show:true
},
},
]
};
}
render() {
const {sales, time} = this.state;
return (
<ReactEcharts option={this.getOption(sales, time)} />
)
}
}
react echarts 绘制带有滑块柱图相关推荐
- hdc mfc 画扇形图_使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图 简单举例说明下echarts如何绘制条形图和扇形图 代码示例 echarts绘制条形图和扇形图 var mychart1=echarts.init(documen ...
- Echarts饼图实现圆形柱图
一.代码简介 本次主要是在Vue web项目中,利用Echarts中的饼图组件实现圆形柱状图 二.功能预览 三.示例代码 <template><div id="echart ...
- echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图)
文末附带github本文所有源代码,以及bmap.js,china.js,echarts.js,echarts-wordcloud.js文件啦 1.柱形图 先来看看效果啦 重要代码如下所示,必须引入e ...
- echarts绘制百家姓饼状图
echarts ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求. ECharts 遵循 Apache-2.0 开源协议,免费商用. ECharts ...
- 【Echarts 绘制柱状图、折线图和扇形图】
1. 柱状图和折线图 柱状图和折线图的基本内容完全一致,只需要将option中的series的type: 'bar' 修改type: 'line',就可以将柱状图转化为折线图. initEchart( ...
- echarts绘制多条折线图
效果 首先引入echarts可以看这篇文章哦~ 如何在项目中使用echarts 1.定义一个div 这里的height就是y轴的高度了~ <div style="width: 100% ...
- 使用echarts绘制地图、线图（飞行路线图）时需要的json资源
各个省份的地图下载:http://gallery.echartsjs.com/+以下对应地区地址 '上海': '/asset/get/s/data-1482909900836-H1BC_1WHg.js ...
- echarts象形柱图整体颜色渐变
@独孤求败12138 象形柱图整体颜色渐变 echarts中的象形柱图颜色渐变只能局部内部渐变,但是我想要实现整体渐变,怎么做呢?经过我大量的搜索和官方文档及API的研究,好像并不提供这一功能,那只能 ...
- echarts：多组折线-图
Echarts是一个基于JavaScript的开源可视化库,它可以用来绘制各种类型的图表,包括折线图.柱状图.饼图等等.在本文中,我们将使用Echarts绘制一个多组折线-图的完整示例. echart ...
最新文章
- win7修改网络计算机名字,小编分析win7系统修改计算机名字的操作方法
- Oracle：ORA-01789: 查询块具有不正确的结果列数 分析原因和解决办法
- Storyboard中segue使用总结
- JavaScript面向对象--继承 （超简单易懂，小白专属）...
- 前端系统化学习【JS篇】:（四）Javascript中的数据类型
- sql数据库 订阅发布_如何使用中央发布者和多个订阅者数据库设置自定义SQL Server事务复制
- Min（BZOJ 1441）
- Mysqldump 1449 错误解决 mysqldump: Got error: 1449
- 手机移动端日期时间控件lcalenda
- 【综合实训】图书管理系统——概要设计说明书
- 2021年中国商业银行企业避险业务分析：引导企业坚持汇率风险中性理念[图]
- 程序员电脑（减少辐射）（￥37）
- 【开源】SoDiaoEditor 可能是目前最好用的开源电子病历编辑器（B/S架构）
- 兔子繁殖问题(C语言)
- DigitalPersona Personal 4 x86 下载
- C++ 头插法 链表
- 面试题错题解析5_操作系统
- idea方法跳转无效_idea使用笔记一（跳转）
- c语言取余规则_C语言入门学好这一篇就足够了！C语言所有的知识点，满满的干货...
- 离散余弦变换(C++实现)