echarts数据化图表新手入门_echarts可以做表格吗-CSDN博客

本文链接：https://blog.csdn.net/wsxokn945/article/details/127563426

echarts数据化图表新手入门与案例

1. ECharts介绍

ECharts是一个使用 JavaScript 实现的开源可视化库，ECharts可谓是制作图表的良心之选，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，所以，基本完全不用担心兼容性的问题，底层依赖轻量级的矢量图形库 ZRender、提供直观、交互丰富、可高度个性化定制的数据可视化图表。

作用：展示图表的（大数据可视化）
百度，捐给apache 免费开源
竟品：
- heightCharts
- D3

2.使用

第一步：下载并且导入echarts.js文件
第二步：准备一个放置图表的容器
第三步：初始化echarts实例对象
第四步：定义配置项和数据
第五步：将配置项设置给实例对象

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个图表</title>
    <!-- 01.导入js -->
    <script src="js/echarts.min.js"></script>
    <!-- 03. 设置容器的样式 -->
    <style>
        #container {
     
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <!-- 02. 创建一个容器 -->
    <div id="container"></div>
</body>
<script>
    // 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: [5, 6, 9, 8, 4, 5, 10]
            }
        ]
    }
    // 4.3 更新配置
    echart.setOption(option)
</script>

</html>

3.ECharts基础配置

在这里插入图片描述

title 标题
legend 图例
tooltip提示
xAxis x轴线
yAxis y轴线
series系列
data数据

图表常见类型

bar 柱状图
line
- line折线图
- smooth:true 曲线图
- areaStyle:{fill:“#f70”}面积图
pie
- pie 饼形图
- radius:[80,50] 环形图

颜色

主题
- light
- dark
- 自定义
  https://echarts.apache.org/zh/theme-builder.html
color 调色盘
- option.color
  - color:[“#55aaff”,“#aaff7f”,“#55007f”,“#ffff00”],
- series.item.color
itemStyle 项的颜色
- itemStyle:{color:“#f30”}
- itemStyle:{
  normal:{color:“#93da6c”}, //正常颜色
  emphasis:{color:“#bcff57”},//强调颜色
  }

特殊样式（不要记忆，官网查找）

itemStyle:{
color:linear, //渐变颜色
borderRadius:[30,30,0,0] //圆角半径
}
定义渐变
var linear = {
type: ‘linear’,
x: 0,
y: 0,
x2: 0,
y2:1,
colorStops: [{
offset: 0, color: ‘#02bcff’ // 0% 处的颜色
}, {
offset: 1, color: ‘#5555ff’ // 100% 处的颜色
}],
global: false // 缺省为 false
}

echarts官网使用

1. https://echarts.apache.org/zh/index.html
1. 入门示例（helloword）
  https://echarts.apache.org/handbook/zh/get-started/
1. 类的方法
1. 实例的方法
1. 动作与事件
选项配置
option如何修改

简单案例

demo1

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 01.导入js -->
    <script src="js/echarts.min.js"></script>
    <!-- 03. 设置容器的样式 -->
    <style>
        #container {
     
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <!-- 02. 创建一个容器 -->
    <div id="container"></div>
</body>
<script>
    // 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: [5, 6, 9, 8, 4, 5, 10]
            }
        ]
    }
    // 4.3 更新配置
    echart.setOption(option)
</script>

</html>

demo2

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 01.导入js -->
    <script src="js/echarts.min.js"></script>
    <!-- 03. 设置容器的样式 -->
    <style>
        #container {
     
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <!-- 02. 创建一个容器 -->
    <div id="container"></div>
</body>
<script>
    // 04. 实例化echarts
    // 4.1 创建一个实例
    var echart = echarts.init(document.getElementById("container"))
    // 主题，light，data 自定义
    // var echart = echarts.init(document.getElementById("container"),'purple-passion')
    // 4.2 定义配置项
    var option = {
     
        // 图标的标题
        title: {
     
            text: "我的第一个图标"
        },
        // 图标提示
        tooltip: {
     },
        // 图例
        legend: {
     
            data: ["睡眠时长", "玩游戏时长", "上课时长", "成绩"]
        },
        // x轴线
        xAxis: {
     
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        // y轴线
        yAxis: {
     },
        series: [
            {
     
                // 数据名称
                name: "睡眠时长",
                // 类型为柱状图
                type: "bar",
                // 数据data
                data: [5, 6, 9, 8, 4, 5, 10]
            },
            {
     
                // 数据名称
                name: "玩游戏时长",
                // 类型为折线图
                type: "line",
                // 数据data
                data: [2, 4, 2, 1, 6, 5, 8]
            },
            {
     
                // 数据名称
                name: "上课时长",