您现在的位置是：首页 > 其他

当前栏目

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

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

2023-06-13 09:11:07 时间

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

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长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

npm install echarts --save

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

选择min.js

echarts安装部署

创建项目

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

<!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>

测试是否引入成功

<!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文件

<!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>

//使用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

import echarts from 'echarts'
console.log(echarts)

成功

使用Echarts

入门第一个实例

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

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

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

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

<!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文件中

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中

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

也可以画俩图

改一改数据

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')

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

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

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

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

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

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的样式

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监控，那么数据是会更新的，我们不可能把数据写死，然后一直展示那点数据，所以我们可以模拟一下，更新数据。

首先添加一个按钮

<!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，开始加载数据

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

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

阻止用户一顿狂点...

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的点击事件

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

myChart.on('click',(events)=>{
    console.log(events)
})

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

索引从第0个开始

我们只打印索引

myChart.on('click',(events)=>{
    console.log(events.dataIndex)
})

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

myChart.on("click", (events) => {
  console.log(events.dataIndex);
  console.log(events.data)
})

那我们再把月份打印出来

myChart.on("click", (events) => {
  console.log(events.dataIndex);
  console.log(events.data);
  console.log(events.name);
});

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

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

<!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中设置宽度，首先获取页面的宽度，背下来下面的代码

const width = document.documentElement.clientWidth;

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

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

猜你喜欢

android之HttpPost&HttpGet使用方法介绍
JS对象转换为Jquery对象示例
性能优化基于Oracle的几百万数据性能优化策略（oracle几百万数据）
MySQL：了解当前引擎的能力（mysql当前引擎）
如何管理Oracle数据库中的多个SID？（oracle多个sid）
另一张表Oracle如何将一张表合并到另一张表中（oracle一张表合并）
享受免费Linux云主机的乐趣（免费linux云主机）
Oracle：探索历史命令的神秘魅力（oracle历史命令）
清理实时清除Java工程中过期Redis缓存.（redisjava过期）
玩转Linux：创建文件夹技巧（linux创建文件夹）
javascript使用定时函数实现跳转到某个页面
MySQL如何设置和管理主键？（mysql主键）
【趣味实践】Stable Diffusion绘制中秋美景
【说站】即时通讯小程序源码
开放与包容：中国开源崛起与发展的关键 | Q推荐

zl程序教程