可视化初试

一、技术栈

• React
• ReactRouter
• Echarts

二、项目简介

• 页面采用flex布局和Grid布局
• 使用rem适配不同屏幕的大小
• 项目中所用到的各种饼图、柱状图、折线图等都来自于echarts，数据并非真实数据，但可以进行更改

三、怎么去适配屏幕

Wp是页面有效宽度，Hp是页面有效高度，设置1rem =Wp/100; 当屏幕很宽就左右居中，屏幕很高就上下居中; 像素需要进行转化：

四、flex和Grid布局

 <div className="home">
      <header style={{backgroundImage:`url(${headerBg})`}}></header>
        <main>
            <section className="section1"></section>
            <section className="section2"></section>
            <section className="section3"></section>
            <section className="section4"></section>
            <section className="section5"></section>
        </main>
    </div>

@import "../shared/helper";
.home{
  flex:1;
  display: flex;
  flex-direction:column;
  > header{
    height:px(99);
    background-size:cover;
  }
  > main {
    flex: 1;
    display: grid;
    grid-template:
            "box1 box2 box4 box5" 755fr
            "box3 box3 box4 box5" 363fr / 366fr 361fr 811fr 747fr;
    > .section1 {
      grid-area: box1;
      background: pink;
    }
    > .section2 {
      grid-area: box2;
      background: lightgray;
    }
    > .section3 {
      grid-area: box3;
      background: lightblue;
    }
    > .section4 {
      grid-area: box4;
      background: lightcyan;
    }
    > .section5 {
      grid-area: box5;
      background: lightyellow;
    }
  }
}

头部内容使用header，主要内容采用main来进行设置，设置好行列间距，再采用fr来按照比例分配

五、使用echarts

npm install echarts --save

先进行安装

import * as echarts from 'echarts';
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

每个echarts分为title和chart区域 根据实例来进行修改,还可以根据术语速查手册,对不懂得进行查看来修改;

六、echarts options与坐标轴的优化

1、由于项目用到很多的echarts的options很多地方会有重复，所以可以进行简单的封装

import { px } from "./px";
export const baseEchartOptions = {
  textStyle: {
    fontSize: px(12),
    color: "#79839E",
  },
  title: { show: false },
  legend: { show: false },
  grid: {
    x: px(20),
    y: px(20),
    x2: px(20),
    y2: px(20),
    containLabel: true,
  },
};

2、Echarts默认的行为，当x坐标轴标签内容过长的时候，会出现部分标签隐藏不显示的问题,需要进行axisLabel的配置，通过formatter函数对x坐标轴的内容进行调整

 axisLabel: {
              fontSize: px(12),
              formatter(val) {
                if (val.length > 2) {
                  const array = val.split('');
                  array.splice(2, 0, '\n');
                  return array.join('');
                } else {
                  return val;
                }
              }
            },

七、最后的效果

感觉很炫酷，以看就很吊的样子