一、基础折线图详解《手把手教你 ECharts 数据可视化详解》 |
您所在的位置:网站首页 › 云类型折线图 › 一、基础折线图详解《手把手教你 ECharts 数据可视化详解》 |
注:本系列教程需要对应 JavaScript 、html、css 基础,否则将会导致阅读时困难,本教程将会从 ECharts 的官方示例出发,详解每一个示例实现,从中学习 ECharts 。 ECharts 官方示例:https://echarts.apache.org/examples/zh/index.html 一、折线图我们打开 ECharts 的示例界面,找到折线图中的基础折线图: ![]() 打开折线图后,左侧则是对应的代码,右侧则是对应的折线图演示: ![]() 本系列文字将会以 JavaScript 代码为讲解代码。 二、 基础折线图我们先从基础折线图开始了解,再逐步深入学习多种不同的数据可视化的方式。我们此时找到完整代码: ![]() 此时忽略 import 代码,直接查看初始化代码: 代码语言:javascript复制var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option;以上代码中 var chartDom = document.getElementById('main'); 为通过 js 的 document 获取 id 为 main 的元素作为图标显示的区域(节点),此时我们还无法查看 html,这个不用在意,等下我们逐步开始讲解。 找到对应的节点元素后,我们通过 echarts.init() 初始化这个节点,这一步是必要的,初始化完毕后就得到一个 echarts 数据可视化的对象,这个对象,最后创建一个配置项 var option; 。 以上所述的这一部分是一个 echarts 可视化的基础 JavaScript 代码,这一部分代码是通用的。在使用 echarts 进行可视化数据开发时,重要的是其 option 的编写,通过给与 option 不同的配置,可以使我们的可视化数据展现得更加丰富。 那么接下来我们开始 option 的配置解析。 三、ECharts 可视化数据的配置项在官方示例中,option 的代码如下: 代码语言:javascript复制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' } ] };我们直接查看 option 中的内容;其中 xAxis 是表示直角坐标系上的 x 轴,在此处是放置在 option 中,那么则表示 xAxis 在此处配置 x 轴的配置项。其实 ECharts 已经提供了配置项文档给我们查阅,地址是 https://echarts.apache.org/zh/option.html,有兴趣不怕麻烦的可以去自行学习。 type此时我们已经知道了对应的配置项文档,我们可以直接通过配置项文档查看在官方示例中 xAxis 下的 type 是指什么类型。我们打开文档后,找到 xAxis 列: ![]() 在其中我们查看到了 type 配置项: ![]() 再次我们可以看到 type 指的就是坐标轴类型。在示例代码中,我们使用的配置是 type: 'category', 此时就表示当前的坐标轴类型是 类目轴。 data接着我们继续查找 data 配置项,在 data 配置项中后面的值是 data 所拥有的值,在手册中我们可以看到相关的解释: ![]() 在文档中有指出: 类目数据,在类目轴(type: 'category')中有效。 如果没有设置 type,但是设置了 axis.data,则认为 type 是 'category'。 如果设置了 type 是 'category',但没有设置 axis.data,则 axis.data 的内容会自动从 series.data 中获取,这会比较方便。 简单点来说,文档中所述指你没设置类目轴(type: 'category')那么只要设置了 axis.data 则默认当前设置是类目轴,若设置类目轴,但没设置数据(axis.data)那么数据就是 series.data 所设置的数据(series.data 接下来会讲)。 yAxisyAxis 表示当前折线图在 y 轴上的设置,可以在配置文档中找到对应的说明: ![]() 一般来说 y 轴在垂直方向上最多只能放两个,也就是左右两边,并不允许同个位置的多个 y 轴产生重叠。 在配置 y 轴时,type 表示配置坐标轴的类型: ![]() 期值若等于 value 则表示事数值值,也就是当前图标所显示的数值进行自动适配后产生 y 轴的标注,最终效果可以查看本片最下部分的示例截图。 series 系列在 ECharts 中,series 表示由数据形成的图标,也就是最终我们所呈现的可视化数据。 在官方示例中,series 中 data 给予了如下数值: 代码语言:javascript复制data: [150, 230, 224, 218, 135, 147, 260]这些数值就是即将要生成的可视化数据,而 type: 'line' 则表示这个数据所呈现的可视化图标是折线图。 四、应用基本上我们已经了解了 ECharts 官方示例中的 JavaScript 代码,那么此时我们可以打开 ECharts 的官方入门手册:https://echarts.apache.org/handbook/zh/get-started/,在其中我们可以看到快速入门下有一个示例: ![]() 完整代码为: 代码语言:javascript复制 ECharts // 基于准备好的dom,初始化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);把代码复制到自己新建的 html 文件之中,我们可以将本地引入的 echarts.js 文件 改成 cdn 引入(当然你下载了直接引入都可以): ![]() 最后我们可以看到示例之中 body 下有一个 div 作为了显示图标的容器: ![]() 这个容器的 id 为 main,那么在通过 js 初始化的时候,就需要获取当前元素进行初始化,则示例代码写成了:var myChart = echarts.init(document.getElementById('main')); ![]() 接着我们可以把配置项换成我们理解的基础折线图的配置项: 代码语言:javascript复制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' } ] };最后查看一句 JavaScript 代码: 代码语言:javascript复制myChart.setOption(option);![]() 这段代码则是表示 ECharts 对象使用 option 配置项生成数据。 打开网页,显示如下: ![]() |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |