1. What is ECharts
Foreword: ECharts is simply a plug-in for the back-end database to realize the mapping of data to graphics during the Internet development process.
Specifically, an open source visualization library implemented using JavaScript can run smoothly on PCs and mobile devices and is compatible with most current browsers. The bottom layer relies on the lightweight vector graphics library ZRender, which provides intuitive, rich interaction, and high Personalized customized data visualization chart.
Official website: https://echarts.apache.org/examples/zh/index.html
2. How to use
安装：npm install echarts
Three, concrete arrangement
<template>
<div>
<el-card class="mt20">
<div id="ha" ref="main"></div>
</el-card>
</div>
</template>
<script>
import echarts from 'echarts'; //引入echarts
export default {
name: "report",
mounted() {
//加载后初始化图表
this.initEcarts();
},
methods: {
initEcarts() {
// 初始化echarts实例
let myChart = echarts.init(this.$refs.main);
let option = {
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: '总量',
areaStyle: {
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
areaStyle: {
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
areaStyle: {
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
areaStyle: {
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
};
</script>
<style lang="scss" scoped>
#ha {
width: 80%;
height: 360px;
}
</style>
Display of results:
For details, please refer to the official website tutorial: https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B% 20ECharts
Welcome to join the group for technical discussions, group number: 954314851
