echarts学习笔记

HaushoLin

已于 2022-07-11 23:02:15 修改

阅读量893

点赞数 2

分类专栏： echarts 文章标签： echarts 学习前端

于 2022-07-11 09:42:24 首次发布

本文链接：https://blog.csdn.net/Steven_Son/article/details/125715231

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

这篇文章是我学习echarts时所做的笔记，比较适合我本人，可能适合你，也可能不适合你，仁者见仁智者见智啦😊。

一、快速上手

1.cdn引入或者装依赖 
2.创建div盒子  <div style="width:600px;height:400px"></div>
3.从echarts对象中实例出一个子实例   let mecharts = echarts.init(document.querySelector('div'))
4.创建option并配置好   let option = {}
5.将option配置项设置到子实例中，mecharts.setOption(option)

二、option配置项

xAxis：x轴

yAxis：y轴

let XDataArr = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
let YDataArr1 = [3000, 1500, 1400, 2600, 1000, 580, 168, 11, 666, 888, 45, 35,];

// 这种是x轴展示科目，y轴展示数据
xAxis: {
  type: "category", 
  data: XDataArr, 
},
yAxis: {type: "value"},

// 这种是x轴展示数据，y轴展示科目
xAxis: {type: "value"},
yAxis: {
  type: "category", 
  data: XDataArr, 
}
    
 xAxis: {
   boundaryGap: false, // X轴第一位类目显示到Y轴第0项
  }
 yAxis: {
    scale: true, // 缩放 数据相差很小时不至于折成一条线看不出效果，让数据自动拉开,x或y轴都可以设置。例如3001,3005
 }

label：显示每根柱子的数据

label: { show: true}

series：存放每条线对象的数组

表名称、数据源、线类型

  name: "康师傅各月份销量汇总",
  data: YDataArr2, // 绑定Y轴数据
  type: "line",

lineStyle：线样式

  smooth: true, // 让线变平滑
  lineStyle: {
    color: "aqua",
    type: "dotted", // 默认solid 实线   dotted点线  dashed虚线
  }

markPoint：最大值最小值

 markPoint: {
    data: [
      {
        type: "max",
      },
      {
        type: "min",
      },
    ],
  },

markLine：平均值

 markLine: {
    data: [
      { type: "average" },
    ],
  }

markArea：指定区域背景阴影

markArea: {
    data: [
      [{ xAxis: "3月" }, { xAxis: "5月" }],
      [{ xAxis: "8月" }, { xAxis: "10月" }],
    ],
  },

areaStyle：填充表线段下面的背景颜色

areaStyle: { color: "orange" }

title：标题

 title: {
     text: "期末哲学成绩表",
     textStyle: {
        color: "hotpink",
      },
      top: 0,
      left: 30,
  }

tooltip: 提示工具

tooltip: {
  trigger: "item", // 显示每条数据
  triggerOn: "mousemove", // 事件模式  mousemove和click
  // 两种格式化  内置和函数自定义拼接
  // formatter: "{b}的成绩是:{c}",    第一种
  formatter: function (arg) {  // 第二种
    return arg.name + "的成绩是:" + arg.data;
    console.log(arg);
  },
}

toolbox：工具箱

toolbox: {
  show: true, // 显示工具箱
  feature: {
    saveAsImage: {}, // 导出当前表格图片
    restore: {}, //  重置数据
    dataView: {}, // 数据视图，可以对表中的数据进行更改
    magicType: { type: ["bar", "line"] }, // 将表格展示类型进行切换(柱状图、折线图)
    dataZoom: {}, // 缩放(2个按钮,可以对想要的部分数据进行放大和还原)
  },
},

legend：在表标题中间显示所有科目的名称，点击各个名称可显示或隐藏各自的数据

// 多少科目就填上多少数组元素,对应series数组中每个对象的name值
legend: { data: ["哲学", "数据结构"] }

三、柱状图

使用场景：呈现出每个分类数据各自是多少

      // x轴是一个类目数组，y轴是一个数据数组  两者的索引需要一一对应
      let mecharts = echarts.init(document.querySelector("div"));
      let xDataArr = ["罗翔","张三","柏拉图","苏格拉底","亚里士多德","色拉霍马叙斯","哲学王",];
      let yDataArr = [100, 30, 90, 55, 44, 75, 86];
      let option = {
        xAxis: {
          type: "category", // 类目在x轴显示所以在xAixs设置type
          data: xDataArr,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "哲学",
            type: "bar", // 设置为柱状图类型
            markPoint: {  // 最大最小值
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
            markLine: {  // 平均值
              data: [
                {
                  type: "average",
                  name: "平均值",
                },
              ],
            },
            label: {  // 显示名字
              show: true,
              rotate: 30,
            },
            data: yDataArr,
            barWidth: "30%", // 图表宽度
          },
        ],
      };
      mecharts.setOption(option);

在这里插入图片描述

四、折线图

使用场景：数据随时间的变化差距

	  // x轴是一个类目数组，y轴可以有多个数组，x轴类目和y轴数据的索引需要一一对应
      let mecharts = echarts.init(document.querySelector("div"));
      let YDataArr1 = [3000, 1500, 1400, 2600, 1000, 580, 168, 11, 666, 888, 45, 35,];
      let YDataArr2 = [3000, 3001, 3002, 3009, 3010, 3005, 3015, 3013, 3014, 3018, 3006, 3007,];
      let XDataArr = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",];
      let option = {
        xAxis: {
          // X轴
          type: "category", // 类型为类表
          data: XDataArr, // 绑定X轴数据
          boundaryGap: false, // X轴第一位类目显示到Y轴第0项
        },
        yAxis: {
          // Y轴
          type: "value",
          scale: true, // 缩放 数据相差很小时不至于折成一条线看不出效果，让数据自动拉开。例如3001,3005
        },
        label: {
          // 每根柱子的数据
          show: true,
        },
        series: [
          {
            name: "康师傅各月份销量汇总",
            data: YDataArr2, // 绑定Y轴数据
            type: "line",
            markPoint: {
              // 最大值最小值
              data: [
                {
                  type: "max",
                },
                {
                  type: "min",
                },
              ],
            },
            markLine: {
              // 平均值
              data: [
                {
                  type: "average",
                },
              ],
            },
            markArea: {
              // 指定区域的阴影背景
              data: [
                [{ xAxis: "3月" }, { xAxis: "5月" }],
                [{ xAxis: "8月" }, { xAxis: "10月" }],
              ],
            },
            smooth: true, // 让线变平滑
            lineStyle: {
              color: "aqua",
              type: "dotted", // 默认solid 实线   dotted点线  dashed虚线
            },
            areaStyle: {
              // 填充表线段下面的背景颜色
              color: "orange",
            },
          },
        ],
      };
      mecharts.setOption(option);

在这里插入图片描述

五、散点图

使用场景：不同维度数据直接的相关性(例如身高体重)

// 散点图接收数据的类型为二维数组，并且每个数组的元素都为数字，x,y轴用scale可以将相近的值进行拉开 更好区分

      let mecharts = echarts.init(document.querySelector("div"));
      let xyDataArr = [
        { height: 165, weight: 20 },
        { height: 166, weight: 30 },
        { height: 170, weight: 40 },
        { height: 175, weight: 50 },
        { height: 178, weight: 60 },
        { height: 180, weight: 150 },
        { height: 181, weight: 120 },
        { height: 186, weight: 140 },
      ];
      // 创建空数组,将数组中每个对象的height和weight都放到每一个新数组中，最后将所有数组插入到一个大数组，形成二维数组[ [165,20],[166,30] ]
      let xyNewArr = [];
      for (let i = 0; i < xyDataArr.length; i++) {
        let height = xyDataArr[i].height;
        let weight = xyDataArr[i].weight;
        let newArr = [height, weight];
        xyNewArr.push(newArr);
      }
      
      let option = {
        xAxis: {
          type: "value",
          scale: true,
        },
        yAxis: {
          type: "value",
          scale: true,
        },
        series: {
          // 使用场景大部分时候用于搭配地图区域涟漪效果
          // type: "scatter", // 默认散点图
          type: "effectScatter", // 涟漪散点图
          // 涟漪缩放的大小
          rippleEffect: {
            scale: 4,
          },
          // 什么时候展示涟漪    默认render(页面渲染就展示涟漪)   鼠标经过产生涟漪动画emphasis
          showEffectOn: "emphasis",
          data: xyNewArr, // 绑定数据源
          // symbolSize有两种写法
          // symbolSize: 30, // 第一种  所有大小都是这种
          // 第二种: 根据肥胖程度显示不同大小
          symbolSize: function (arg) {
            let height = arg[0] / 100; // 身高需要除以100后得到小数点   即170.3 => 1.73
            let weight = arg[1];
            // 判断肥胖计算公式  bmi = 体重 / （身高 * 身高）
            // bmi大于28代表肥胖，反之瘦或正常
            let bmi = weight / (height * height);
            if (bmi > 28) {
              return 30;
            }
            return 10;
          },
          // 小圆点的颜色样式有两种写法
          // itemStyle: {  // 第一种  全部颜色都一致
          //   color: "aqua",
          // },
          // 第二种  根据不同体重显示不同的颜色
          itemStyle: {
            color: function (arg) {
              let height = arg.data[0] / 100;
              let weight = arg.data[1];
              let bmi = weight / (height * height);
              if (bmi > 28) {
                return "hotpink";
              }
              return "skyblue";
            },
          },
        },
      };
      mecharts.setOption(option);

在这里插入图片描述

六、饼图

使用场景：需要查看某些数据的占比

    // 饼图不需要x,y轴   只需要在series下的对象设置type为pie以及赋数据源即可(数据源是一个数组，存放很多拥有name和value属性的对象)

      let mecharts = echarts.init(document.querySelector("div"));
      let pieData = [
        {
          name: "淘宝",
          value: "1466",
        },
        {
          name: "京东",
          value: "8655",
        },
        {
          name: "唯品会",
          value: "12664",
        },
        {
          name: "苏宁易购",
          value: "3090",
        },
        {
          name: "拼多多",
          value: "1650",
        },
      ];
      
      let option = {
        series: [
          {
            type: "pie",
            data: pieData,
            // 显示文字  两种  一种只显示name，另一种可以自定义拼接我们想要的数据
            label: {
              show: true,
              formatter: function (arg) {  // 第二种
                return (
                  arg.name + "平台" + arg.value + "元\n" + arg.percent + "%"
                );
              },
            },
            // 盒子的宽高有两种   一种整个圆    第二种圆环形式
            // radius: "20%", // 百分比相对父盒子的宽高   第一种
            // radius: ["50%", "70%"], // 第0个是内圆，第1个是外圆   第二种
            // 切换为南丁格尔图（没有圆形边框）   如果用这个就不要使用圆环定宽高，因为不美观
            roseType: "radius", 
            // 点击每一块的展示效果  single：只显示被点击的那块偏移，multiple：所有小块被点击都能偏移出来
            selectedMode: "single", 
            selectedOffset: 20, // 从饼图中心点偏移出来的距离
          },
        ],
      };
      mecharts.setOption(option);

在这里插入图片描述

七、雷达图

使用场景：若干个产品有相同的功能需要进行对比

  /*
   雷达图流程：
     1、设置雷达各个维度的最大值和外部形状
     2、在series中创建一个雷达对象，将type设置为radar,data中存放多个要对比的对象,每个对象下name为他们的名称，value是要对比的数据   
  */
      let mecharts = echarts.init(document.querySelector("div"));
      let radarData1 = [80, 70, 90, 50, 60];
      let radarData2 = [60, 90, 70, 50, 80];
      let radarMax = [
        {
          name: "易用性",
          max: 100,
        },
        {
          name: "续航",
          max: 100,
        },
        {
          name: "跑分",
          max: 100,
        },
        {
          name: "功能",
          max: 100,
        },
        {
          name: "拍照",
          max: 100,
        },
      ];
      let option = {
        radar: {
          indicator: radarMax, // 设置雷达各个维度的最大值
          // shape: "circle", // 改变外部形状  circle原型  默认polygon多边形
        },
        series: [
          {
            type: "radar",
            label: {
              // show: true, // 显示每个数值
            },
            areaStyle: {}, // 各个区域的阴影颜色
            // 展示多少个就写多少个对象
            data: [
              {
                name: "iPhone 13pro", // 名称
                value: radarData1, // 数据源
              },
              {d
                name: "OPPO Find3 pro",
                value: radarData2,
              },
            ],
          },
        ],
      };
      mecharts.setOption(option);

在这里插入图片描述

八、仪表盘

使用场景: 显示某个指标或者库存类

 /*
     仪表盘：
        1、经典五步
        2、在series中创建一个对象，type为gauge仪表盘，data数组存放多个对象，每个对象代表仪表盘的一根指针
        3、可以给它设置颜色itemStyle，以及最大值或者最小值（从哪个值作为起点）  
*/
      let mecharts = echarts.init(document.querySelector("div"));
      let option = {
        series: [
          {
            type: "gauge",
            data: [
              {
                value: 88,
                itemStyle: {
                  color: "orange",
                },
              },
              {
                value: 89,
                itemStyle: {
                  color: "#3c9ff5",
                },
              },
            ],
            min: 50,
          },
        ],
      };
      mecharts.setOption(option);

在这里插入图片描述

九、地图

只引入某个区域的地图

// 每一个geo代表一个区域地图  
let mecharts = echarts.init(document.querySelector("div"));
      // 只需请求将该区域的json即可获取到当地的所有区域信息
      $.get("./lib/json/guangdong.json", function (res) {
        echarts.registerMap("guangdonMap", res);
        let option = {
          geo: {
            type: "map",
            map: "guangdonMap",
            label: {
              show: true,
            },
            // center: [116.708463, 23.37102],
            zoom: 1,
          },
        };
        mecharts.setOption(option);
      });

在这里插入图片描述

地图和散点图的结合

 /*
      地图和散点图的结合 流程：
         1、五步引入
         2、利用jQuery调用本地地图json文件，将返回值放到echarts.registerMap注册出一个新地图，并指定键
         3、拿该键名给geo的map赋值，成功生成地图
         4、显示虚拟小地图需要将geo地图和series关联起来
         5、series存放一个以对象城市名name和空气质量value组成的数组，设置类型和使用第几个geo地图
         6、最后再visualMap中设置虚拟小地图的相关属性
         7、将地图和散点图联系起来
		8、准备散点图的数据 scatterData，在series中创建一个散点图对象,type为effectScatter, coordinateSystem指定地图系统为geo
         9、开启散点图涟漪效果
 */

// 引入 
<script src="./lib/js/echarts.min.js"></script>
<script src="./lib/js/jquery.min.js"></script> 

// 设置散点图的数据
let scatterData = [{ value: [126.642464, 45.756967] }];
let 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 },];
      $.get("./lib/json/china.json", function (res) {
        echarts.registerMap("chinaMap", res); // 注册地图
        let option = {
          geo: {
            type: "map",
            map: "chinaMap", // 使用地图
            roam: true, // 地图可以缩放
            label: { // 显示每个区域名称
              show: true,
            },
          },
          series: [
            {
              data: airData, // 绑定空气质量数据
              geoIndex: 0, // 使用第0个geo
              type: "map", // 类型为地图
            },
            {
              // 绑定某个需要涟漪动画的区域经纬度，类似这样[{ value: [126.642464, 45.756967] }]
              data: scatterData,  
              type: "effectScatter", // 设置散点图的类型为涟漪散点图
              coordinateSystem: "geo",
              rippleEffect: {   // 涟漪缩放比例
                scale: 10,
              },
            },
          ],
          visualMap: {
            // 虚拟小地图（左下角）
            min: 0, // 最小值
            max: 300, // 最大值
            // 设置渐变色
            inRange: {
              color: ["white", "red"],
            },
            calculabel: true, // 左下角渐变条出现滑块，根据鼠标在滑块上移动的数值显示当前值的所代表的区域
          },
        };
        mecharts.setOption(option); });