关于echarts表图，最近也写的比较多，后台各种业务的数据统计，大屏的数据统计图表，所以到的图表也是多样化的，像基础的柱状图、折线图、饼图、用的比较多，我们大部分都是图表都是同步开发，考虑做个组件方便组内成员使用，才决定二次封装一下echarts。
基础组件
这个就是一个盒子，只是做一些基本处理，包括图表的loading效果、resize图表更新、dispose图表实例释放，释放的实例不可用
下面用的两个echarts方法
resize
ECharts没有绑定resize事件，显示区域大小发生改变内部并不知道，
使用方可以根据自己的需求绑定关心的事件，主动调用resize达到区域更新的效果。
this.chart.resize()
dispose
释放图表实例，释放后实例不再可用。
this.chart.dispose()
目前ECharts图表的实例化主要包含当前十七个相关方法，想了解其他方法可以百度
<template>
<div :class="className" :style="{height:height, width:width }" />
</template>
\
<script>
import echarts from 'echarts'; // echarts theme
import resize from './mixins/resize'
require('echarts/theme/macarons');
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
height: {
type: String,
default: '100%'
},
width: {
type: String,
default: '100%'
},
chartData: {
type: Object,
default: () => {
return {}
}
}
},
data () {
return {
chart: null
}
},
watch: {
chartData (obj) {
this.initChart()
}
},
mounted () {
this.initChart()
this.__resizeHandler = () => {
if (this.chart) {
this.chart.resize()
}
}
},
methods: {
initChart () {
if (this.chart) {
this.chartDispose()
}
this.chart = echarts.init(this.$el, 'macarons')
this.chart.showLoading({
text: '数据装填中 请稍后…',
color: '#409EFF', // loading图标颜色
textStyle: {
fontSize: 20
}
})
this.chart.setOption(this.chartData)
this.$emit('init', this.chart)
this.chart.on('click', (params) => {
this.$emit('click', params)
})
if(JSON.stringify(this.chartData) != '{}') {
this.chart.hideLoading()
}
},
chartDispose () {
window.removeEventListener('resize', this.__resizeHandler)
this.chart.dispose()
this.chart = null
}
},
beforeDestroy () {
if (!this.chart) {
return
}
this.chartDispose()
}
};
</script>
工具类方法
每个类型的表图都要创建一个方法，但是需要动态的数据是通过页面传入进来的
这样的话，如果用的是同类型的图表的，只需要传入动态的数据，那这个图表就完成，是不是大大提升的开发效率！！
// 柱形图
export function getBrokenDataEts(data) {
let strMax = 5; //默认5个字换行 ,仅在开启了autoEnter生效
if(document.body.offsetWidth < 1500) { // 屏幕像素小于1500区间
strMax = 4;
}
let colors = data.colors;
let option = {
title: {
text: data.title, // 主标题
textStyle: {
color: '#333333', // 主标题颜色
fontSize: '14', // 主标题大小,
fontWeight: 'bold'
},
x: 'center',
y: '280'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(4, 176, 252, 0.10196078431372549)'
}
},
formatter: data.formatter ? data.formatter : null
},
grid: {
top: '10%',
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
xAxis: [{
type: 'category',
data: data.dataX,
axisLine: {
lineStyle: {
color: '#666666'
},
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
interval: 0,
color: 'rgba(102,102,102,1)',
fontSize: 12,
rotate: data.rotate || 0, // 该属性是label是否旋转度数
formatter:function(value) //X轴的内容
{
let ret = ""; //拼接加\n返回的类目项
let max = data.autoEnter ? strMax : 6; //每行显示的文字字数
let val = value.length; //X轴内容的文字字数
let rowN = Math.ceil(val / max); //需要换的行数
if(rowN > 1) //判断 如果字数大于2就换行
{
for(let i = 0; i<rowN;i++){
let temp = ""; //每次截取的字符串
let start = i * max; //开始截取的位置
let end = start + max; //结束截取的位置
temp = value.substring(start,end)+ "\n";
ret += temp; //最终的字符串
}
return ret;
}
else {return value}
}
},
}],
yAxis: [{
type: 'value',
minInterval: 1,
splitLine: {
show: true,
lineStyle: {
color: '#efefef'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
color: 'rgba(102,102,102,1)',
fontSize: 12
},
splitArea: {
show: false
}
}],
series: [{
// name: 'Direct',
type: 'bar',
barWidth: '22',
// barWidth: '36%',
itemStyle: {
normal: {
color: (params) => {
return data.colors;
}
}
},
data: data.dataY
}]
};
return option
}
页面使用
<my-eacharts class="echart-item-main" :chartData="pieDataEts1" />
import myEacharts from '@/components/echarts/echarts'
export default {
components:{ myEacharts },
methods:{
setData1(){
let dataX = [],dataY = [];
this.data.policyStatistics.policyList.forEach(row=>{
dataX.push(row.typeName)
dataY.push(row.typeCount)
})
this.pieDataEts1 = getBrokenDataEts({
dataX,
dataY,
colors: "#4DADFF",
title: '',
autoEnter: true,
formatter: function (param) {
return `${param[0].axisValue} <br/> ${param[0].marker} 数量 <span style="margin-left:10px">${param[0].data}</span>`
}
})
},
},
mounted(){
this.$nextTick(()=>{
this.setData1()
})
}
}
总结
学习、实践、总结、分享，这就是我想说的话，因为这个8个大字，说明太多太多，不关于工作、生活、学习，加油吧，少年！！！！
