写在前面
最近好长时间一直在做可视化项目,我采用的是echarts可视化图表工具画图,一开始由于时间的仓促,还有没有去研究,各方面原因吧,以前每次做图表之类的都没有封装,每次做图表都要从新去配置之类的,写了好多重复代码,感觉很累啊,所以自己把图表封装成子组件使用,代码工作量减轻了很多,而且子组件使用了数据进行监听和图表自适应屏幕大小,这样以后会方便很多了!简直帅到爆,不多说了,上思路和代码。
我用的是vue-cli全家桶+echarts,做的封装,先将代码贴出来,以便于学习以及帮助到小伙伴
首先用的脚手架需要先安装echarts,然后全局引入
npm install echarts --save
全局引入,main.js里边配置
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
这样在每个页面就可以使用了
之前一开始都是每个页面配置,现在将其封装好,方便开发以及维护。下边为思路以及代码
StepOne: 在项目的components下新建一个文件夹Echarts,在其下边新建一个index.vue,里边存放公共的echarts组件。里边的注释我已经写的很全面了,还有不理解的评论。原理就是正常的父子组件传值。
由于Echarts/index.vue子组件在初始化就会加载,后期不会更新,再加上由于echarts采用的数据驱动,所以需要监听数据的变化来重绘图表
每一个图表都有自己唯一的id,所有需要动态传入。
StepTwo:在使用页面例如有一个mycharts.vue文件,引用直接引入并传值就好了。
import MyEcharts from "@/components/Echarts/index"; //echarts
export default {
components: {
MyEcharts
},
data() {
return {
chartOption: {},
echartsXYcolor:"#fff000",
lineColor:"#5bb1f0"
}
},
mounted(){
this.initCharts();
},
methods:{
initCharts(){
this.chartOption = {
title: {
text: '折线图'
},
tooltip: {
trigger: "axis",
confine: true, //是否将 tooltip 框限制在图表的区域内。 true为是
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "line" // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function(params) {
return params;
}
},
legend: {
data:[],
top: "93%",
right:'center',
bottom:"center",
left:"center",
textStyle: {
color: this.echartsXYcolor
}
},
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
grid: {
top: "3%",
left: "100px",
right: "100px",
bottom: "100px"
},
xAxis: {
type: "category",
boundaryGap: false,
data: data: ['周一','周二','周三','周四','周五','周六','周日'],
axisLine: {
lineStyle: {
color: this.echartsXYcolor
}
},
axisLabel: {
textStyle: {
color: this.echartsXYcolor
}
}
},
dataZoom: [
{
type: "inside"
},
{
type: "slider",
top: "82%",
textStyle: {
color: this.echartsXYcolor
}
}
],
yAxis: {
axisLine: {
lineStyle: {
color: this.echartsXYcolor
}
},
axisLabel: {
textStyle: {
color: this.echartsXYcolor
},
formatter: function(val) {
return (val * 1).toFixed(2) + "%";
}
}
},
series: [
{
name: '邮件营销',
type: "line",
lineStyle: {
color: this.lineColor // 线的颜色
},
itemStyle: {
color: this.lineColor// 图例的颜色
},
showSymbol: false, // 不显示symbol
data:[120, 132, 101, 134, 90, 230, 210]
}
]
};
}
}
}
结束语
至此,一个完整的封装好的公共的vue-echarts组件就完工了,可以在项目中直接调用,里边都有公共的配置项,以及父组件完全传入配置两种方案,各有利弊,还有重绘,以及随浏览器大小而改变大小。希望简友可以提宝贵的意见在评论区评论。