Echarts图表嵌入网页的代码组成


在网页中插入echarts图表需要由哪几部分代码组成?

下面是一个echarts简单折线图表的示例

示例图

示例

https://echarts.apache.org/examples/zh/editor.html?c=line-simple

将以上图表插入至网页中,html文件示例代码如下

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}
        </script>
    </body>
</html>

总结以上示例代码,可以发现,echarts插入到网页中,由以下四部分组成:

  • echarts图表库
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>

构建图表的基础,引用echarts图表库脚本文件;

可以是网页地址(如Line1),也可以是本地路径(如Line2,引用根目录下echarts. min.js文件)

如需使用本地路径,图表库脚本文件下载:https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js

  • 样式代码
<style>
    #echarts1 {
      width: 92%;
      height: 500px;
      margin: 0.5rem auto;
      padding: 0.5rem;
    }
</style>

用于定义echarts图标的尺寸大小;

或者css样式文件中定义图表尺寸位置,也可以在下列引用代码中直接定义图表尺寸位置。

  • 引用代码
<div id="echarts1" class="echarts1"></div>

定义将图表具体放置在网页的具体位置(代码在哪,图表就在哪);

class关联图表确定的尺寸(图表多大),id关联配置图表的脚本(图表画成什么样子);

另外,名称保持上下一致。

  • ehcarts配置脚本,自定义绘制图表区域
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var dom = document.getElementById("echarts1");
var myChart = echarts.init(dom);
var app = {};
// 指定图表的配置项和数据
var option;

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
// 使用刚指定的配置项和数据显示图表。
if (option && typeof option === 'object') {
myChart.setOption(option);
}

</script>

用于配置自定义图表,也就是你想将图表具体做成什么样子

此配置脚本为基础折线图配置代码,也就是在此代码中可以任意定制你的图表

具体如何配置,相关参数对照官方配置手册即可:https://echarts.apache.org/zh/option.html


评论
 上一篇
配置Echarts图表要点记录 配置Echarts图表要点记录
所有配置项说明可查阅官方文档:Documentation - Apache ECharts 样式参考配置:http://analysis.datains.cn/finance-admin/index.html#/chartLib/all 设
2022-03-05
下一篇 
文件批量重命名的万能方法 文件批量重命名的万能方法
Everything一直都是Windows端搜索神器的代名词,但是Everything的功能还有很多可以挖掘的地方,你可能想想不到它可以批量文件重命名,它可以实现你所有对批量文件重命名的想法。 使用方法如下 1、将所有需要重命名的文件夹全
2021-11-04