聊五分钱的天吗?|ω・)و ̑̑༉
今天我们来聊一聊ECharts图表
首先简单介绍一下,ECharts是一个纯JavaScript图表库,底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视化前端框架。
1. 官网
首先就是在官网上下载合适的版本,比如我就是在写这个项目的时候需要用到ECharts图表我下载的就是5.2.2版本
下载:npm install echarts@5.2.2 --save
@符号表示要下载规定的版本
在package.json中能够看到echarts是否安装成功,以及echarts的版本号
2. 引入ECharts
在echarts的官网,我们首先要找到示例页面
打开示例页面找到我们所需要的堆叠面积图
在哪个页面使用ECharts,就在script标签里引入
// 1.导入echarts
import echarts from 'echarts'
// 2.echarts的折线图表示
import _ from 'lodash'
3. 绘制一个简单的图表
准备一个DOM容器
<div id="main" style="width: 750px;height:400px;"></div>
4. 创建一个简单的折线图
export default {
data() {
return {
options: {
title: {
text: "用户来源",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#E9EEF3",
},
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
boundaryGap: false,
},
],
yAxis: [
{
type: "value",
},
],
},
};
},
在插入已经编辑好的数据这样一个简单的折线图就写好了
效果图如下:
练习:用echarts图表写一个学生分数统计图
效果图:
源码如下:
<template>
<div>Welcome</div>
<div id="container" style="width: 800px;height:500px;"></div>
</template>
<script>
// import * as echarts from 'echarts';
const echarts = require('echarts')
export default {
mounted() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));
// 绘制图表
myChart.setOption({
title: {
text: '学生分数统计图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['张三', '李四', '王五', '赵六', '燕七']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['第一次', '第二次', '第三次', '第四次', '第五次', '第六次', '第七次']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '张三',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
}, {
name: '李四',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
}, {
name: '王五',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
}, {
name: '赵六',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
}, {
name: '燕七',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [20, 32, 1, 34, 90, 100, 120]
}]
});
}
}
</script>