Echarts学习笔记1——echarts柱状图分析
Posted 苏云南雁
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Echarts学习笔记1——echarts柱状图分析相关的知识,希望对你有一定的参考价值。
做数据可视化时,Echarts是很好用的。这里来一个学习笔记系列。
一、引用echarts
Echarts可以用npm进行安装,也可以直接导入到web项目进行引用,博主采用了引用方式直接分析它的使用。
下载Echarts:http://echarts.baidu.com/download.html
导入相关js:
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.3.1.js"></script>
body里的内容如下:
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 绘制图表。
echarts.init(document.getElementById('main')).setOption(
legend: ,
tooltip: ,
dataset:
// 提供一份数据。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
,
// 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
xAxis: type: 'category',
// 声明一个 Y 轴,数值轴。
yAxis: ,
// 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
series: [
type: 'bar',
type: 'bar',
type: 'bar'
]
);
</script>
结果图:
二、echarts柱状图分析
1,init渲染
首先echarts通过js找到id为main的div,通过init(document.getElementById('main'))对该框进行渲染。到这一步是没有任何显示的。
真正起作用的事setOption方法。
让我们来看下init 的api:
(dom: htmlDivElement|HTMLCanvasElement, theme?: Object|string, opts?:
devicePixelRatio?: number
renderer?: string
width?: number|string
height? number|string
) => ECharts
dom就是指一个dom对象,像document.getElementById('main'));
theme的话可以设置主题,比如增加一个theme属性:echarts.init(document.getElementById('main'),'dark'),界面变为:
对于theme而言,dark和light一般是有的,其他的主题就得找一找咯
opts和theme一样是可选的,用来显示指定实例相关属性。
2,setOption
setOption是这段代码的核心,设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过setOption
完成。ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
调用setOption方法:
chart.setOption(option,
notMerge: ...,
lazyUpdate: ...,
silent: ...
);
option:图表的配置项和数据;notMerge:可选,是否不跟之前设置的option
进行合并,默认为false
,即合并。;lazyUpdate:可选,在设置完option
后是否不立即更新图表,默认为false
,即立即更新。silent:可选,阻止调用 setOption
时抛出事件,默认为false
,即抛出事件。
像代码中的xAxis: type: 'category', 这些部分,都属于opts的部分,还有dataset也属于option的内容。
配置项API:http://echarts.baidu.com/option.html#xAxis
(1)title
以title为例,如果在option选项中加入 :
title:text:[
'bars1','bars2','bars3'
],
则会在页面上显示标题:
(2)xAxis
这个属性是用来设置x轴的
重点看一下type这个属性:
-
'value'
数值轴,适用于连续数据。 -
'category'
类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。正常显示: -
'time'
时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。 -
'log'
对数轴。适用于对数数据。
默认是value
在选择展示数据的方式时,需要选择一下。
(3)series
系列列表。每个系列通过 type
决定自己的图表类型
type: 'bar' 决定了展示方式未bar
serial有三个type为bar的图形,表示dataset中的3列数据;xAxis: type: 'category'表示有x轴为一个类别,因此类别是需要赋值的,因此拿走了dateset中的第一列数据。所有dataset的展示方式为第一列表示类别,2-4列分别表示每一个类别的条形图高度。
以上是关于Echarts学习笔记1——echarts柱状图分析的主要内容,如果未能解决你的问题,请参考以下文章
Qt+ECharts开发笔记:ECharts介绍下载和Qt调用ECharts基础柱状图Demo
Qt+ECharts开发笔记:ECharts的柱状图介绍基础使用和Qt封装Demo