Echarts+vue,封装后好用到飞
做过可视化项目的小伙伴们相信对echarts并不陌生,但是很多人按部就班比着echarts的官方的api创建实例运用并不灵活,尤其面对多个图表的情况非常棘手,需要一各一个的创建,5个图表就快1000行代码了,这种痛苦刚接触图表的我感触极深,对不起我是受不了,懒人就只好封装了。首先说明一下目前ECharts已更新到5.0版本,在Vue中引入并不难,但是会和5.0以前引入有些小不同我会在下边说明,废话
·
做过可视化项目的小伙伴们相信对echarts并不陌生,但是很多人按部就班比着echarts的官方的api创建实例运用并不灵活,尤其面对多个图表的情况非常棘手,需要一各一个的创建,5个图表就快1000行代码了,这种痛苦刚接触图表的我感触极深,对不起我是受不了,懒人就只好封装了。首先说明一下目前ECharts
已更新到5.0
版本,在Vue
中引入并不难,但是会和5.0以前引入有些小不同我会在下边说明,废话不多说了看效果图
上代码
1.安装
你可以指定版本,不然默认会是最新版本
npm install --save echarts
//npm install echarts@4.x --save 指定版本。 由于主题的原因我用的4.x版本,就不多解释了
#或
cnpm install --save echarts
2.在main.js引入
// main.js
import Vue from 'vue'
import echarts from "echarts";//引入echarts //5.0以前引入
// import * as echarts from 'echarts' //5.0版本要加断言,不然飘红
Vue.prototype.$echarts = echarts; //挂载
3.创建文件(注册组件)
1.在src下components文件夹下创建一个ChartLine(名字随便写)文件下index.vue写以下代码
<template>
<div class="container">
<div class="chart_line" :id="id" :data="data"></div>
</div>
</template>
<script>
export default {
name: "",
props: ["id", "data"], //id必须找到dom的节点,data就是option图标核心数据
data() {
return {
ChartLineGraph: null,
};
},
watch: {
data: {
handler(newvalue, oldvalue) {
this.drawLineGraph(this.id, newvalue);
},
deep: true,
},
},
methods: {
drawLineGraph(id, data) {
let _this = this;
let myChart = document.getElementById(id);
this.ChartLineGraph = this.$echarts.init(myChart); //初始化实例
this.ChartLineGraph.setOption(data, true);//开启重绘
window.addEventListener("resize", function () {
_this.ChartLineGraph.resize(); //浏览器缩放eachrts自适应
});
},
},
mounted() {
this.drawLineGraph(this.id, this.data);
},
beforeUpdate() {
},
updated(){
},
beforeDestroy() {
if (this.ChartLineGraph) {
this.ChartLineGraph.clear();
}
},
};
</script>
<style scoped>
.chart_line {
height: 100%;
width: 100%;
}
</style>
2.注册全局或者按需导入,这里我是全局注册的因为我的项目基本上就是图表、图表、各种图表
// components下的index.js
import Vue from 'vue';
Vue.component("ChartLine",function(){
return import("@/components/ChartLine")
})
4.使用
干完以上3步,你就舒服了,无论多个图表或单个图表都很简单
<template>
<div class="monit-container">
<div
class="lineChart"
v-loading="params.loading"
element-loading-text="加载中...."
element-loading-spinner="el-icon-loading"
>
<template v-if="params.monitorLineList.length > 0">
<!-- 注意:
1.一定要给图表指定宽高,没有宽高显示个屁,对吧!css代码如
.h-main{height:300px;width:500px}
2.id一定不要重复,id一定不要重复,id一定不要重复,重要的事情说三遍,重复无法渲染
3.data接受的就是官方实例的option,不熟悉的小伙伴,请去echarts文档自行学习
-->
<!-- 多个图表 -->
<ChartLine
class="h-main"
v-for="item in params.monitorLineList"
:id="'sdff'+item.id"
:data="item.option"
:key="item.id"
></ChartLine>
<!-- 单个图表 -->
<ChartLine
class="h-main"
id="suibian"
:data="option"
></ChartLine>
</template>
<div class="nodata nodata_p" v-else>
暂无数据
<p>图表</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
loading:false,
monitorLineList:[]
};
},
props: {
params: {
type: Object,
default: () => {
return {};
},
},
},
components: {},
mounted() {
},
created() {
console.log(this.params)
},
methods: {
},
};
</script>
<style lang='scss' scoped>
.monit-container {
flex: 1;
.lineChart {
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: center;
.h-main {
width: 90%;
margin: 10px 0;
height: 300px;
}
}
}
</style>
更多推荐
已为社区贡献5条内容
所有评论(0)