vue中通过自定义组件使用echarts

一 概述

echarts是一款非常优秀的可视化框架，涵盖各行业各类型图表，满足大部分的需求。在vue中也有了成熟的echarts框架，vue-echarts，但由于技术积累等原因，远没有echarts官方类库中的功能强大，在使用echarts的过程中，很多时候，我们都需要定制化的集成echarts图表。

二 步骤

1 安装echarts依赖

npm install echarts -S

2 全局引入echarts

在main.js中引入echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3 定制echarts组件（以bar图为例）

<template>
<div :id="id" class="main" :style="{width: '100%', height: height}"></div>
</template>

<script>
export default {
name: 'BaseBarChart',
props: {
id: {
type: String,
default: 'main',
},
height: {
type: String,
default: '400px'
},
text: {
type: String,
default: '柱状图'
},
itemArray: {
type: Array,
default: () => ['图例1', '图例2']
},
dataSource: {
type: Object,
default: () => ({
column:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
values:[820, 932, 901, 934, 1290, 1330, 1320]
})
},
description: {
type: String,
default: '文本描述'
}
},
data() {
return {
myChart: ''
}
},
computed: {
},
methods: {
setOption() {
this.myChart.setOption({
color: ['#3398DB'],
title: {
text: this.text,
x: 'center',
show: false
},
xAxis: {
type: 'category',
data: this.dataSource.column,
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
//存在多种数据才需要图例
legend: {
orient: 'vertical',
x: 'left',
y: 'center',
data: this.itemArray,
show: false
},
//多种数据时需要自定义series,每种数据对应数组中的一个值
series: [{
name: this.description,
type: 'bar',
barWidth: '60%',
label: {
normal: {
show: true,
position: 'outside'
}
},
data: this.dataSource.values,
}]
})
}
},
mounted() {
let echarts = require('echarts');
// 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(document.getElementById(this.id), 'light');
// 绘制图表
this.setOption();
window.addEventListener("resize", () => {
this.myChart.resize();
})
},
watch: {
dataSource: function () {
this.setOption()
}
}
}
</script>

组件中的核心方法是setOption()，方法中调用了echarts实体的setOption()方法，可以在echarts官网配置相应的参数至自己想要的效果后将配置内容复制到方法体内，相应的变量设置为组件参数，通过组件传值进行设定。

4 使用相应的echarts组件

<template>
<BaseBar :id="id" :height="height" :dataSource="dataSource"></BaseBar>
</template>
<script>
export default {
name: "Demo",
components: {
BaseBar
},
data(){
return{
height:800,
dataSource:{}
}
}
}
</script>

三 总结

echarts的功能丰富，自定义组件可以让echarts的使用更加灵活，达到自己想要的效果。