一、项目需求
这里是Vue2项目,所以使用的是单文件组件方式进行封装echarts组件.
谈起可视化最不可或缺的就是echarts,但找了好多网上的教程都偏向于新手学习,不适于用来进行快速开发的人去学习。经过半天时间的摸索,我总结出了一个模板供大家使用,使用这套模板很快就能将图表插入到项目中。
二、步骤
1、安装echarts
npm install echarts
2、先在main.js中全局引入echarts
//全局引入
import Vue from 'vue'
import echarts from 'echarts'
//挂载echarts到原型对象上
Vue.prototype.$echarts = echarts
3、打开echarts官网
在此页面选择你想插入的图表后点击进入。在JS代码编辑内部可以明确的看到有option这个对象,简单的图表只有一个option,像有一些图表还有函数和变量。
若需修改数据可直接将option里的数据项修改成自己的即可,若有后端可调用接口传入。
4、创建chart1.vue组件
按照这个模板添加内容,样式和名称都可去修改,但要保证一致
<template>
<!--在这里调节图标长宽等样式-->
<div ref="myChart" id="myChart" style="width: 200px; height: 200px"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
this.setChart();
},
methods: {
setChart() {
//放入常量变量
const myEcharts = echarts.init(this.$refs.myChart);
// 指定图表的配置项和数据
var option = {
//这里放入option对象里的内容
};
//其他函数,例如:
setInterval(function () {
myEcharts.setOption({
series: [
{
data: [
{
value: random,
},
],
},
{
data: [
{
value: random,
},
],
},
],
});
}, 2000);
// 使用刚指定的配置项和数据显示图表。
myEcharts.setOption(option);
},
},
};
</script>
5、在需要插入图表的组件内引入组件
<template>
<div class="t">
<chart-1 class="chart" />
</div>
</template>
<script>
import chart1 from "./chart1.vue";
export default {
components: { chart1 },
name: "EM",
data() {
return {};
},
};
</script>
经过以上步骤后,echarts的图表就可以显示在自己的vue项目内了。