头部背景图片
小畅童鞋的学习笔记 |
小畅童鞋的学习笔记 |

Echarts的学习与使用

今天我们来学习一下Echarts,ECharts是一个纯JavaScript图表库,底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视化前端框架,本文基于Vue CLI脚手架,来实现Echarts的引用,跟着我一起来学习吧~

一.引入一个简单的图表

首先npm安装Echarts
1
npm install echarts --save
接下来打开public->src->main.js来引入echarts
1
2
import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)
绘制一个简单的容器
1
2
3
4
5
<template>
<h-page-content>
<div id="myChart" :style="{width: '600px', height: '400px'}"></div>
</h-page-content>
</template>
创建一个简单的图表

你可以在这里查找样例echarts图表,注意:我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<script>
export default {
name: 'EchartsIndex',
mounted () {
this.drawLine()
},
methods: {
drawLine () {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series: [{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}]
})
}
}
}
</script>

这样你的第一个图表就诞生了!

初始化图表.png

接下来就可以根据自己的需求来自定义图表了

自定义图表.png

二.图表参数配置

学习更多可以查看Echarts配置项手册

1.title

标题组件,包含主标题和副标题。
在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件,这在需要标题进行排版,或者单个实例中的多个图表都需要标题时会比较有用。

1
2
3
4
title: {
text: '金融资产详情', //主标题
subtext: '金融资产次级标题' //副标题
}

2.tooltip

提示框组件。提示框组件的通用介绍:提示框组件可以设置在多种地方:

  • 可以设置在全局,即 tooltip
  • 可以设置在坐标系中,即 grid.tooltip、polar.tooltip、single.tooltip
  • 可以设置在系列中,即 series.tooltip
  • 可以设置在系列的每个数据项中,即 series.data.tooltip
    1
    2
    3
    4
    5
    6
    7
    8
    9
    tooltip: {
    trigger: 'item', //数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用
    backgroundColor: 'rgb(245,245,245,0.9)', //设置提示框背景颜色
    padding: [15, 20], //设置提示框内边距
    textStyle: {
    color: '#4F4F4F' //设置提示框内字体颜色
    },
    extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);' //额外附加到浮层的 css 样式,如为浮层添加阴影
    }
3.legend

图例组件。图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。
ECharts 3 中单个 echarts 实例中可以存在多个图例组件,会方便多个图例的布局。当图例数量过多时,可以使用 滚动图例(垂直) 或 滚动图例(水平)。

1
2
3
4
5
6
7
8
9
10
11
legend: {
bottom: 0, //设置图例组件离容器下侧的距离
left: 'center', //设置图例组件离容器左侧的距离
icon: 'circle', //设置图例组件图标为圆形
textStyle: {
color: '#4F4F4F', //设置图例组件字体颜色
fontSize: '14' //设置图例组件字体大小
},
hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果
data: ['存款余额', '活期余额', '定期余额', '通知存款余额', '贷款余额', '理财余额', '国债余额', '基金余额'] //图例的数据数组
}

4.color

设置数据区域颜色。

1
color: ['#1E90FF', '#40E0D0', '#43CD80', '#EEC900', '#FF6A6A', '#9B30FF', '#3A5FCD', '#27408B']

5.series

系列列表。每个系列通过 type 决定自己的图表类型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
series: [{
// name: '',
type: 'pie',
radius: ['30%', '50%'], //设置饼图半径
selectedMode: 'single', //选中模式,表示是否支持多个选中,默认关闭
hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果
label: {
normal: {
textStyle: {
fontSize: '14', //设置饼图文字格式
color: '#4F4F4F' //设置饼图文字颜色
},
formatter: function (data) {
return data.name + ' : ' + data.percent.toFixed(2) + ' % ' //
用来格式化引出文字文本,支持字符串模板和回调函数两种形式,保留两位小数
}
}
},
labelLine: {
smooth: true //是否平滑视觉引导线,默认不平滑
},
data: [ //系列中的数据内容数组
{ value: 982, name: '存款余额' },
{ value: 968, name: '活期余额' },
{ value: 1332, name: '定期余额' },
{ value: 2034, name: '通知存款余额' },
{ value: 2582, name: '贷款余额' },
{ value: 1403, name: '理财余额' },
{ value: 0, name: '国债余额' },
{ value: 701, name: '基金余额' }
],
itemStyle: {
normal: {
borderWidth: 2, //设置描边线宽
borderColor: 'white' //设置描边颜色
},
emphasis: { //图形的高亮样式
shadowColor: 'rgba(0, 0, 0, 0.5)' //
文字块的背景阴影颜色
}
}
}]

详细的学习教程可以参考Echarts学习网址

Lililich's Blog