数据可视化echarts学习笔记

qq_58956810

1496人浏览 · 2024-12-22 19:17:11

qq_58956810 · 2024-12-22 19:17:11 发布

目录，介绍

知识储备

一端操作，多端联动的效果（开启了多个网页，操作一端，多个网页的效果会跟着改变）

cmd命令控制面板返回上一级或上上级

在当前目录打开文件：

cd 文件名

在Windows命令提示符（cmd）中，要返回上一级目录，可以使用以下命令：

cd ..

这将把当前工作目录改变到上一级目录中。如果你想连续返回多级目录，可以重复使用该命令，或者使用如下命令：

cd ..\..

这将返回两级目录。如果需要返回三级或更多，可以继续添加 \..。

例如，返回三级目录：

cd ..\..\..

请注意，这些命令只在命令提示符下有效，不适用于PowerShell。

ECharts的快速上手

ECharts 的入门使用特别简单, 5分钟就能够上手. 他大体分为这几个步骤

步骤1：引入 echarts.js 文件

echarts是一个 js 的库，当然得先引入这个库文件

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

步骤2：准备一个呈现图表的盒子

这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里

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

步骤3：初始化 echarts 实例对象

在这个步骤中, 需要指明图表最终显示在哪里的DOM元素

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

步骤4：准备配置项

这步很关键，我们最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的

var option = {

xAxis: {

type: 'category',

data: ['小明', '小红', '小王']

},

yAxis: {

type: 'value'

},

series: [

{

name: '语文',

type: 'bar',

data: [70, 92, 87],

}

]

}

步骤5：将配置项设置给 echarts 实例对象

myChart.setOption(option)

一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外, 其他的代码都是固定不变的。配置项都是以键值对的形式存在

柱状图

可以改变x和y轴的type类型，是否为类目轴还是数值轴

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 步骤1：引入 echarts.js 文件 -->
    <script src="./lib/echarts.min.js"></script>
  </head>
  <body>
    <!-- 步骤2：准备一个呈现图表的盒子 -->
    <div style="width: 600px; height: 400px"></div>
    <script>
      // 参数，dom，决定图表最终呈现的位置
      // 步骤3：初始化 echarts 实例对象
      var mCharts = echarts.init(document.querySelector("div"));
      var xDataArr = [
        "张三1",
        "张三2",
        "张三3",
        "张三4",
        "张三5",
        "张三6",
        "张三7",
        "张三8",
      ];
      var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86];
      // 准备配置项，实际上就是一个对象
      // 步骤4：准备配置项，以后在项目中除了这一块不一样之外，其他都是一样的
      var option = {
        xAxis: {
          type: "value", // category: 类目轴
        },
        yAxis: {
          type: "category", // value: 数值轴
          data: xDataArr,
        },
        series: [
          {
            name: "语文",
            type: "bar",
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值",
                },
              ],
            },
            label: {
              show: true,
              rotate: 60,
              position: "top",
            }, // 数值显示，显示当前数轴的值，可以设置显示的位置
            barWidth: "30%",
            data: yDataArr, // 通过series当中的data来配置y轴的数据
          },
        ],
      };
      // 步骤5：将配置项设置给 echarts 实例对象
      mCharts.setOption(option);
    </script>
  </body>
</html>

注意: 坐标轴 xAxis 或者 yAxis 中的配置, type 的值主要有两种: category 和 value , 如果 type

属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现. 如果 type 属性配置为 value ,

那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制

柱状图的常见效果

标记:

最大值\最小值 markPoint

平均值 markLine

显示

数值显示 label

提示框: tooltip

tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框

格式化显示: formatter

字符串模板

回调函数

通用配置toolbox

saveAsImage还有其他配置项，比如导出图片等

        toolbox: {
          feature: {
            // 各工具配置项。
            // 除了各个内置的工具按钮外，还可以自定义工具按钮。
            // 注意，自定义的工具名字，只能以 my 开头，例如下例中的 myTool1，myTool2：
            saveAsImage: {}, //保存为图片
            dataView: {}, // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
            restore: {}, // 配置项还原
            dataZoom: {}, //数据区域缩放。目前只支持直角坐标系的缩放。
            magicType: {
              type: ["line", "bar"],
            }, // 动态图表类型的切换
          },
        },

图例: legend

legend 是图例,用于筛选类别,需要和 series 配合使用

legend 中的 data 是一个数组

legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致

总体代码展示：

  <body>
    <!-- 步骤2：准备一个呈现图表的盒子 -->
    <div style="width: 600px; height: 400px"></div>
    <script>
      // 参数，dom，决定图表最终呈现的位置
      // 步骤3：初始化 echarts 实例对象
      var mCharts = echarts.init(document.querySelector("div"));
      var xDataArr = [
        "张三",
        "李四",
        "王五",
        "闰土",
        "小明",
        "茅台",
        "二妞",
        "大强",
      ];
      var yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86];
      var yDataArr2 = [86, 72, 83, 97, 64, 80, 82, 96];
      // 准备配置项，实际上就是一个对象
      // 步骤4：准备配置项，以后在项目中除了这一块不一样之外，其他都是一样的
      var option = {
        title: {
          text: "成绩展示",
          subtext: "副标题",
          textStyle: {
            color: "red", // 文本颜色
          }, // 主标题样式
          borderWidth: 5, //数值类型 标题的边框线宽
          borderColor: "blue", // 标题的边框颜色
          borderRadius: 5, // 圆角半径
          top: 0, //title 组件离容器上侧的距离
          left: 60, // title 组件离容器左侧的距离
          subtextStyle: {
            color: "blue",
          }, // 副标题样式
        },
        // legend 是图例,用于筛选类别,需要和 series 配合使用
        // legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致
        legend: {
          data: ["语文", "数学"],
        },
        // 提示框组件，tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框
        tooltip: {
          // trigger: "item", //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
          // trigger: "axis", //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          // 提示框触发的条件
          triggerOn: "click", // 鼠标点击时触发
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 字符串模板
          // formatter: "haha",
          // formatter: "{b}的成绩是 {c}",
          // formatter: "{b0}: {c0}<br />{b1}: {c1}",
          // 回调函数
          formatter: function (arg) {
            // console.log(arg, "++++00000");
            return arg.name + "的分数是：" + arg.data;
          },
        },
        toolbox: {
          feature: {
            // 各工具配置项。
            // 除了各个内置的工具按钮外，还可以自定义工具按钮。
            // 注意，自定义的工具名字，只能以 my 开头，例如下例中的 myTool1，myTool2：
            saveAsImage: {}, //保存为图片
            dataView: {}, // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
            restore: {}, // 配置项还原
            dataZoom: {}, //数据区域缩放。目前只支持直角坐标系的缩放。
            magicType: {
              type: ["line", "bar"],
            }, // 动态图表类型的切换
          },
        },
        xAxis: {
          type: "category",
          data: xDataArr,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "语文", // 系列名称
            type: "bar",
            data: yDataArr1,
          },
          {
            name: "数学", // 系列名称
            type: "bar",
            data: yDataArr2,
          },
        ],
      };
      // 步骤5：将配置项设置给 echarts 实例对象
      mCharts.setOption(option);
    </script>
  </body>

折线图

还有其他配置，跟柱状图的配置类似，可以官网，比如标题设置等

线条控制

平滑线条 smooth

线条样式 lineStyle

填充风格 areaStyle

紧挨边缘 boundaryGap

boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始

效果如下:

代码：

  <body>
    <!-- 步骤2：准备一个呈现图表的盒子 -->
    <div style="width: 600px; height: 400px"></div>
    <script>
      // 参数，dom，决定图表最终呈现的位置
      // 步骤3：初始化 echarts 实例对象
      var mCharts = echarts.init(document.querySelector("div"));
      var xDataArr = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ];
      var yDataArr = [
        3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600,
      ];
      // 准备配置项，实际上就是一个对象
      // 步骤4：准备配置项，以后在项目中除了这一块不一样之外，其他都是一样的
      var option = {
        xAxis: {
          type: "category",
          data: xDataArr,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "康师傅",
            type: "line",
            data: yDataArr,
            markPoint: {
              data: [
                {
                  type: "max",
                },
                {
                  type: "min",
                },
              ],
            },
            markLine: {
              data: [
                {
                  type: "average",
                },
              ],
            },
            markArea: {
              data: [
                [{ xAxis: "1月" }, { xAxis: "2月" }],
                [{ xAxis: "7月" }, { xAxis: "8月" }],
              ],
            },
            smooth: true,
            lineStyle: {
              color: "green",
              type: "solid", // dotted solid
            },
            areaStyle: {
              color: "pink",
            },
          },
        ],
      };
      // 步骤5：将配置项设置给 echarts 实例对象
      mCharts.setOption(option);
    </script>
  </body>

缩放, 脱离0值比例

如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况

这显然不是我们想要的效果, 因此可以配置上 scale , 让其摆脱0值比例

scale 配置

scale 应该配置给 y 轴

设置之后效果

堆叠图

堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上

相加

没有堆叠的时候：

堆叠之后的效果图：

代码：stack: all,

  <body>
    <!-- 步骤2：准备一个呈现图表的盒子 -->
    <div style="width: 600px; height: 400px"></div>
    <script>
      // 参数，dom，决定图表最终呈现的位置
      // 步骤3：初始化 echarts 实例对象
      var mCharts = echarts.init(document.querySelector("div"));
      var xDataArr = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      var yDataArr1 = [120, 132, 101, 134, 90, 230, 210];
      var yDataArr2 = [20, 82, 191, 94, 290, 330, 310];
      // 准备配置项，实际上就是一个对象
      // 步骤4：准备配置项，以后在项目中除了这一块不一样之外，其他都是一样的

      var option = {
        xAxis: {
          type: "category",
          data: xDataArr,
        },
        yAxis: {
          type: "value",
          stack: true,
        },
        series: [
          {
            type: "line",
            data: yDataArr1,
            stack: "all", // series中的每一个对象配置相同的stack值, 这个all可以任意写
            areaStyle: {},
          },
          {
            type: "line",
            data: yDataArr2,
            stack: "all", // series中的每一个对象配置相同的stack值, 这个all可以任意写
            areaStyle: {},
          },
        ],
      };
      // 步骤5：将配置项设置给 echarts 实例对象
      mCharts.setOption(option);
    </script>
  </body>

总结：蓝色这条线的y轴起点, 不再是y轴, 而是红色这条线对应的点. 所以相当于蓝色是在红色这条线的基础之上进行绘制. 基于前一个图表进行堆叠

散点图

假设这个数据是从服务器获取到的, 数组中的每一个元素都包含3个维度的数据: 性别,身高,体重, 而

散点图需要的数据是一个二维数组, 所以我们需要将从服务器获取到的这部分数据,通过代码生成散

点图需要的数据

散点图的常见效果

气泡图效果

要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同

symbolSize 控制散点的大小

itemStyle.color 控制散点的颜色

这两个配置项都支持固定值的写法, 也支持回调函数的写法

设置好了效果如下：

涟漪动画效果

type:effectScatter

将 type 的值从 scatter 设置为 effectScatter 就能够产生涟漪动画的效果

rippleEffect

rippleEffect 可以配置涟漪动画的大小

showEffectOn

showEffectOn 可以控制涟漪动画在什么时候产生, 它的可选值有两个: render 和 emphasis

render 代表界面渲染完成就开始涟漪动画

emphasis 代表鼠标移过某个散点的时候, 该散点开始涟漪动画

注意一下，对后端返回的数据格式进行处理，以便能够正常在前端页面中显示数据

    // axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个            代表身高, 一个代表体重;
      var axisData = [];
      for (var i = 0; i < data.length; i++) {
        var height = data[i].height;
        var weight = data[i].weight;
        var newArr = [height, weight];
        axisData.push(newArr);
      }
      console.log(axisData);
      var mCharts = echarts.init(document.querySelector("div"));
      var option = {
        xAxis: {
          type: "value", // 此时横坐标与纵坐标都是数值轴
          scale: true, //将坐标轴都设置为脱离0值比例，scale
        },
        yAxis: {
          type: "value",
          scale: true, //将坐标轴都设置为脱离0值比例，scale，不然就会挤成一堆，效果不好看
        },
        series: [
          {
            // type: "scatter",
            type: "effectScatter", // 开启类型的涟漪效果
            showEffectOn: "emphasis", // render emphasis，控制鼠标移动到某个点的时候(hover)才会产生涟漪效果
            // 涟漪特效相关配置
            rippleEffect: {
              scale: 10, // 控制涟漪效果的范围,动画中波纹的最大缩放比例
            },
            data: axisData,
            // symbolSize: 20,
            // 让symbolSize不是一个固定值，根据不同元素，散点的大小会发生变化
            symbolSize: function (arg) {
              console.log(arg);
              var height = arg[0] / 100; //之前的体重高度是cm，需要转换成m
              var weight = arg[1];
              // bmi = 体重 / (身高m*身高m) 大于28，就代表肥胖
              var bmi = weight / (height * height);
              if (bmi > 28) {
                return 20;
              }
              return 5;
            },
            itemStyle: {
              // 散点图的颜色也可以函数设置
              color: function (arg) {
                console.log(arg);
                var height = arg.data[0] / 100;
                var weight = arg.data[1];
                // bmi = 体重 / (身高m*身高m) 大于28，就代表肥胖
                var bmi = weight / (height * height);
                if (bmi > 28) {
                  return "red";
                }
                return "green";
              },
            },
          },
        ],
      };
      mCharts.setOption(option);
    </script>

结合地图

散点图也经常结合地图来进行地图区域的标注, 这个效果将在讲解地图时实现

散点图的特点

散点图可以帮助我们推断出不同维度数据之间的相关性, 比如上述例子中,看得出身高和体重是正相关, 身高越高, 体重越重

散点图也经常用在地图的标注上

直角坐标系

直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图折线图散点图

针对于直角坐标系的图表, 有一些通用的配置

配置1: 网格 grid 与x轴，y轴不同

grid是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的

var option = {
grid: {
show: true, // 显示grid
borderWidth: 10, // grid的边框宽度
borderColor: 'red', // grid的边框颜色
left: 100, // grid的位置
top: 100,
width: 300, // grid的大小
height: 150
}
}

配置2: 坐标轴 axis

坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴

坐标轴类型 type

value : 数值轴, 自动会从目标数据中读取数据

category : 类目轴, 该类型必须通过 data 设置类目数据

坐标轴位置

xAxis : 可取值为 top 或者 bottom

yAxis : 可取值为 left 或者 right

var option = {
xAxis: {
type: 'category',
data: xDataArr,
position: 'top'
},
yAxis: {
type: 'value',
position: 'right'
}
}

配置3: 区域缩放 dataZoom

dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着

可以配置多个区域缩放器

区域缩放类型 type

slider : 滑块

inside : 内置, 依靠鼠标滚轮或者双指缩放

产生作用的轴

xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可

yAxisIndex :设置缩放组件控制的是哪个 y 轴, 一般写0即可

指明初始状态的缩放情况

start : 数据窗口范围的起始百分比

end : 数据窗口范围的结束百分比

    dataZoom: [
          {
            // type: "slider",
            // type: "inside",
            xAxisIndex: 0,
          }, // 需要指明产生的作用轴
          {
            // type: "slider",
            type: "slider",
            yAxisIndex: 0,
            // 可以指明初始状态的缩放情况
            start: 0, // 数据窗口范围的起始百分比
            end: 80, // 数据窗口范围的结束百分比
          },
        ],
    toolbox: {
          feature: {
            dataZoom: {}, //直接设置一个空对象即可，就会在页面中呈现两个按钮
          },
        },

饼图

显示数值

label.show : 显示文字

label.formatter : 格式化文字

南丁格尔图

南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大

roseType:'radius'

选中效果

selectedMode: 'multiple'

选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可

选 'single' ， 'multiple' ，分别表示单选还是多选

selectedOffset: 30

选中扇区的偏移距离

圆环

radius

饼图的半径。可以为如下类型：

number ：直接指定外半径值。 string ：例如， '20%' ，表示外半径为可视区尺寸（容器高宽中

较小一项）的 20% 长度。 Array. ：数组的第一项是内半径，第二项是外半径, 通过 Array , 可以

将饼图设置为圆环图

  <body>
    <!-- 步骤2：准备一个呈现图表的盒子 -->
    <div style="width: 600px; height: 400px"></div>
    <script>
      // 参数，dom，决定图表最终呈现的位置
      // 步骤3：初始化 echarts 实例对象
      var mCharts = echarts.init(document.querySelector("div"));
      // pieData就是需要设置给饼图的数据，数组，数组中包含一个又一个的对象，每一个对象中，需要有name和value
      var pieData = [
        {
          value: 11231,
          name: "淘宝",
        },
        {
          value: 22673,
          name: "京东",
        },
        {
          value: 6123,
          name: "唯品会",
        },
        {
          value: 8989,
          name: "1号店",
        },
        {
          value: 6700,
          name: "聚美优品",
        },
      ];
      // 准备配置项，实际上就是一个对象
      // 步骤4：准备配置项，以后在项目中除了这一块不一样之外，其他都是一样的
      var option = {
        series: [
          {
            type: "pie", // 饼图并不是一个坐标系，只是要设置series就可
            data: pieData,
            label: {
              show: true, // 显示文字
              // formatter: "hehe", // 决定文字显示的内容
              formatter: function (arg) {
                console.log(arg);
                return (
                  arg.name + "平台" + arg.value + "元\n" + arg.percent + "%"
                );
              },
            },
            // radius: 20, // 饼图的半径
            // radius: "20%", // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
            radius: ["50%", "75%"], // 第0个元素代表的是内圆的半径，第1个元素外圆的半径
            roseType: "radius", // 南丁格尔图，饼图的每一个区域的半径是不同的
            // selectedMode: "single", // 选中的效果，能够将选中的区域偏离圆点一小段距离
            selectedMode: "mutiple",
            selectedOffset: 20, //选中偏移量
          },
        ],
      };
      // 步骤5：将配置项设置给 echarts 实例对象
      mCharts.setOption(option);
    </script>
  </body>

效果图：

地图

百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak

矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据

接下来的实现是通过矢量图的方式来实现的

步骤4 在Ajax的回调函数中, 往 echarts 全局对象注册地图的 json 数据

步骤5 获取完数据之后, 需要配置 geo 节点, 再次的 setOption

缩放拖动: roam

名称显示: label

初始缩放比例: zoom

地图中心点: center

显示某个区域

准备安徽省的矢量地图数据

加载安徽省地图的矢量数据

$.get('json/map/anhui.json', function (anhuiJson) {

})

在Ajax的回调函数中注册地图矢量数据

echarts.registerMap('anhui', anhuiJson)

配置 geo 的 type:'map' , map:'anhui'

通过 zoom 调整缩放比例

通过 center 调整中心点

不同城市颜色不同

1.显示基本的中国地图

2.准备好城市空气质量的数据, 并且将数据设置给 series

3.将 series 下的数据和 geo 关联起来

4.结合 visualMap 配合使用

visualMap 是视觉映射组件, 和之前区域缩放 dataZoom 很类似, 可以做数据的过滤. 只不过

dataZoom 主要使用在直角坐标系的图表, 而 visualMap 主要使用在地图或者饼图中

地图和散点图结合

1.给 series 这个数组下增加新的对象

2.准备好散点数据,设置给新对象的 data

3.配置新对象的 type

type:effectScatter

让散点图使用地图坐标系统

coordinateSystem: 'geo'

让涟漪的效果更加明显

rippleEffect: { scale: 10 }

代码实现：

  <body>
    <!-- 步骤2：准备一个呈现图表的盒子 -->
    <div style="width: 600px; height: 400px; border: 1px solid red"></div>
    <script>
      // 参数，dom，决定图表最终呈现的位置
      // 步骤3：初始化 echarts 实例对象
      var mCharts = echarts.init(document.querySelector("div"));
      // 准备好城市空气质量的数据, 并且将数据设置给 series
      var airData = [
        { name: "北京", value: 39.92 },
        { name: "天津", value: 39.13 },
        { name: "上海", value: 31.22 },
        { name: "重庆", value: 66 },
        {
          name: "河北",
          value: 147,
        },
        { name: "河南", value: 113 },
        { name: "云南", value: 25.04 },
        { name: "辽宁", value: 50 },
        { name: "黑龙江", value: 114 },
        { name: "湖南", value: 175 },
        { name: "安徽", value: 117 },
        { name: "山东", value: 92 },
        { name: "新疆", value: 84 },
        { name: "江苏", value: 67 },
        { name: "浙江", value: 84 },
        { name: "江西", value: 96 },
        { name: "湖北", value: 273 },
        { name: "广西", value: 59 },
        { name: "甘肃", value: 99 },
        {
          name: "山西",
          value: 39,
        },
        { name: "内蒙古", value: 58 },
        { name: "陕西", value: 61 },
        { name: "吉林", value: 51 },
        { name: "福建", value: 29 },
        {
          name: "贵州",
          value: 71,
        },
        { name: "广东", value: 38 },
        { name: "青海", value: 57 },
        { name: "西藏", value: 24 },
        { name: "四川", value: 58 },
        {
          name: "宁夏",
          value: 52,
        },
        { name: "海南", value: 54 },
        { name: "台湾", value: 88 },
        { name: "香港", value: 66 },
        { name: "澳门", value: 77 },
        {
          name: "南海诸岛",
          value: 55,
        },
      ];
      var scatterData = [
        {
          value: [117.283042, 31.86119], // 散点的坐标, 使用的是经纬度
        },
      ];
      $.get("json/map/china.json", function (ret) {
        // ret 就是中国的各个省份的矢量地图的数据
        console.log(ret);
        echarts.registerMap("chinaMap", ret);
        var option = {
          geo: {
            type: "map",
            map: "chinaMap", // chinaMap需要和registerMap中的第一个参数保持一致
            roam: true, // 设置允许缩放拖动
            label: {
              show: true, //展示标签
            },
            // zoom: 1, // 设置初始化的缩放比例
            // center: [116.507676, 31.752889], //设置地图中心点的坐标
          },
          series: [
            {
              data: airData,
              geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
              type: "map",
            },
            {
              data: scatterData, // 配置散点的坐标数据
              type: "effectScatter",
              coordinateSystem: "geo", //指明散点使用的坐标系统，geo的坐标系统
              rippleEffect: {
                scale: 10, // 设置动画涟漪动画的缩放比例
              },
            },
          ],
          visualMap: {
            min: 0,
            max: 300,
            inRange: {
              color: ["white", "red"], // 控制颜色渐变的范围
            },
            calculable: true, // 出现滑块
          },
        };
        // 步骤5：将配置项设置给 echarts 实例对象
        mCharts.setOption(option);
      });
      // 准备配置项，实际上就是一个对象
      // 步骤4：准备配置项，以后在项目中除了这一块不一样之外，其他都是一样的
    </script>
  </body>

注意: 需要注意的是, 由于在代码中使用了 Ajax , 所以, 关于此文件的打开, 不能以 file 的协议打开, 应该将其置于 HTTP 的服务之下方可正常展示地图

雷达图

显示数值 label

区域面积 areaStyle

绘制类型 shape

雷达图绘制类型，支持 'polygon' 和 'circle'

'polygon' : 多边形

'circle' 圆形

代码实现：

     var dataMax = [
        {
          name: "易用性",
          max: 100,
        },
        {
          name: "功能",
          max: 100,
        },
        {
          name: "拍照",
          max: 100,
        },
        {
          name: "跑分",
          max: 100,
        },
        {
          name: "续航",
          max: 100,
        },
      ];    
    var option = {
        radar: {
          indicator: dataMax, // 配置各个维度的最大值
          shape: "circle", // 配置雷达图最外层的图形展示 circle polygon
        },
        series: [
          {
            type: "radar", // 此图表是一个雷达图
            label: {
              // 设置标签的样式
              show: true, // 显示数值
            },
            areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积
            data: [
              {
                name: "华为手机1",
                value: [80, 90, 80, 82, 90],
              },
              {
                name: "中兴手机1",
                value: [70, 82, 75, 70, 78],
              },
            ],
          },
        ],
      };

效果图：

仪表盘图

数值范围: max min

多个指针: 增加data中数组的元素

多个指针颜色的差异: itemStyle

仪表盘可以更直观的表现出某个指标的进度或实际情况

代码实现：

  <body>
    <!-- 步骤2：准备一个呈现图表的盒子 -->
    <div style="width: 600px; height: 400px; border: 1px solid red"></div>
    <script>
      // 参数，dom，决定图表最终呈现的位置
      // 步骤3：初始化 echarts 实例对象
      var mCharts = echarts.init(document.querySelector("div"));

      // 准备配置项，实际上就是一个对象
      // 步骤4：准备配置项，以后在项目中除了这一块不一样之外，其他都是一样的
      var option = {
        series: [
          {
            type: "gauge", // 此图表是一个雷达图
            data: [
              {
                value: 97,
                itemStyle: {
                  //控制指针的样式
                  color: "pink", // 控制指针的颜色
                },
              }, // 每一个对象代表一个指针
              {
                value: 85,
                itemStyle: {
                  color: "green",
                },
              },
            ],
            min: 50, // min max  控制仪表盘的范围
          },
        ],
      };
      // 步骤5：将配置项设置给 echarts 实例对象
      mCharts.setOption(option);
    </script>
  </body>

效果图：

常用配置属性总结

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模