ECharts数据可视化项目（简化版）

最新推荐文章于 2024-04-26 09:38:30 发布

介北烟花

最新推荐文章于 2024-04-26 09:38:30 发布

阅读量478

点赞数

文章标签： echarts 信息可视化前端

本文链接：https://blog.youkuaiyun.com/m0_52879657/article/details/132055583

版权

此项目是根据老师所提供项目修改实现的ECharts数据可视化项目
在这里插入图片描述

该项目使用了ECharts和Ajax，结合html、css、jquery所制作的项目。
项目地址：项目GitHub超链接

ECharts基础知识讲解

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
官网地址：https://echarts.apache.org/zh/index.html

使用方法

1、获取 ECharts 【可以在官网查看】
2、引入ECharts 插件到html页面中

<script src="./js/echarts.min.js"></script>

3、准备一个具备大小的DOM容器

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

4、初始化echarts实例对象

// 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));

5、指定配置项和数据(option)【这个可以在官网里查看具体实现】

var option = {
            title: {
                text: ''
            },
            tooltip: {},
            legend: {
                data:[]
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '',
                type: 'bar',
                data: []
            }]
        };

6、将配置项设置给echarts实例对象

myChart.setOption(option);

Echarts基础配置

series（系列）：每个系列通过 series.type 决定自己的图表类型（图表数据，指定什么类型的图表，可以多个图表重叠）。
xAxis：直角坐标系 grid 中的 x 轴
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表
boundaryGap: 坐标轴两边留白策略，类目轴中 boundaryGap 可以配置为 true 和 false。默认为
true，可以保证刻度线和标签对齐。这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

项目具体实现

在这里插入图片描述

CSS：网页样式
font：网页字体显示
images：网页图片
js：网页需要的依赖以及图表实现方法

项目代码展示

数据都存储在data.json文件中，通过Ajax传输到网页中。

index.js（网页主页）

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echarts可视化</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <header>
      <h1>电商用户数据可视化展板-ECharts</h1>
      <div class="showTime">当前时间：2020年3月17-0时54分14秒</div>
      <h3></h3>
      <script>
        var t = null;
        var url= location.search;
        var str = url.substr

最低0.47元/天解锁文章