react使用echarts完整细节实例（后台数据渲染&&布局实现）

1、这是我使用echarts实现的两种图表

• 折线图

• 柱状图

2、折线图实现

• 首先导入必须的包,在这之前进行安装

npm install echarts --save

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/line';
// 引入图例
import 'echarts/lib/component/legend';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

• 图表数据格式渲染
  直接复制官网的即可，注意几个细节就行
  1、设置标题样式

  title: {
        text: `${companyName} ${startDate}-${endDate}设备报修数量分析图`,
        left: 'center',
        top: '10px'
      },

2、设置图例

     legend: {
        data: typeNameList,  // 后台数据
        top: '35px',
        left: '70%'
      },

3、难一点的是折线图数据的渲染

 series: typeAndNumList

官网实例

从后台获取数据渲染的方式是：for…in

    // 渲染图表数据
    const typeAndNumList = [];
    for (const key in typeNameList) {
      const and = {};
      and.name = typeNameList[key],
        and.type = "line",
        and.stack = "总量",
        and.data = monthNumberList[key].numberList;
      typeAndNumList.push(and)
    }

3、柱状图实现

1. 同样先引入

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

2、这里也许会遇到一个问题
当你的X轴标签分类名字很长的时候，会间隔显示标签，而不是全部显示

在这里我们只需要设置强制显示全部标签就行了

   axisLabel: {
              interval:0,// 代表显示所有x轴标签显示
          }

      xAxis: [
        {
          type: 'category',
          data: ['受理环节(报修/已审批>处理)', '审批环节(提交审批>审批结束)','维修环节(派工>维修完成)','整理流程(报修>结束)', ],
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
              interval:0,// 代表显示所有x轴标签显示
          }
        }
      ],