本文共 1584 字，大约阅读时间需要 5 分钟。

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

官网实例

// 渲染图表数据    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、这里也许会遇到一个问题

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

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

转载地址：https://blog.csdn.net/weixin_45416217/article/details/105533873 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！