ECharts helloworld

简介: ECharts helloworld


首先,需要新建一个HTML格式的文件。打开VS Code,依次点击左上角的File→New File,新建一个文件,如图

实战

我们将以下代码输入新建的文件中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts文件-->
    <script src="echarts.js">
</script>
</head>
</html>

按CTRL+S快捷键,会弹出“保存”按钮,将文件保存到指定的位置,并将文件命名为“Hello ECharts”,文件格式选择“HTML”。

这里相当于将原本没有格式的文件保存为.html格式的文件,保存后,文件内容得到HTML格式的语法高亮,如图

之后补全其他内容,最终输入内容如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!--引入echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>
    <!--为ECharts准备一个具备大小(宽高)的DOM -->
    <div id="main" style="width: 600px; height: 400px;"></div>
    <script type="text/javascript">
        //基于准备好的DOM,初始化ECharts实例
        var myChart = echarts.init(document.getElementById('main'));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '我的第一幅ECharts可视化图'
            },
            tooltip: {},
            legend: {
                data:['各产品销量情况']
            },
            xAxis: {
                data: ["产品A", "产品B", "产品C", "产品D", "产品E"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [900, 700, 550, 1000, 200]
            }]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

存HTML文件,并将之前由ECharts安装包解压得到的echarts.js文件放在该HTML文件所在的目录下

使用浏览器(这里使用的是谷歌浏览器)打开该HTML文件,显示结果

原理

首先,整个文档是HTML格式文件,所以使用的是HTML的语法。<!DOCTYPE>声明必须位于HTML5文档中的第一行,也就是位于标签之前,该标签告知浏览器文档所使用的HTML规范。如果你没学过HTML文件语法格式也没关系,HTML文件中有很多标签,且标签都是成对出现,例如在下一行出现的标签,代码的末尾也有一个标签,也就是说和是一对标签,代表HTML文档的开始与结束。

接下来,出现了如下代码块。

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>

我们发现该部分代码块是包含在和标签对中的。标签用于定义文档的头部,它是所有头部元素的容器。文档的头部信息均可以放在该标签对中。例如接下来的规定了HTML文档的字符编码,

之后的代码块包含在标签中,标签包含了一个HTML文件的主体部分。

<body>
    <!--为ECharts准备一个具备大小(宽高)的DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        //基于准备好的DOM,初始化ECharts实例
        var myChart = echarts.init(document.getElementById('main'));  //指定图表的配置项和数据
        var option = {
            title: {
                text: '我的第一幅ECharts可视化图'
            },
            tooltip: {},
            legend: {
                data:['各产品销量情况']
            },
            xAxis: {
                data: ["产品A","产品B","产品C","产品D","产品E"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [900, 700, 550, 1000, 200, 850]
            }]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

标签定义HTML文档中的分隔(division)或部分(section)。这里是作为一个容器来盛放ECharts的内容,这个容器的宽度为600px,高度为400px。

目录
相关文章
|
7月前
223Echarts - 3D 地球(ECharts-GL Hello World)
223Echarts - 3D 地球(ECharts-GL Hello World)
40 0
|
10天前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
75 0
|
10天前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
74 2
|
10天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
36 0
|
10天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
32 0
|
10天前
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
21 0
|
10天前
|
API
vue2、vue3分别配置echarts多图表的同步缩放(一)
vue2、vue3分别配置echarts多图表的同步缩放
19 0
|
10天前
|
容器
echarts图表怎样实现刷新功能?
echarts图表怎样实现刷新功能?
|
10天前
echarts图表
echarts图表
|
10天前
|
JavaScript
如何在vue添加echarts图表
如何在vue添加echarts图表
21 0