手把手教你做出数据可视化项目（二）可视化图表配置

最新推荐文章于 2025-06-27 16:15:52 发布

diviner_s

最新推荐文章于 2025-06-27 16:15:52 发布

阅读量7.7k

点赞数 40

CC 4.0 BY-SA版权

分类专栏：数据可视化_Echarts 文章标签：新星计划数据可视化 js

本文链接：https://blog.csdn.net/diviner_s/article/details/117232409

本文详细介绍了如何使用echarts进行数据可视化图表的配置，包括柱状图、雷达图、饼状图和折线图。内容涵盖echarts的基础配置如series、xAxis、yAxis、grid、title等，以及实际图表实现过程，如数据获取和DOM容器的准备。项目还涉及了html、css、js、jQuery、ajax等技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789
项目最终效果图：

此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！
使用echarts技术做的可视图，此外其项目包含的技术有html、css、js、jquerry、ajax、websocket、koa等。

此章节使用的是echarts技术，详情进传送门：
echarts简介
 echarts图表总结

Echarts常用图表	链接
柱状图	https://blog.csdn.net/diviner_s/article/details/115936504
折线图	https://blog.csdn.net/diviner_s/article/details/115951768
散点图	https://blog.csdn.net/diviner_s/article/details/115957974
饼状图	https://blog.csdn.net/diviner_s/article/details/116015145
矢量地图	https://blog.csdn.net/diviner_s/article/details/116019747
雷达图	https://blog.csdn.net/diviner_s/article/details/116041140
仪表盘	https://blog.csdn.net/diviner_s/article/details/116072033
直角坐标系配置	https://blog.csdn.net/diviner_s/article/details/115961859

文章目录

可视化图表配置

可视化图表配置

0-1 echarts图表基础配置

需要了解的echarts图表主要配置：series xAxis yAxis grid tooltip title legend color

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

0-2 echarts图表实现

引入echarts插件文件到html页面中

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

<div id="main" style="width: 600px;height:400px;"></div>

初始化echarts实例对象

var myChart = echarts.init(document.getElementById('main'));

指定配置项和数据(option)

  // 2. 指定配置项和数据
  option = {
     
     
     // color设置我们线条的颜色 注意后面是个数组
    color: ['pink', 'red', 'green', 'skyblue'],
    // 设置图表的标题
    title: {
     
     
        text: '折线图堆叠123'
    },
    // 图表的提示框组件 
    tooltip: {
     
     
        // 触发方式
        trigger: 'axis'
    },
    // 图例组件
    legend: {
     
     
       // series里面有了 name值则 legend里面的data可以删掉
    },
    // 网格配置  grid可以控制线形图 柱状图 图表大小
    grid: {
     
     
        left: '3%',
        right: '4%',
        bottom: '3%',
        // 是否显示刻度标签 如果是true 就显示 否则反之
        containLabel: true
    },
    // 工具箱组件  可以另存为图片等功能
    toolbox: {
     
     
        feature: {
     
     
            saveAsImage: {
     
     }
        }
    },
    // 设置x轴的相关配置
    xAxis: {
     
     
        type: 'category',
        // 是否让我们的线条和坐标轴有缝隙
        boundaryGap: false,
        data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
     // 设置y轴的相关配置
    yAxis: {
     
     
        type: 'value'
    },
    // 系列图表配置 它决定着显示那种类型的图表
    series: [
        {
     
     
            name: '邮件营销',
            type: 'line',
           
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
     
     
            name: '联盟广告',
            type: 'line',

            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
     
     
            name: '视频广告',
            type: 'line',
          
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
     
     
            name: '直接访问',
            type: 'line',
          
            data: [320, 332, 301, 334, 390, 330, 320]
        }
    ]
  };

将配置项设置给echarts实例对象
```
  myChart.setOption(option);
```

1-1 左上角柱状图配置

实现后效果：
在这里插入图片描述

数据来源：采用Ajax的get(url，function())请求获取数据
这里需要注意的是：function是回调函数需要获取数据后存放在ret后，在done中进行数据的解析。

  // 柱状图模块1   首页左上角柱状图
  (function () {
   
   
    //--------------------------------ajax---------------------------------

    $.get("http://127.0.0.1:8888/api/text2", function (ret) {
   
   
    }).done(ret => {
   
   
      var Name2 = []
      var Value2 = []
      for (var i = 0; i < ret.length; i++) {
   
   
        var name = ret[i].name
        var value = ret[i].value
        console.log(name + " " + value)
        Name2.push(name)
        Value2.push(value)
      }
      // 1实例化对象
      var myChart1 = echarts.init(document.querySelector(".bar .chart"));
      // 2. 指定配置项和数据
      option = {
   
   
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
   
   
          offset: 0,
          color: '#0184d5'
        }, {
   
   
          offset: 1,
          color: '#00d887'
        }]),
        tooltip: {
   
   
          trigger: "axis",
          axisPointer: {
   
   
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // 修改图表的大小
        grid: {
   
   
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true
        },
        xAxis: [
          {
   
   
            type: "category",
            data: Name2,
            axisTick: {
   
   
              alignWithLabel: true
            },
            // 修改刻度标签 相关样式
            axisLabel: {
   
   
              color: "rgba(255,255,255,.6) ",
              fontSize: "10"
            },
            // 不显示x坐标轴的样式
            axisLine: {
   
   
              show: false
            }
          }
        ],
        yAxis: [
          {
   
   
            type: "value",
            // 修改刻度标签 相关样式
            axisLabel: {
   
   
              color: "rgba(255,255,255,.6) ",
              fontSize: 10
            },
            // y轴的线条改为了 2像素
            axisLine: {
   
   
              lineStyle: {
   
   
                color: "rgba(255,255,255,.1)",
                width: 2
              }
            },
            // y轴分割线的颜色
            splitLine: {
   
   
              lineStyle: {
   
   
                color: "rgba(255,255,255,.1)"
              }
            }
          }
        ],
        series: [
          {
   
   
            name: "",
            type: "bar",
            barWidth: "35%",
            // data: [108, 6, 11, 8, 16],
            data: Value2,
            itemStyle: {
   
   
              // 修改柱子圆角
              barBorderRadius: 5
            }
          }
        ]
      };
      // 3. 把配置项给实例对象
      myChart1.setOption(option)
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function () {
   
   
        myChart1.resize();
      });
    });

  })();

1-2 左中角雷达图配置

 // 雷达图 左中
  (function () {
   
   

    // 1实例化对象
    var myChart = echarts.init(document.querySelector(".radar .chart"));
    // 2. 指定配置项和数据
    var lineStyle = {
   
   
      normal: {
   
   
        width: 1,
        opacity: 0.5
      }
    };
    var option = {
   
   
      legend: {
   
   
        orient: "vertical",
        top: "bottom",
        left: "right",
        textStyle: {
   
   
          color: '#fff',
          fontSize: 12
        },
        selectedMode: 'single'
      },
      grid: {
   
   
        top: ""
      },
      radar: {
   
   
        indicator: [
          {
   
    name: '城市', max: 100 },
          {
   
    name: '岗位', max: 100 },
          {
   
    name: '工作时间', max: 100