41·灵魂前端工程师养成-数据可视化echarts

2022-09-26 17:21:30 浏览数 (1)
  • echarts介绍
  • echarts安装部署
  • 使用Echarts
  • Echarts更新数据
  • Echarts的点击事件
  • Echarts移动端适配

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

echarts介绍

emmm... 妈的有啥可介绍的，echarts就是百度的一个开源工具，现在和apache公司共同维护，一个数据可视化的前端画图工具

echarts官网：TP echarts文档：TP

获取echarts途径： 1.从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建（运维方式，个人推荐）。TP



2.在 ECharts 的 GitHub 获取。TP



3.通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”TP

代码语言：javascript复制
npm install echarts --save



4.通过 jsDelivr 等 CDN 引入(前端开发方式，个人推荐) CDN网站：TP



选择min.js



echarts安装部署

创建项目

使用VScode打开项目目录,创建HTML文件，并且引入echarts



代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>曾老湿 Echarts 介绍</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
</body>

</html>

测试是否引入成功

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>曾老湿 Echarts 介绍</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
</body>
    <script>
        console.log(echarts)
    </script>

</html>



打印出函数，展开函数就是echarts的各种api



证明，引入成功 /ye

使用webpack安装echarts

这次使用html，只引入main.js文件

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>曾老湿 Echarts 介绍</title>
</head>

<body>
    <script src="./main.js"></script>
</body>

</html>



代码语言：javascript复制
//使用yarn安装parcel-bundler
MacBook-pro:echarts-1 driverzeng$ yarn global add parcel-bundler

// 或者使用npm安装parcel-bundler
MacBook-pro:echarts-1 driverzeng$ npm i -g parcel-bundler

// 运行index.html页面
MacBook-pro:echarts-1 driverzeng$ parcel src/index.html

// 安装echarts
MacBook-pro:echarts-1 driverzeng$ yarn add echarts

// 安装echarts类型解析
MacBook-pro:echarts-1 driverzeng$ yarn add --dev @types/echarts

然后在main.js中，导入echarts，并且测试

main.js

代码语言：javascript复制
import echarts from 'echarts'
console.log(echarts)



成功

使用Echarts

入门第一个实例

CRM学习法，首先打开官网，查看文档

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

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

把上面的body内容，放到我们的index.html中

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>曾老湿 Echarts 介绍</title>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script src="./main.js"></script>
</body>

</html>

然后我们把官网给的例子js代码放入main.js文件中

代码语言：javascript复制
import echarts from "echarts";

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

// 指定图表的配置项和数据
var option = {
  title: {
    text: "ECharts 入门示例",
  },
  tooltip: {},
  legend: {
    data: ["销量"],
  },
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {},
  series: [
    {
      name: "销量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);



兄dei，图表就出来了

画一个线性图



打开官方网站，然后选择一个线形图



现在我们就把这个代码，放到JS中

代码语言：javascript复制
import echarts from "echarts";

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

// 指定图表的配置项和数据
const option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);



也可以画俩图



改一改数据

代码语言：javascript复制
import echarts from "echarts";

var myChart = echarts.init(document.getElementById("main"));
var myChart2 = echarts.init(document.getElementById("main2"));

// 指定图表的配置项和数据
const option = {
  legend: {
    data: ["曾老湿bug数量line"],
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "曾老湿bug数量line",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
};

var option2 = {
  title: {
    text: "年度总结",
  },
  tooltip: {},
  legend: {
    data: ["曾老湿bug数量zhu"],
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
  },
  yAxis: {},
  series: [
    {
      name: "曾老湿bug数量zhu",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart2.setOption(option2);



更换主题

echarts 内置以下两款主题

echarts.init(xxx,'dark')

echarts.init(xxx,'light')

代码语言：javascript复制
import echarts from "echarts";

const main = document.getElementById("main");
const main2 = document.getElementById("main2");

var myChart = echarts.init(main, "light");
var myChart2 = echarts.init(main2, "dark");

// 指定图表的配置项和数据
const option = {
  legend: {
    data: ["曾老湿bug数量line"],
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "曾老湿bug数量line",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
};

var option2 = {
  title: {
    text: "年度总结",
  },
  tooltip: {},
  legend: {
    data: ["曾老湿bug数量zhu"],
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
  },
  yAxis: {},
  series: [
    {
      name: "曾老湿bug数量zhu",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart2.setOption(option2);



修改线条样式

lineStyle

代码语言：javascript复制
import echarts from "echarts";

const main = document.getElementById("main");
const main2 = document.getElementById("main2");

var myChart = echarts.init(main, "light");
var myChart2 = echarts.init(main2, "dark");

// 指定图表的配置项和数据
var option2 = {
  title: {
    text: "年度总结",
  },
  tooltip: {},
  legend: {
    data: ["曾老湿bug数量zhu"],
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
  },
  yAxis: {},
  series: [
    {
      name: "曾老湿bug数量zhu",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
  legend: {
    data: ["曾老湿bug数量line"],
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      lineStyle: {
        color: "green",
      },
      name: "曾老湿bug数量line",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
});
myChart2.setOption(option2);



修改点的样式

itemStyle

代码语言：javascript复制
import echarts from "echarts";

const main = document.getElementById("main");
const main2 = document.getElementById("main2");

var myChart = echarts.init(main, "light");
var myChart2 = echarts.init(main2, "dark");

// 指定图表的配置项和数据
var option2 = {
  title: {
    text: "年度总结",
  },
  tooltip: {},
  legend: {
    data: ["曾老湿bug数量zhu"],
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
  },
  yAxis: {},
  series: [
    {
      name: "曾老湿bug数量zhu",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
  legend: {
    data: ["曾老湿bug数量line"],
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      lineStyle: {
        color: "green",
      },
      itemStyle: {
        borderWidth: 10,
      },
      name: "曾老湿bug数量line",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
});
myChart2.setOption(option2);



如果还有指定要改的东西，那么我们就可以看一下官方文档，文档里面有一个非常棒的功能

术语速查手册NEW：TP



选中你想改的内容，右边就会有提示，然后点击查看配置项手册，学习语法





代码语言：javascript复制
import echarts from "echarts";

const main = document.getElementById("main");
const main2 = document.getElementById("main2");

var myChart = echarts.init(main, "light");
var myChart2 = echarts.init(main2, "dark");

// 指定图表的配置项和数据
var option2 = {
  title: {
    text: "年度总结",
  },
  tooltip: {},
  legend: {
    data: ["曾老湿bug数量zhu"],
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
  },
  yAxis: {},
  series: [
    {
      name: "曾老湿bug数量zhu",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["曾老湿bug数量line"],
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      lineStyle: {
        color: "green",
      },
      itemStyle: {
        borderWidth: 10,
      },
      name: "曾老湿bug数量line",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
});
myChart2.setOption(option2);



添加一个title

代码语言：javascript复制
import echarts from "echarts";

const main = document.getElementById("main");
const main2 = document.getElementById("main2");

var myChart = echarts.init(main, "light");
var myChart2 = echarts.init(main2, "dark");

// 指定图表的配置项和数据
var option2 = {
  title: {
    text: "年度总结",
  },
  tooltip: {},
  legend: {
    data: ["曾老湿bug数量zhu"],
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
  },
  yAxis: {},
  series: [
    {
      name: "曾老湿bug数量zhu",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
  title: {
    show: true,
    text: "曾老湿的年度总结",
    link: "http://www.driverzeng.com",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["曾老湿bug数量line"],
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      lineStyle: {
        color: "green",
      },
      itemStyle: {
        borderWidth: 10,
      },
      name: "曾老湿bug数量line",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
});
myChart2.setOption(option2);



添加title的样式

代码语言：javascript复制
import echarts from "echarts";

const main = document.getElementById("main");
const main2 = document.getElementById("main2");

var myChart = echarts.init(main, "light");
var myChart2 = echarts.init(main2, "dark");

// 指定图表的配置项和数据
var option2 = {
  title: {
    text: "年度总结",
  },
  tooltip: {},
  legend: {
    data: ["曾老湿bug数量zhu"],
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
  },
  yAxis: {},
  series: [
    {
      name: "曾老湿bug数量zhu",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
  title: {
    show: true,
    text: "曾老湿的年度总结",
    link: "http://www.driverzeng.com",
    textStyle: {
      color: "blue",
      fontStyle: "oblique",
      fontWeight: 10,
      fontFamily: "monospace",
    },
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["曾老湿bug数量line"],
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      lineStyle: {
        color: "green",
      },
      itemStyle: {
        borderWidth: 10,
      },
      name: "曾老湿bug数量line",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
});
myChart2.setOption(option2);



Echarts更新数据

如果我们是从后端数据库中实时获取的数据，例如zabbix监控，那么数据是会更新的，我们不可能把数据写死，然后一直展示那点数据，所以我们可以模拟一下，更新数据。

首先添加一个按钮

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>曾老湿 Echarts 介绍</title>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <button id="loadMore">加载新数据</button>
    <p>上面的加载按钮是线形图的哦~~~</p>
    <div id="main2" style="width: 600px;height:400px;"></div>
    <script src="./main.js"></script>
</body>

</html>



然后接下来，我们编辑JS，开始加载数据

代码语言：javascript复制
import echarts from "echarts";

const main = document.getElementById("main");
const main2 = document.getElementById("main2");
const loadMoreButton = document.getElementById("loadMore");
let n = 0;
let m = 0;
function createKey() {
  n  = 1;
  return `${n}月`;
}

function createVales() {
  m  = 1000;
  return m;
}

let keys = [
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
];
let values = [
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
];
var myChart = echarts.init(main, "light");
var myChart2 = echarts.init(main2, "dark");

// 指定图表的配置项和数据
var option2 = {
  title: {
    text: "年度总结",
  },
  tooltip: {},
  legend: {
    data: ["曾老湿bug数量zhu"],
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
  },
  yAxis: {},
  series: [
    {
      name: "曾老湿bug数量zhu",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
  title: {
    show: true,
    text: "曾老湿的年度总结",
    link: "http://www.driverzeng.com",
    textStyle: {
      color: "blue",
      fontStyle: "oblique",
      fontWeight: 10,
      fontFamily: "monospace",
    },
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["曾老湿bug数量line"],
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      lineStyle: {
        color: "green",
      },
      itemStyle: {
        borderWidth: 10,
      },
      name: "曾老湿bug数量line",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
});
myChart2.setOption(option2);

loadMoreButton.addEventListener("click", () => {
  const key = createKey();
  const value = createVales();
  keys = [...keys, key];
  values = [...values, value];
  myChart.setOption({
    xAxis: {
      data: keys,
    },
    series: [
      {
        data: values,
      },
    ],
  });
});



点击一次，添加一次数据



实现数据loading

代码语言：javascript复制
import echarts from "echarts";

const main = document.getElementById("main");
const main2 = document.getElementById("main2");
const loadMoreButton = document.getElementById("loadMore");
let n = 0;
let m = 0;
function createKey() {
  n  = 1;
  return `${n}月`;
}

function createVales() {
  m  = 1000;
  return m;
}

let keys = [
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
];
let values = [
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
];
var myChart = echarts.init(main, "light");
var myChart2 = echarts.init(main2, "dark");

// 指定图表的配置项和数据
var option2 = {
  title: {
    text: "年度总结",
  },
  tooltip: {},
  legend: {
    data: ["曾老湿bug数量zhu"],
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
  },
  yAxis: {},
  series: [
    {
      name: "曾老湿bug数量zhu",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
  title: {
    show: true,
    text: "曾老湿的年度总结",
    link: "http://www.driverzeng.com",
    textStyle: {
      color: "blue",
      fontStyle: "oblique",
      fontWeight: 10,
      fontFamily: "monospace",
    },
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["曾老湿bug数量line"],
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      lineStyle: {
        color: "green",
      },
      itemStyle: {
        borderWidth: 10,
      },
      name: "曾老湿bug数量line",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
});
myChart2.setOption(option2);

loadMoreButton.addEventListener("click", () => {
  myChart.showLoading();
  setTimeout(() => {
    const key = createKey();
    const value = createVales();
    keys = [...keys, key];
    values = [...values, value];
    myChart.setOption({
      xAxis: {
        data: keys,
      },
      series: [
        {
          data: values,
        },
      ],
    });
    myChart.hideLoading();
  }, 3000);
});



阻止用户一顿狂点...

代码语言：javascript复制
import echarts from "echarts";

const main = document.getElementById("main");
const main2 = document.getElementById("main2");
const loadMoreButton = document.getElementById("loadMore");
let n = 0;
let m = 0;
function createKey() {
  n  = 1;
  return `${n}月`;
}

function createVales() {
  m  = 1000;
  return m;
}

let keys = [
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
];
let values = [
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
];
var myChart = echarts.init(main, "light");
var myChart2 = echarts.init(main2, "dark");

// 指定图表的配置项和数据
var option2 = {
  title: {
    text: "年度总结",
  },
  tooltip: {},
  legend: {
    data: ["曾老湿bug数量zhu"],
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
  },
  yAxis: {},
  series: [
    {
      name: "曾老湿bug数量zhu",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
  title: {
    show: true,
    text: "曾老湿的年度总结",
    link: "http://www.driverzeng.com",
    textStyle: {
      color: "blue",
      fontStyle: "oblique",
      fontWeight: 10,
      fontFamily: "monospace",
    },
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["曾老湿bug数量line"],
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      lineStyle: {
        color: "green",
      },
      itemStyle: {
        borderWidth: 10,
      },
      name: "曾老湿bug数量line",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
});
myChart2.setOption(option2);

let isLoading = false;
loadMoreButton.addEventListener("click", () => {
  if (isLoading === true) {
    alert("大哥，你瞎点啥？点那么多下干啥子？");
  }
  myChart.showLoading();
  isLoading = true;
  setTimeout(() => {
    const key = createKey();
    const value = createVales();
    keys = [...keys, key];
    values = [...values, value];
    myChart.setOption({
      xAxis: {
        data: keys,
      },
      series: [
        {
          data: values,
        },
      ],
    });
    myChart.hideLoading();
    isLoading = false;
  }, 3000);
});



Echarts的点击事件

什么叫点击事件呢？就是图中的那个圆点，当点击圆点，我可以打开一个页面...

代码语言：javascript复制
myChart.on('click',(events)=>{
    console.log(events)
})

先测试一波，看看打印出来的日志是啥



索引从第0个开始

我们只打印索引

代码语言：javascript复制
myChart.on('click',(events)=>{
    console.log(events.dataIndex)
})



现在打印索引和对应的数据值

代码语言：javascript复制
myChart.on("click", (events) => {
  console.log(events.dataIndex);
  console.log(events.data)
})



那我们再把月份打印出来

代码语言：javascript复制
myChart.on("click", (events) => {
  console.log(events.dataIndex);
  console.log(events.data);
  console.log(events.name);
});



然后我们就可以根据这个打印的日期，传参打开一个网页

代码语言：javascript复制
import echarts from "echarts";

const main = document.getElementById("main");
const main2 = document.getElementById("main2");
const loadMoreButton = document.getElementById("loadMore");
let n = 0;
let m = 0;
function createKey() {
  n  = 1;
  return `${n}月`;
}

function createVales() {
  m  = 1000;
  return m;
}

let keys = [
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
];
let values = [
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
];
var myChart = echarts.init(main, "light");
var myChart2 = echarts.init(main2, "dark");

// 指定图表的配置项和数据
var option2 = {
  title: {
    text: "年度总结",
  },
  tooltip: {},
  legend: {
    data: ["曾老湿bug数量zhu"],
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
  },
  yAxis: {},
  series: [
    {
      name: "曾老湿bug数量zhu",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
  title: {
    show: true,
    text: "曾老湿的年度总结",
    link: "http://www.driverzeng.com",
    textStyle: {
      color: "blue",
      fontStyle: "oblique",
      fontWeight: 10,
      fontFamily: "monospace",
    },
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["曾老湿bug数量line"],
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      lineStyle: {
        color: "green",
      },
      itemStyle: {
        borderWidth: 10,
      },
      name: "曾老湿bug数量line",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
});
myChart2.setOption(option2);

let isLoading = false;
loadMoreButton.addEventListener("click", () => {
  if (isLoading === true) {
    alert("大哥，你瞎点啥？点那么多下干啥子？");
  }
  myChart.showLoading();
  isLoading = true;
  setTimeout(() => {
    const key = createKey();
    const value = createVales();
    keys = [...keys, key];
    values = [...values, value];
    myChart.setOption({
      xAxis: {
        data: keys,
      },
      series: [
        {
          data: values,
        },
      ],
    });
    myChart.hideLoading();
    isLoading = false;
  }, 3000);
});
myChart.on("click", (events) => {
  console.log(events.dataIndex);
  console.log(events.data);
  console.log(events.name);
  window.open(`http://www.driverzeng.com?${events.name}`);
});



Echarts移动端适配

常规技巧 1.抄淘宝的meta vp 2.用JS获取屏幕宽度设置在div上 3.设定宽高比

Echarts提供的功能 baseOption media

抄淘宝的meta vp

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>曾老湿 Echarts 介绍</title>
</head>

<body>
    <div id="main"></div>
    <button id="loadMore">加载新数据</button>
    <p>上面的加载按钮是线形图的哦~~~</p>
    <div id="main2"></div>
    <script src="./main.js"></script>
</body>

</html>

在JS中设置宽度，首先获取页面的宽度，背下来下面的代码

代码语言：javascript复制
const width = document.documentElement.clientWidth;
代码语言：javascript复制
import echarts from "echarts";

const main = document.getElementById("main");
const main2 = document.getElementById("main2");
const loadMoreButton = document.getElementById("loadMore");
const width = document.documentElement.clientWidth;

main.style.width = `${width}px`;
main.style.height = `${width * 1.2}px`;

let n = 0;
let m = 0;
function createKey() {
  n  = 1;
  return `${n}月`;
}

function createVales() {
  m  = 1000;
  return m;
}

let keys = [
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
];
let values = [
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
];
var myChart = echarts.init(main, "light");
var myChart2 = echarts.init(main2, "dark");

// 指定图表的配置项和数据
var option2 = {
  title: {
    text: "年度总结",
  },
  tooltip: {},
  legend: {
    data: ["曾老湿bug数量zhu"],
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
  },
  yAxis: {},
  series: [
    {
      name: "曾老湿bug数量zhu",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
  title: {
    show: true,
    text: "曾老湿的年度总结",
    link: "http://www.driverzeng.com",
    textStyle: {
      color: "blue",
      fontStyle: "oblique",
      fontWeight: 10,
      fontFamily: "monospace",
    },
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["曾老湿bug数量line"],
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      lineStyle: {
        color: "green",
      },
      itemStyle: {
        borderWidth: 10,
      },
      name: "曾老湿bug数量line",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
});
myChart2.setOption(option2);

let isLoading = false;
loadMoreButton.addEventListener("click", () => {
  if (isLoading === true) {
    alert("大哥，你瞎点啥？点那么多下干啥子？");
  }
  myChart.showLoading();
  isLoading = true;
  setTimeout(() => {
    const key = createKey();
    const value = createVales();
    keys = [...keys, key];
    values = [...values, value];
    myChart.setOption({
      xAxis: {
        data: keys,
      },
      series: [
        {
          data: values,
        },
      ],
    });
    myChart.hideLoading();
    isLoading = false;
  }, 3000);
});
myChart.on("click", (events) => {
  console.log(events.dataIndex);
  console.log(events.data);
  console.log(events.name);
  window.open(`http://www.driverzeng.com?${events.name}`);
});



但是手机上的圈好小，点起来很费劲，那么我们可以把它放大，但是...如果放大了PC又很丑。





所以Echarts提供了一个功能，又想做手机，又想做PC,添加一个baseOption

代码语言：javascript复制
import echarts from "echarts";

const main = document.getElementById("main");
const main2 = document.getElementById("main2");
const loadMoreButton = document.getElementById("loadMore");
const width = document.documentElement.clientWidth;

main.style.width = `${width}px`;
main.style.height = `${width * 1.2}px`;

let n = 0;
let m = 0;
function createKey() {
  n  = 1;
  return `${n}月`;
}

function createVales() {
  m  = 1000;
  return m;
}

let keys = [
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
  createKey(),
];
let values = [
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
  createVales(),
];
var myChart = echarts.init(main, "light");
var myChart2 = echarts.init(main2, "dark");

// 指定图表的配置项和数据
var option2 = {
  title: {
    text: "年度总结",
  },
  tooltip: {},
  legend: {
    data: ["曾老湿bug数量zhu"],
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
  },
  yAxis: {},
  series: [
    {
      name: "曾老湿bug数量zhu",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
  baseOption: {
    title: {
      show: true,
      text: "曾老湿的年度总结",
      link: "http://www.driverzeng.com",
      textStyle: {
        color: "blue",
        fontStyle: "oblique",
        fontWeight: 10,
        fontFamily: "monospace",
      },
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["曾老湿bug数量line"],
    },
    xAxis: {
      type: "category",
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        lineStyle: {
          color: "green",
        },
        itemStyle: {
          borderWidth: 10,
        },
        name: "曾老湿bug数量line",
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
      },
    ],
  },
  media: [
    {
      query: {
        maxWidth: 500,
      },
      option: {
        series: [
          {
            itemStyle: {
              borderWidth: 30,
            },
          },
        ],
      },
    },
  ],
});
myChart2.setOption(option2);

let isLoading = false;
loadMoreButton.addEventListener("click", () => {
  if (isLoading === true) {
    alert("大哥，你瞎点啥？点那么多下干啥子？");
  }
  myChart.showLoading();
  isLoading = true;
  setTimeout(() => {
    const key = createKey();
    const value = createVales();
    keys = [...keys, key];
    values = [...values, value];
    myChart.setOption({
      xAxis: {
        data: keys,
      },
      series: [
        {
          data: values,
        },
      ],
    });
    myChart.hideLoading();
    isLoading = false;
  }, 3000);
});
myChart.on("click", (events) => {
  console.log(events.dataIndex);
  console.log(events.data);
  console.log(events.name);
  window.open(`http://www.driverzeng.com?${events.name}`);
});

PC是10



手机是30



运维 自动化 编程算法 webpack cdn

0 人点赞