echarts学习笔记

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

这篇文章是我学习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)

二、使用步骤

1.option配置项

xAxis：x轴

yAxis：y轴

代码如下（示例）：

let XDataArr = ["周一","周二","周三","周四","周五","周六","周日"];
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
 }

2、label：显示每根柱子的数据

代码如下（示例）：

label: { show: true}

该处使用的url网络请求的数据。

---

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

代码如下（示例）：

 //表名称、数据源、线类型
  name: "康师傅各月份销量汇总",
  data: YDataArr2, // 绑定Y轴数据
  type: "line",

---

4、lineStyle：线样式

代码如下（示例）：

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

---

5、label：显示每根柱子的数据

代码如下（示例）：

label: { show: true}

该处使用的url网络请求的数据。

---

6、label：显示每根柱子的数据

代码如下（示例）：

label: { show: true}

该处使用的url网络请求的数据。

---

7、title：标题

代码如下（示例）：

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

---

8、tooltip: 提示工具

代码如下（示例）：

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

---

9、toolbox：工具箱

代码如下（示例）：

label: { show: true}

该处使用的url网络请求的数据。

---

2、label：显示每根柱子的数据

代码如下（示例）：

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

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

   	//04 实例化echarts
		// 4.1 创建一个实例
		var echart = echarts.init(document.getElementById("container"))
		// 4.2 定义配置项
		var option = {
			// 图表的标题
			title:{
				text:"我的第一个图表"
			},
			// 图表的提示
			tooltip:{},
			// 图例
			legend:{data:["睡眠时长"]},
			// x轴线
			xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
			// y轴线
			yAxis:{},
			// 设置数据
			series:[
				{
					// 数据名称
					name:"睡眠时长",
					// 类型为柱状图
					type:"bar",
					// 数据data
					data:[8,10,4,5,9,4,8]
					}
			]
		}
		// 4.3 更新配置
		echart.setOption(option);
		// chart图表，set设置 Option选项  data数据 type类型 bar条（柱状条），series系列（数据） Axis轴线 xAxis水平轴线 
		// legend传奇（图例） tooltip 提示 init初始化 document文档 

---

折线图

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

	  // 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);

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。