最近有项目需求实现一个简单的柱形统计图,涉及到的数据不是很复杂,但是交互效果需要美观!!!首先就想到了Echarts,毕竟使用简单,功能强大,很香!
第一步:安装最新Echarts,安装教程见官方教程。
npm install --save-dev echarts --registry=https://registry.npm.taobao.org
第二步:按需引入(建议使用,Echarts包很大)
// 注意一定使用require!!!
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
require('echarts/lib/component/title');
第三步:整一个div作为挂载Echarts的容器
<template>
<div class="chart-container" ref="chart-container" style="width: 100%;height: 100%"></div>
</template>
第四步:初始化Echarts方法 配置教程
echartInit(){
this.chartDom = echarts.init(this.$refs['chart-container']) //获取DOM
/** 此段代码对自适应页面是必须的,监听resize事件实现Echars表格自适应,注意destoryed取消事件监听
window.addEventListener('resize',()=>{
this.chartDom.resize()
})
*/
this.chartDom.setOption({ //配置自行阅读官网配置教程
color: ['#00A0E9'],
title: {
subtext: 'xxx',
subtextStyle:{
color: '#333333'
},
right: 10
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.xAxis, // x坐标轴值
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value',
max: 60
},
series: [{
type: 'bar',
label: {
show: true,
position: 'inside'
},
data: this.xData //y轴坐标值
}]
})
}
第五步:mounted调用初始化方法,destoryed取消监听事件
mounted() {
this.echartInit()
},
destroyed() {
window.removeEventListener('resize',()=>{})
},
第六步:抽离公共属性,获取基础数据
props: {
xAxis: { //父组件传过来的值
type: Array,
default: () => []
},
xData: { //父组件传过来的值
type: Array,
default: () => []
}
},
第七步:监听xData动态更新表格(根据实际业务需要选择是否需要这部分功能)
watch:{
xData:{
immediate: true,
handler(newValue) { //深度监听数据变化,动态赋值Echarts
if(!this.chartDom) return
let option = this.chartDom.getOption() //精髓
option.series[0].data = newValue //精髓
this.chartDom.setOption(option) //精髓
},
deep: true
}
}
到了这一步基本上封装就完毕了。Echarts的功能十分强大,有兴趣的朋友可以自行体验。文末附完整代码
<template>
<div class="chart-container" ref="chart-container" style="width: 100%;height: 100%"></div>
</template>
<script>
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
require('echarts/lib/component/title');
export default {
name: 'myCharts',
props: {
xAxis: {
type: Array,
default: () => []
},
xData: {
type: Array,
default: () => []
}
},
data(){
return{
chartDom: null
}
},
watch:{
xData:{
immediate: true,
handler(newValue) { //深度监听数据变化,动态赋值Echarts
if(!this.chartDom) return
let option = this.chartDom.getOption()
option.series[0].data = newValue
this.chartDom.setOption(option)
},
deep: true
}
},
mounted() {
this.echartInit()
},
destroyed() {
window.removeEventListener('resize',()=>{})
},
methods: {
// 表格初始化
echartInit(){
this.chartDom = echarts.init(this.$refs['chart-container'])
window.addEventListener('resize',()=>{
this.chartDom.resize()
})
this.chartDom.setOption({
color: ['#00A0E9'],
title: {
subtext: 'xxx',
subtextStyle:{
color: '#333333'
},
right: 10
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.xAxis,
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value',
max: 60
},
series: [{
type: 'bar',
label: {
show: true,
position: 'inside'
},
data: this.xData
}]
})
}
},
}
</script>
<style lang="less" scoped>
</style>
补充常见操作:
1.如何实现Echarts的空白区点击事件(官方文档没有介绍此方法)
myChart.getZr().on('click', function(e) {
if (!e.target) {
// clicked empty area
}
})