- 首页 > it技术 > >
基于vue2定义自己的图表echart组件
先安装echarts cnpm i echarts -S
,然后定义父组件
然后是子组件
这样就可以引入echart了,不过这里有一个问题就是不同的图配置不一样,而且我们肯很多地方都用到,所以我们要把配置也就是option里面的东西提出来作为公共的部分,这里以柱状图的配置为例:先新建一个options.js文件,文件代码如下:
export default {
data() {
return {
// 暴露出公共配置
barOption: {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}]
}
}
},
methods: {
// 深度拷贝对象或者数组
clone(obj) {
return JSON.parse(JSON.stringify(obj));
}
}
}
这时候只需要在需要的地方引入这个配置就可以,父文件修改如下
【基于vue2定义自己的图表echart组件】这里只是介绍了柱状图的配置,其他的如热力图,饼图等配置一样方法,可以将所有配置写在一个文件也可以每种图写一个文件好区分,个人爱好,以上
推荐阅读