【Echart和vue入门从0到0.5】从什么都不会到快速地学会用Echarts画一些图

最新推荐文章于 2022-03-08 16:24:14 发布

甜甜圈Sweet Donut

最新推荐文章于 2022-03-08 16:24:14 发布

阅读量253

点赞数

分类专栏：前端文章标签： Echarts vue

本文链接：https://blog.csdn.net/qinglingLS/article/details/95483923

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

参考网址：
一些关于html标签的说明：http://www.w3school.com.cn/tags/tag_script.asp

Echarts很方便，学习它需要一些前置知识，html和css布局，js等等，
但是好在上述这些会用不难，学精比较难，
不管上面那些学没学过，用Echarts涉及的知识都不多、前端其实和搬砖差不多，我觉得可以归类为历史政治那样的背诵型文科。
下面开始，结果：
在这里插入图片描述

全部代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.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'));

        // 指定图表的配置项和数据
       function fetchData(cb) {
    // 通过 setTimeout 模拟异步加载
    setTimeout(function () {
        cb({
            categories: ["衬衫1","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
            data1: [5, 20, 46, 10, 3, 10],
            data3: [5, 20, 36, 10, 5, 20],
            data2: [15, 20, 26,20, 10, 10]
        })
    }, 1000);
}

// 初始 option
option = {
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量','数据','其他']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    },{
        name: '数据',
        type: 'bar',
        data: []
    },{
        name: '其他',
        type: 'bar',
        data: []
    }
    ]
};

fetchData(function (data) {
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data1
        },{
            // 根据名字对应到相应的系列
            name: '数据',
            data: data.data2
        },{
            // 根据名字对应到相应的系列
            name: '其他',
            data: data.data3
        }]
    });
});

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

过程：

<html>标识了当前的文档是一个html格式的网页。
网页的固定格式需要一个head头，其中引入一些必要的标签：

下面这些标签可用在 head 部分：
<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

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

base是基元，可以定义基础路径什么的，比如：设置路径：<base href="http://www.w3school.com.cn/i/" />
这样的话查找图片的时候，比如图片路径设置为：<img src="eg_smile.gif" /><br />
就可以直接找：http://www.w3school.com.cn/i/eg_smile.gif省去了重复写基网址：http://www.w3school.com.cn/i/的麻烦~
代码来自：W3school： http://www.w3school.com.cn/tags/tag_base.asp

<html>
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>

<body>
<img src="eg_smile.gif" /><br />
<p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>

<br /><br />
<p><a href="http://www.w3school.com.cn">W3School</a></p>
<p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>

</body>
</html>

<link>就是连接：<link rel="stylesheet" type="text/css" href="theme.css" />可以连接到一个样式表上面
href后写了引用路径，type后写了引用的MIME（多媒体数据读取）类型，rel规定当前文档与被链接文档之间的关系。
<script>在 HTML 页面中插入一段 JavaScript，用来更新或者更改数据。

写完上面那些东西，我们就嵌入了一个带head标签的html格式的网页（网页都是这个格式）
这里的<script src="echarts.min.js"></script>限定了要使用echarts.min.js的引入，需要先去官网下载一下echarts.min.js，然后和你的html放在一个目录下（其实不在一个目录下也行，那你就得修改<script src="/你的路径/echarts.min.js"></script>路径才行咯）：
如图：
在这里插入图片描述

环境配置：

下载地址：https://echarts.baidu.com/index.html
在这里插入图片描述

选择你需要的图表类型：

这样得到了你的专属定制echarts.min.js文件，接下来我们分析body部分的代码：
<div>部分对网页进行了分块，然后在 <script type="text/javascript">部分来写一些会发生变动的代码，在 HTML 页面中插入一段 JavaScript，用来更新或者更改数据。注意，这些标签，都需要在框外加上结束标签如：</script>,</div>，虽然它不报错，但是行为会有异常。
<script type="text/javascript"> 你的内容 </script>“你的内容“里可以加很多函数或者js脚本，初始化js变量，调用自定义函数等等。
var 就是js里定义变量的标志、

基本的内容都有了，其他的就是调用api了，详细见代码注释：

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例，echarts的api说明网址：https://echarts.baidu.com/api.html#echarts
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
       function fetchData(cb) {
    // 通过 setTimeout 模拟异步加载，这里延迟1000ms显示数据图像，先加载空的坐标框架，
    setTimeout(function () {
        cb({
        //categories 定义了种类标签，也就是图像下面那一行
            categories: ["衬衫1","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
        //定义三列数据
            data1: [5, 20, 46, 10, 3, 10],
            data3: [5, 20, 36, 10, 5, 20],
            data2: [15, 20, 26,20, 10, 10]
        })
    }, 1000);//你可以把1000调大一点，看到异步效果很明显
}

// 初始 option,对echarts的模板进行一下处理
option = {
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量','数据','其他']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    },{
        name: '数据',
        type: 'bar',
        data: []
    },{
        name: '其他',
        type: 'bar',
        data: []
    }
    ]
};

//获取数据，调用前面定义的fetchdata函数，获取数据，把返回的数据保存到data，通过data加上名称来引用对应的数据。
fetchData(function (data) {
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data1
        },{
            // 根据名字对应到相应的系列
            name: '数据',
            data: data.data2
        },{
            // 根据名字对应到相应的系列
            name: '其他',
            data: data.data3
        }]
    });
});

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

这样就完成了，vue的学习方法和写法类似，也是在<script>里引用一个js
在这里插入图片描述
这里vue.js是编码版本的，
vue.min.js是生产环境使用的，它对用户更友好，报错更少。
学习网站：
https://vue.docschina.org/v2/guide/components.html#dynamic-component-demo

甜甜圈Sweet Donut

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Echart和vue入门从0到0.5】从什么都不会到快速地学会用Echarts画一些图

参考网址：一些关于html标签的说明：http://www.w3school.com.cn/tags/tag_script.aspEcharts很方便，学习它需要一些前置知识，html和css布局，js等等，但是好在上述这些会用不难，学精比较难，不管上面那些学没学过，用Echarts涉及的知识都不多、前端其实和搬砖差不多，我觉得可以归类为历史政治那样的背诵型文科。下面开始，结果：全部...
复制链接

扫一扫

专栏目录