前端学习之echarts图表[通俗易懂]

大家好，欢迎来到IT知识分享网。

记录：在工作过程中，记录一个需求，需要实现图表形式。其实图表形式实现起来不难，但是因为自己之前没有具体了解过图表实现，所以这边进行一下自己的记录总结。这边是使用了echarts的图表库，对于echarts进行了相关学习，并查看了项目中实现的代码。后面的话，附上一个自己的实现结果（一定要动手操作！！眼睛会了并不代表手会了）

1.首先引入echarts插件（可通过npm 引入）

npm install echarts --save

2.获取当前的dom节点，然后在该节点上绘制图表

示例中一般使用html形式，可以通过document.getElementById()形式拿到dom

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
..............
});

因为我们项目中是使用react框架，这边是通过ref引用拿取dom

import React, { Fragment, useRef, useEffect } from 'react'
import * as echarts from 'echarts';

export default function Echarts() {
    const wrapperRef = useRef(null)
    useEffect(() => {
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(wrapperRef.current)
        // 绘制图表
        myChart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
                }
            ]
        });
    }, [])
    return (
        <Fragment>
        <div ref={wrapperRef} style={{width: 400, height: 300}}></div>
        </Fragment>
    )
}

写下这段代码后，实现的效果就是官网实例图如下：

前端学习之echarts图表[通俗易懂]

管理后台也实现了折线图的形式，我这边自己实现看一下。后台实现的效果如下

前端学习之echarts图表[通俗易懂]

后台的返回数据形式：

data：{ 
    countdata: {
       2022-04-01: "0"
       2022-04-02: "0"
       2022-04-03: "0"
       .............
       2022-04-30: "0"
    }
}

这边对数据进行处理，转换成需要实现的图表形式：

myChart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                // xAxis.type是category类目轴，适用于离散的类目数据。
                // xAxis.type= 'value' 数值轴，适用于连续数据。
                // data: [1,2,3,4,5,6]
                // data: ['2022-04-01', '2022-04-02', '2022-04-03', '2022-04-04', '2022-04-05', '2022-04-06']
            },
            yAxis: {
                // type: 'value'
            },
            series: [
                {
                    name: '销量',
                    type: 'line', //设置成折线图
                    data: [
                        // 数据转换成笛卡尔坐标系的形式进行展示
                        ['2022-04-01', 0],
                        ['2022-04-02', 2],
                        ['2022-04-03', 11],
                        ['2022-04-04', 2],
                        ['2022-04-05', 0],
                        ['2022-04-06', 21]
                    ]
                }
            ]
        });

此时实现的效果如下：

前端学习之echarts图表[通俗易懂]

ps: 这边也来浅写一下对于数据处理的函数吧, 其实就是对于数组的处理

function handleData(obj) {
        const resultArr = []
        for (let item in obj) {
            let initArr = []
            initArr.push(item, obj[item])
            resultArr.push(initArr)
        }
        return resultArr
 }
before: {
  '2022-04-01': 10
}
after: [ // 转换成笛卡尔坐标系需要的形式
 ['2022-04-01', 10]
]

这边还有一些细节没有实现：

1.坐标轴顶端的文字标识

2.横轴上的需要是点显示，而不是块显示

3.当移入某点该列时，需要线性标识

下面实现了效果，并对于代码进行相关注释

        // 绘制图表
        myChart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {
                trigger: 'axis' // 触发类型：默认是item点触发，这边更改为坐标轴x轴触发
            },
            xAxis: {
                type: 'category',
                name: '日期', // 坐标轴名称
                axisTick: { // 刻度
                    length: 6,
                    lineStyle: {
                        type: 'dashed'
                        // ...
                    }
                },
                axisLabel: { // 下面的x轴每个点的标识转换角度
                    rotate: 45
                },
                boundaryGap: false // 不与坐标轴中间对应，与刻度对应
            },
            yAxis: {
                name: '订单量',
                axisLine: { // 显示y轴坐标轴
                    show: true,
                    type: 'solid'
                }
                // type: 'value'
            },
            series: [
                {
                    name: '销量',
                    type: 'line',
                    data: [
                        ['2022-04-01', 0],
                        ['2022-04-02', 2],
                        ['2022-04-03', 11],
                        ['2022-04-04', 2],
                        ['2022-04-05', 0],
                        ['2022-04-06', 21]
                    ]
                }
            ]
        });

好了，实现效果如下：

前端学习之echarts图表[通俗易懂]

第一期关于echart的初步实现结束，后面再写一篇关于其他属性的学习总结。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/29627.html

前端学习之echarts图表[通俗易懂]

相关推荐

发表回复