怎么在react中写echarts 并绘制折线图

2021-07-22 17:05发布

站内问答 / React.JS
617 5 7
发送
5条回答
苏楠 - 世界的没好好与你环环相扣
2楼 · 2021-07-26 09:13

import React, { Component } from 'react'

import ReactEcharts from 'echarts-for-react'

import Background from '../../assets/img/background2.png'

import Background3 from '../../assets/img/background3.png'

import IconLeft14 from '../../assets/img/iconLeft2.png'

import { Modal, NavBar, Picker, Icon, Badge, List, Card, Flex, InputItem, Toast, WingBlank, WhiteSpace } from 'antd-mobile'

import Store from './bbydxqStore'

import './bbydxqStyle.less'

import HeadImg from '../../assets/img/morenhead.jpg'

import Level from '../../assets/img/level3.png'


class Bbydxq extends Component {

  state={

    flush: false,

    bushu: [],

    riqi: [

      // '02.01', '02.02', '02.03', '02.04', '02.05', '02.06', '02.07'

    ]

  }

  async componentDidMount() {

    this.setState({

      flush: true,

      riqi: Store.qtDataList,

      bushu: Store.qtBushuList,

    })

  }

  getOtion() {

    let color = ['transparent']

    for (let i = 0; i < 20>

      color.push('rgba(255,255,255,0.4)')

    }

    const option = {

      width: '80%',

      xAxis: {


        type: 'category',

        // data: this.state.riqi,

        data: ['00:00', '00:20', '00:40', '01:00', '01:20'],

        show: true,

        axisLine: {

          show: true,

          lineStyle: {

            color: 'rgba(255,255,255,0.2)',

            type: 'solid'

          // color:"#f00"

          },

          onZero: true,

        // onZeroAxisIndex:"X"

        },

        axisLabel: {

          color: 'rgba(255,255,255,0.69)',

          fontSize: 12

        },

        axisTick: {

          show: false

        },

        offset: 0,

        boundaryGap: false,


      },

      yAxis: {

        // offset: '-13',

        type: 'value',

        show: true,

        data: ['0.25', '0.50', '0.75', '1.00', '1.25'],

        interval: 0.25,

        // max: function (value) {

        //   return value.max >= 10000 ? value.max : 10000

        // },

        axisLabel: {

          color: 'rgba(255,255,255,0.69)'

        },

        axisLine: {

          show: false,

        },

        axisTick: {

          show: false

        },

        splitLine: {

          show: true,

          lineStyle: {

          // color:"rgba(255,255,255,0.4)",

            color: color,

            type: 'solid'

          },

        },


      },

      series: [{

        data: ['0.1', '0.30', '0.25', '1.00', '1.24'],

        type: 'line',

        areaStyle: {

          color: {

            type: 'linear',

            x: 0,

            y: 0,

            x2: 0,

            y2: 1,

            colorStops: [{

              offset: 0, color: '#5B8FF9' // 0% 处的颜色

            }, {

              offset: 1, color: '#ffffff' // 100% 处的颜色

            }],

            global: false // 缺省为 false

          }

        },

        lineStyle: {

          color: '#ffffff'

        },

        symbol: 'circle',

        symbolSize: 10,

        itemStyle: {

          color: '#ffffff'

        }

      }]

    }

    return option

  }

  render () {

    var u = window.navigator.userAgent

    const isIPad = u.indexOf('iPad') > -1 || u.indexOf('iPa') > -1 // android终端

    console.log('判断当前机型===', isIPad)

    return (

     

       

         

           

             

             

                option={this.getOtion()}

                style={{ width: '100%', height: '800px' }}

                className='react_for_echarts'

              />

           

         

       

     

    )

  }

}



我是大脸猫
3楼 · 2021-07-26 09:46

一、折线图实例1

1、代码如下：

import React,{Component} from 'react'import {Card} from 'antd'//按需导入import echarts from 'echarts/lib/echarts'//导入折线图import 'echarts/lib/chart/line'// 引入提示框和标题组件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'//引入echarts的主题样式import echartTheme from './echartTheme'//引入样式import './common.less'class LineA extends Component {

    componentWillMount(){
        // echarts.registerTheme("ThemeStyle", echartTheme) //注入主题
    }

    getOption = ()=>{
        let option = {
            title: {  //标题
                text: '折线图一',
                x: 'center',
                textStyle: { //字体颜色
                    color: '#ccc'
                }
            },
            tooltip:{ //提示框组件
                trigger: 'axis'
            },
            xAxis: { //X轴坐标值
                data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
            },
            yAxis: {
                type: 'value' //数值轴，适用于连续数据
            },
            series : [
                {
                    name:'订单量', //坐标点名称
                    type:'line', //线类型
                    data:[1000, 1500, 2000, 3000, 2500, 1800, 1200] //坐标点数据
                }
            ]
        }
        return option;
    }

    render() {
        return (
            
                
            
        )
    }}export default LineA;

（1） title:标题组件，包含主标题和副标题。
     --- text (string)：主标题文本，支持使用 \n 换行。
     --- x (string)：在x轴位置。
     --- textStyle (object)：主标题文字的颜色。

（2）tooltip: 提示框组件。
     --- trigger (string)：触发类型。(默认: 'item' ）
      |--- item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
      |--- axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
      |--- none：什么都不触发。

（3） xAxis:  直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

（4） yAxis:  直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

（5） series :  系列列表。每个系列通过 type 决定自己的图表类型。

2、效果图

二、折线图实例2

1、代码如下:

import React,{Component} from 'react'import {Card} from 'antd'//按需导入import echarts from 'echarts/lib/echarts'//导入折线图import 'echarts/lib/chart/line'// 引入提示框和标题组件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'class LineB extends Component {
    getOption = ()=>{
        let option = {
            title: {
                text: '折线图二',
                x: 'center'
            },
            tooltip:{
                trigger: 'axis'
            },
            xAxis: {
                boundaryGap: false,
                data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
            },
            yAxis: {
                type: 'value' //数值轴，适用于连续数据
            },
            series : [
                {
                    name:'订单量',
                    type:'line',
                    data:[1000, 1500, 2000, 3000, 2500, 1800, 1200],
                    areaStyle: {}
                }
            ]
        }
        return option;
    }
    render() {
        return (
            
                
            
        )
    }}export default LineB;
2、效果图

三、折线图实例3

1、代码如下

import React,{Component} from 'react'import {Card} from 'antd'//按需导入import echarts from 'echarts/lib/echarts'//导入折线图import 'echarts/lib/chart/line'// 引入提示框和标题组件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'class LineA extends Component {

    getOption = ()=>{
        let option = {
            title: {
                text: '折线图三',
                x: 'center'
            },
            tooltip:{
                trigger: 'axis'
            },
            legend: {
                // orient: 'vertical',
                top: 20,
                right: 50,
                data:['A','B','C']
            },
            xAxis: {
                data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
            },
            yAxis: {
                type: 'value'
            },
            series : [
                {
                    name:'A',
                    type:'line',
                    data:[800, 1300, 2000, 2300, 1800, 1100, 500]
                },
                {
                    name:'B',
                    type:'line',
                    data:[1000, 1800, 2200, 3100, 2200, 1500, 1000]
                },
                {
                    name:'C',
                    type:'line',
                    data:[300, 800, 1200, 1800, 1300, 600, 200]
                }
            ]
        }
        return option;
    }
    render() {
        return (
            
                
            
        )
    }}export default LineA;
2、效果图


靓猴一枚
4楼 · 2021-07-27 10:46

（1） title:标题组件，包含主标题和副标题。
     --- text (string)：主标题文本，支持使用 \n 换行。
     --- x (string)：在x轴位置。
     --- textStyle (object)：主标题文字的颜色。

（2）tooltip: 提示框组件。
     --- trigger (string)：触发类型。(默认: 'item' ）
      |--- item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
      |--- axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
      |--- none：什么都不触发。

（3） xAxis:  直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

（4） yAxis:  直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

（5） series :  系列列表。每个系列通过 type 决定自己的图表类型。


梵梵
5楼 · 2021-09-14 11:24
1、创建折线图的数据区（包括年份和数据）2、仅选择数据区创建折线图（插入选项卡/图表工具组/折线图）3、得到的折线图x坐标不满足要求，在图表区单击鼠标右键，选择“选择数据”，进入“选择数据源”对话框4、单击对话框右侧“水平分类轴标签”下的“编辑”按钮5、选择对应x坐标轴的年份区域6、单击确定可见年份数据更改了图表的x轴坐标系列。
zgzbs
6楼 · 2021-10-29 10:34

1、创建折线图的数据区（包括年份和数据）2、仅选择数据区创建折线图（插入选项卡/图表工具组/折线图）3、得到的折线图x坐标不满足要求，在图表区单击鼠标右键，选择“选择数据”，进入“选择数据源”对话框4、单击对话框右侧“水平分类轴标签”下的“编辑”按钮5、选择对应x坐标轴的年份区域6、单击确定可见年份数据更改了图表的x轴坐标系列

相关问题推荐

  • react路由跳转时怎么指定拦截页面？2021-01-12 10:11
    回答 10

    不同于vue，通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件（比如sessionID是否存在）来实现不同的组件的跳转，从而实习拦截。接下来，我们实现一个简单的实例了解路由拦截的基本流程。...

  • react组件生命周期？2020-06-11 20:09
    回答 8

    组件的生命主要包括3个阶段： 挂载、更新、卸载挂载：     constructor()componentWillMount()render()componentDidMount()更新componentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()卸载compon......

  • react是作为前端必须掌握的框架吗？2020-07-20 14:33
    回答 6

    无论是大厂或者一般公司的招聘对框架的要求是熟悉或者至少掌握vue，react，angular中的一门，而且一般在大厂里每个团队的技术框架相对来说比较稳定，一般会挑选一门主要的技术框架，其它的作为辅助，除非有重大原因，否则一般不会轻易变更主要技术栈。...

  • react中的key的作用2020-07-24 10:56
    回答 4
    已采纳

    通常认为当 React 元素内包含数量或顺序不确定的子元素时，需要提供 key 属性来定位元素是否已经存在。在实际使用中可以认为 key是一个接口，用来对哪些元素新建，哪些元素删除。比如现有一个List，每个组件新增时需要用ID向后端发起请求（函数应该放在didmou...

  • 前端react 按钮的处理2021-03-23 09:47
    回答 5

    react 按钮代码[removed][removed][removed][removed][removed][removed][removed]//在这里写react代码const element=Hello React;//function Square(props){   return(         {props.value}          );}ReactDOM.render(,d......

  • 现在react的应用面广吗？React.js 2020-08-19 11:15
    回答 3

    前端常用的一个框架

  • 企业多用react开发pc端，这里他和有什么特别的2020-03-31 10:36
    回答 2

    我们一般使用React是是做SPA单页面应用，也就是数据影响视图，性能更优化向对于传统的MPA多页面应用。

  • 简述创建更新查询、创建删除查询、替换在使用过程的区2020-04-01 15:10
    回答 1

    创建更新查询：可使用更新查询在一次操作中更改多个行中的内容。创建删除查询:可以通过使用删除bai查询删除表中的所有行。

没有解决我的问题，去提问

热门问答