React 中 echarts 的使用

前言：这篇文章创建于十个月之前的，现在都 2020-07-19 号了，之间差了快一年了，这期间我的技术栈成功的从 React => Vue => React ，真是技是人非，本来以为接触不到 echarts 了，没想到这个项目中又给用到了，想逃也逃不掉。😂

还有九天我就要转正了，真是开心的很，这是我大学毕业🎓之后第一次成为正式员工，现在来看无论是在北京还是在上海我都是在打酱油，不像现在对这这家公司比较满意，我打算最起码留个两三年，做人不能太飘了。当前这次转正除了工资能多发几千块钱，最重要的就是个人有很大的成长，尤其是感受最深的一点：无论什么都是有瑕疵的，你永远没办法有充分的准备去做到最好，任何人都是临危受命。 就比如我们朱镕基总理，他之前就没干过总理这个职位，临危受命，虽然只干了一届，但是干的很好。以前在学校真实啥都不要操心，出来工作你会发现，生活不止眼前的工作，有好多大事小事围绕在你的身边，例如：工作内容是否完成、技术没会的学会了吗、同事关系处理、租房啦、等等，整的我真是一个头两个大。但是事情发生了，不要怕，大胆的去处理，要学会在一天内同时处理不同的事，还不要让事情的负面情绪影响到你干其他的事情，于是慢慢你就轻车熟路，在变强的路上渐去渐远。

使用

我之前不想看 echarts 的原因就是感觉配置比较灵活，另一套语法，看着难受，这周二我对着文档研究了一天，对数据驱动视图体会是更加深入一层了。然后感觉就没啥难度了，就是对着文档找找就行了，真是爽，这里记录下常见配置。

一个折线图

import React, { Component } from "react";
import ReactDOM from "react-dom";
import echarts from "echarts";
class S2 extends Component {
    componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(this.refs.main);
        // 绘制图表
        this.myChart.setOption({
            // 柱状图的颜色
            color: ["#12ccee"],
            // 表的标题
            title: {
                text: "2019 年度销量",
                subtext: "Sub Title",
                // 标题的位置
                left: "center",
                top: "top",
                textStyle: {
                    fontSize: 18,
                    // 主标题文字的颜色。
                    color: "#ee33aa",
                },
                subtextStyle: {
                    fontSize: 12,
                    // 主标题文字的颜色。
                    color: "#445533",
                }
            },
            tooltip: {
                // 鼠标悬停柱状图是否有hover提示效果
                show: true,
                // 在哪种类型触发
                trigger: "axis",
                // 指示器类型。
                // 'line' 直线指示器
                // 'shadow' 阴影指示器
                // 'none' 无指示器
                // 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
                axisPointer: {
                    type: "cross"
                }
            },
            // x轴的数据
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            // y轴的数据
            yAxis: {},
            // 柱状图的数据name名字，类型bar，数据为data
            series: [{
                name: "销量",
                // 折线图line，柱状图bar,饼状图pie
                type: "line",
                data: [10, 22, 93, 45, 44, 100]
            }]
        });
    }
    render() {
        return (
            <div>
                {/*作为初始化的DOM，必须给宽高*/}
                <div ref="main" style={{ width: "500px", height: "300px" }} />
            </div>
        );
    }
}

ReactDOM.render(
    <S2 />,
    document.getElementById("root")
);

改了下之前的代码，这时候 React 的字符串 ref 还是可以使用的，又是一个技是人非的例子。

再来看一个例子，不使用字符串 ref ，同时图表的数据也由 ECharts 3 的 series 提供变为 ECharts 4 中的 dataset 来提供，而且多列图表。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import echarts from "echarts";
class S2 extends Component {
    dom = React.createRef();
    componentDidMount() {
        const option = {
            // 居中标题
            title: {
                text: '标题',
                x: 'center'
            },
            // 调色盘颜色列表
            color: ["#ffccee", "#006699", "#4cabce", "#e5323e"],
            // 直角坐标系内绘图网格
            grid: {
                // 显示网格border
                // show: true,
                // grid 组件离容器左侧的距离。
                left: 5,
                right: 0,
                top: 40,
                bottom: 35,
                // grid 区域是否包含坐标轴的刻度标签。
                containLabel: true
            },
            dataset: {
                source: [
                    ["type", "2012", "2013", "2014", "2015", "2016"],
                    ["Forest", 320, 332, 301, 334, 390],
                    ["Steppe", 220, 182, 191, 234, 290],
                    ["Desert", 150, 232, 201, 154, 190],
                    ["Wetland", 98, 77, 101, 99, 40]
                ]
            },
            legend: {
                bottom: 0
            },
            xAxis: {
                type: 'category',
                show: true,
                // x 轴的位置。
                position: "bottom",
                // X 轴相对于默认位置的偏移
                offset: 10,
                // 坐标轴名称。
                name: "x坐标轴名称",
                // 坐标轴名称显示位置。
                nameLocation: "end",
                // 是否显示坐标轴刻度。
                axisTick: {
                    show: false
                },
                axisLabel: {
                    // 是否显示刻度标签。
                    show: true,
                    textStyle: {
                        fontSize: 12,
                        color: "#998877"
                    }
                },
                axisLine: {
                    // 是否显示坐标轴轴线
                    show: true,
                    lineStyle: {
                        color: "#334455"
                    }
                },
                // 指示器类型。鼠标放上去的效果，line 也常用
                axisPointer: {
                    type: "shadow"
                },
                data: null
            },
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLabel: {
                    // 刻度标签旋转的角度，旋转的角度从 -90 度到 90 度。
                    // rotate: -45,
                    // 刻度标签与轴线之间的距离。
                    margin: 8,
                    // 刻度标签是否朝内，默认朝外。
                    inside: false,
                    textStyle: {
                        fontSize: 12,
                        color: "#ee6611"
                    },
                    // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
                    formatter: '{value}%'
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    // 坐标轴在 grid 区域中的分隔线
                    show: true,
                    lineStyle: {
                        color: "#3311cc"
                    }
                }
            },
            legend: {
                show: true,
                // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。
                selectedMode: true,
                bottom: 0,
                type: 'scroll',
                width: '80%',
                left: 'center',
                textStyle: { color: '#4F5058' },
                itemWidth: 8,
                itemHeight: 8,
                itemGap: 30,
                pageIconSize: 12,
                pageTextStyle: { color: '#4F5058' },
                pageIconColor: '#4F5058',
                pageIconInactiveColor: '#A4A4A4',
                data: null
            },
            series: [
                {
                    type: "bar",
                    // 数据到图形的映射
                    // 指定 dataset 的列（column）还是行（row）映射为图形系列（series）。默认是按照列（column）来映射。
                    seriesLayoutBy: "column"
                },
                {
                    type: "bar",
                    seriesLayoutBy: "column"
                },
                {
                    type: "bar",
                    seriesLayoutBy: "column"
                },
                {
                    type: "bar",
                    seriesLayoutBy: "column"
                }
            ]
        };
        const myChart = echarts.init(this.dom.current);
        myChart.setOption(option);
    }
    render() {
        // 作为初始化的DOM，必须给宽高
        return <div ref={this.dom} style={{ width: 600, height: 400 }} />
    }
}

ReactDOM.render(
    <S2 />,
    document.getElementById("root")
);

当前时间 Sunday, July 19, 2020 22:37:09