初识Echarts:
Echarts--商业级数据图表:商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
Echarts支持的图表？
折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）
雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表
优缺点:
echarts的优点：
1.国人开发，文档全，便于开发和阅读文档。
2.图表丰富，可以适用各种各样的功能。
echarts的缺点：
移动端使用略卡
快速上手:(基于 webpack和 vue 和 angular 项目 中使用 ECharts)
确保安装 Node , npm
1.npm install echarts --save
2.如何应用在项目中?
(1).可以直接在项目代码中 require('echarts') 得到 ECharts。
(2).通过 import echarts from 'echarts' 引入 可以全局注册,也可以按需引入,以个人实际应用为主
全局注册:
(1)vue项目
在main.js中导入echarts, 在Vue实例直接注册应用
(Vue.prototype.echarts = echarts. ) 在具体的vue文件中,初始化图表容器的时候直接使用.
(2)angular项目
在所需ts文件中直接引入
import * as echarts from 'echarts';
局部注册(vue项目和angular项目道理一样)
在你当前要使用图标的文件中直接引用
import echarts from 'echarts/lib/echarts' //引入Echarts主模块
import bar from 'echarts/lib/chart/bar' // 引入柱状图
初始化图表
在绘画图表之前,我们需要一个带有宽高的容器来放置我们的内容,以下是三个简单的容器(分别对应柱状图,线性图,雷达图)
<div id="temBar" class="barStyle"></div>
<div id="temLine" class="lineStyle"></div>
<div id="temRadar" class="radarStyle"></div>
如果直接要在生命周期中初始化,在vue项目和angular项目中获取容器不同的地方是vue在mounted钩子中,angular是在ngAfterViewInit钩子中,共同的特点都是在视图初始化之后调用,通俗一点,就是我们获取的容器dom加载完成之后去实例化我们的echrtas图表.
下来我们看一下在vue和angular中实例化的过程和效果
vue代码:()
mounted () {
this.drawLine()
},
methods: {
drawLine () {
let myChart = this.echarts.init(document.getElementById('myChart'))
myChart.setOption({
title: {
text: 'Average BMI by District Last Year'
},
tooltip: {},
xAxis: {
data: [
'Lamwo',
'Kitgum',
'Amuru',
'Nwoya',
'Gulu',
'Pader',
'Agago',
'Oyam',
'Kile',
'Lira',
'Aletyong',
'Otuke',
'Alebtong',
'Apac',
'Dokolo',
'Amolatar'
]
},
yAxis: {},
series: [
{
name: 'Average BMI',
type: 'bar',
data: this.data
}
]
})
},
},
angular初始化(主要以angular为主,对应上边三个对应容器):
ngOnInit() {
this.temBarData();
this.temLineData();
this.temRadarData();
}
柱状图:
temBarData() {
const barChart = echarts.init(document.getElementById('temBar'));
barChart.setOption({
title : {
text: 'total',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
show: false,
data: ['total']
},
toolbox: {
show: true,
feature: {}
},
calculable: true,
xAxis : [
{
type : 'category',
data : ['BarA', 'BarB', 'BarC', 'BarD', 'BarE', 'BarF', 'BarG', 'BarH', 'BarI', 'BarJ', 'BarK', 'BarL']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name: 'total',
type: 'bar',
data: [15.0, 16.0, 32.0, 20.0, 6.0, 13.0, 2.0, 6.0, 7.0, 12.0, 22.0, 13.0 ],
itemStyle: {
//此处是echarts4动态循环颜色数组的方法,echarts3的写法是讲color方法写在normal:{}对象中,多了一层属性嵌套
color: function(params) {
const colorList = ['#0278FF', '#3EB177', '#FFBB32', '#6058DF', '#FF3976', '#749f83', '#ca8622'];
if (params.dataIndex >= colorList.length) {
params.dataIndex = params.dataIndex - colorList.length;
}
return colorList[params.dataIndex];
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
});
}
对应效果:
折线图:
temLineData() {
const lineChart = echarts.init(document.getElementById('temLine'));
lineChart.setOption({
title: {
text: 'total(month)',
},
tooltip: {
trigger: 'axis'
},
legend: {
show: false,
orient: 'horizontal',
data: ['LineA', 'LineB', 'LineC', 'LineD', 'LineE']
},
grid: {
left: '3%',
right: '1%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'LineA',
type: 'line',
stack: '总量',
data: [230, 210, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90]
},
{
name: 'LineB',
type: 'line',
stack: '总量',
data: [330, 310, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290]
},
{
name: 'LineC',
type: 'line',
stack: '总量',
data: [410, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 330]
},
{
name: 'LineD',
type: 'line',
stack: '总量',
data: [320, 101, 134, 90, 230, 210, 320, 332, 301, 334, 390, 330]
},
{
name: 'LineE',
type: 'line',
stack: '总量',
data: [1320, 101, 134, 90, 230, 210, 820, 932, 901, 934, 1290, 1330]
}
]
});
}
效果:
雷达图:
temRadarData() {
const radarChart = echarts.init(document.getElementById('temRadar'));
radarChart.setOption({
title: {
text: 'total'
},
tooltip: {},
legend: {
data: ['违规总次数（Actual Spending)']
},
radar: {
name: {
textStyle: {
color: 'red',
backgroundColor: '#ccc',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: 'RadarA', max: 500, color: 'red'},
{ name: 'RadarB', max: 500, color: 'yellow'},
{ name: 'RadarC', max: 500, color: 'green'},
{ name: 'RadarD', max: 500, color: 'blue'},
{ name: 'RadarE', max: 500, color: 'purple'},
]
},
series: [{
name: '（Budget vs spending）',
type: 'radar',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
},
borderColor: 'red',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
},
data : [
{
value : [310, 420, 210, 200, 320, 280],
name : 'Actual Spending）'
}
]
}],
});
}
效果:
以上为echrts在项目中简单引入并且初始化图表实例的过程,具体的效果和用法大家可以自己尝试一下.
常用Echrts属性小结:
title:标题
1.id
2.show:true(boolean默认) ---标题是否展示
3.text(string)---主标题的文本内容
4.link(string) ---主标题超链接
5.target(string)---指定窗口打开主题超链接(self:当前窗口打开,blank:新窗口打开)
6.textStyle(object)---主标题样式(字体,颜色相关)
7.subtext(string)---副标题文本
8.sublink(string)---副标题超链接
9.subtarget(string)---副标题指定窗口打开主题
10.subtextStyle(object)---副标题样式
11.subtext(string)---副标题文本
12.textAlign(string)---整体标题水平对齐方式(包括主标题,副标题)
13.textVerticalAlign(string)---整体标题垂直对齐方式
14.triggerEvent(boolean)---是否触发事件
15.padding(number)---标题内边距
16.itemGap(number)---主副标题间距
17.background(string)---背景颜色
18.left,right,top,bottom(string,number)
legend:图例组件
1.type(string)---'plain':普通图例;'scroll':可滚动翻页的图例
2.id(string)--- 默认不指定
3.show(boolean)---是否展示图例(默认为:true)
4.left,top.bottom.right(string,number)---图例组件在容器中的位置设置
5.width,height(string,number)---图例的宽高度设置
6.orient(string)---图例图标的布局朝向('horizontal';'vertical')
7.itemGap(number)---图例之间的间距
8.itemWidth,itemHeight(number)---图例标记的图形宽高
9.inactiveColor(string) --- 图例关闭时候的颜色
10.textStyle(object)----图例的公用文本样式
11.symbolKeepAspect(boolean)---如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。
12.selected(object)---图例选中状态表。(selected:{'系列1':true,'系列2':false})
13.backgroundColor(string)---背景色
grid:网格设置
1.id(string)
2.show(boolean)---是否展示
3.left,top,bottom,right(steing,number)---容器内设置位置
4.width,height(string,number)---grid组件的宽高
5.containLabel(boolean)---grid 区域是否包含坐标轴的刻度标签。
6.backgroundColor(string)---背景颜色
7.borderWidth(number)---网格的边框线宽度
8.borderColor(color)---网格的边框颜色
xAxis:x轴设置
1.id(string)
2.show(boolean)---是否展示x轴
3.gridIndex(number)---x 轴所在的 grid 的索引，默认位于第一个 grid。
4.position(string) ---x 轴的位置。('top','bottom')默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧。
5.offset(number)---X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。
6.type(string)---坐标轴类型
'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。
7.name(string) --- 坐标轴名称
8.nameLocation(string) --- 坐标轴显示位置('start','middle'或者'center','end')
9.nameTextStyle(object)---坐标轴名称的文字样式
10.nameGap(number)---坐标轴名称与轴线之间的距离。默认 是15
11.nameRotate(number)---坐标轴名字旋转角度值
12.inverse(boolean)---是否反向坐标轴
13.boundaryGap(boolean)---设置坐标轴两侧留白
14.min(number, string, function)---坐标轴刻度最小值。
可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
在类目轴中，也可以设置为类目的序数（如类目轴 data: ['类A', '类B', '类C'] 中，序数 2 表示 '类C'。也可以设置为负数，如 -3）。
当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：
min: function(value) {
return value.min - 20;
}
15.max(number, string, function)---坐标轴刻度最大值。
16.scale(boolean)---是否是脱离0值比例
只在数值轴中（type: 'value'）有效。
是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
在设置 min 和 max 之后该配置项无效。
17.minInterval,maxInterval(number)---自动计算的坐标轴最小,最大间隔。
自动计算的坐标轴最小间隔大小。
例如可以设置成1保证坐标轴分割刻度显示成整数。
{
minInterval: 1
}
只在数值轴或时间轴中（type: 'value' 或 'time'）有效。
例如，在时间轴（（type: 'time'））可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天。
{
maxInterval: 3600 * 24 * 1000
}
只在数值轴或时间轴中（type: 'value' 或 'time'）有效。
18.axisLine(object)---坐标轴线设置
19.axisLabel(object)---坐标轴刻度标签的相关设置。
