ECharts折线图实现（前端、后端、数据结构）

您所在的位置：网站首页 › 前端数据展示图是什么 › ECharts折线图实现（前端、后端、数据结构）

ECharts折线图实现（前端、后端、数据结构）

2024-07-12 00:54| 来源: 网络整理| 查看: 265

文章目录 ECharts简介使用场景实现步骤1、引入Echarts并且绘制一个简单的图表（html）2、创建一个折线图（js）3、了解ECharts需要的数据结构4、后台将数据整合返回给ECharts5、效果图

ECharts简介

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

使用场景

在项目中，根据用户选择的信息展示对应的折线图，折线图不是在一个ECharts上展示的，一个信息只占用一个ECharts

在这里插入图片描述

实现步骤 1、引入Echarts并且绘制一个简单的图表（html） 2、创建一个折线图（js） var option; function dataHisEcharts(dataList){ console.log(dataList); var series = []; var names=[]; $("#main").empty();// 清空div内容 for (var key in dataList) { var datas = dataList[key]; var tagValue=[]; names = [];//将要展示的名字集合清空 if (key != 'time') {// 如果数据为x轴，就不再创建div $("#main").append(""); } var myChart = echarts.init(document.getElementById('main'+key)); for (var i = 0; i

【本文地址】

ECharts折线图实现（前端、后端、数据结构）

ECharts折线图实现（前端、后端、数据结构）

今日新闻

推荐新闻