实现效果图如下：

?需要具备知识：

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)}?/>

????????)

????}

}

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。