封装echarts饼图组件(其他同理),动态更新数据
方法1
父组件
<templete>
<div>
<div>
<span :style="{display:'inline-block',textIndent: '2em'}">简介...</span>
</div>
<Piechart
@propData="propData"
:id="pieData.id"
:echartStyle="pieData.s"
:titleText="pieData.title.text"
:colorful="pieData.b"
:opinion="pieData.c"
:seriesName="pieData.d"
:opinionData="pieData.e"
/>
</div>
</templete>
import Piechart from '@comp/chart/pieChart' // 引用子组件
子组件
<template>
<div :id="id" :style="echartStyle"></div>
</template>
<script>
import Echarts from 'echarts'
export default {
props: { // 接收父组件的传值
echartStyle: { // 样式
type: Object,
default() {
return {}
}
},
id: {
type: String,
default: 'echarts_id'
},
titleText: { // 标题文本
type: String,
default: '默认标题'
},
opinion: { // 扇形区域名称
type: Array,
default() {
return []
}
},
colorful: { // 颜色
type: Array,
default() {
return []
}
},
seriesName: { // 提示框标题
type: String,
default: ''
},
opinionData: { // 扇形区域数据
type: Array,
default() {
return []
}
}
},
watch: { // 监听父组件传过来的数据,动态更新
opinionData: {
handler(newVal, oldVal) {
if (this.charts) {
newVal ? this.setOption(newVal) : this.setOption(oldVal);
}
},
deep: true,
immediate: true,
}
},
data() {
return {
charts: null,
}
},
mounted() {
this.drawPie(this.id);
},
beforeDestroy() {
this.charts.dispose(); // 销毁实例
this.charts = null;
},
methods: {
drawPie(id) { // 绘制饼状图
this.charts = Echarts.init(document.getElementById(id));
this.setOption(this.opinionData);
// setTimeout(() => {
// let xxx = this.charts.getDataURL({
// pixelRatio: 2,
// backgroundColor: '#fff'
// });
// this.$emit('propData', xxx); // 回调,导出图
// },2000)
},
setOption(option) {
this.charts.setOption({
title: {
text: this.titleText, // 标题文本
left: 'left'
},
tooltip: {
trigger: 'item',
formatter: (d) => {
let list = `<div style="text-align:left;font-size:12px">
数量: <span style="font-size:16px;font-weight:bolder;">${d.data.top}</span></div>
<div style="text-align:left;font-size:12px">
占比: <span style="font-size:16px;font-weight:bolder;">${d.data.proportion}</span></div>`
return list
}
},
legend: {
orient: 'vertical',
right: 'right',
bottom: 20,
data: this.opinion // 扇形区域名称
},
series: [
{
name: this.seriesName, // 提示框标题
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: this.opinionData, // 扇形区域数据
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
}
}
],
color: this.colorful, //自定义的颜色
})
}
}
}
</script>
效果图
方法2
父组件
html部分
<wk-Line id="barGroup" :data="numList" v-if="numList.datano1.length > 0"/>
<!-- 无数据 -->
<no-data v-else table/>
js部分
numList:{//人数分布图表数据
color:['#c0504e'],
name:[],
datano1:[],
datano2:[],
legend:['', '']
},
// 人数分布图表数据处理
let numData = [],name = []
res.data.buyFailureList.map(item =>{
numData.push(item.num)
})
res.data.buyFailureList.map(item =>{
name.push(item.name)
})
// 更新数组里面的数据
this.$set(this.numList,'datano1',numData)
this.$set(this.numList,'name',name)
字组件
<template>
<!-- 柱状图 - 堆叠 -->
<div class="bar-box" :id="id" :style="styleCpt" style="width:100%;height:20rem;">
</div>
</template>
<script>
export default {
props:['id','styleCpt','data'],
watch:{
data:{
handler(){
this.$nextTick(()=>{
this.initHandler(this.data);
})
},
immediate:true,
deep:true
}
},
methods:{
initHandler(data){
console.log(data)
debugger
let myCharts = this.$echarts.init(document.getElementById(this.id)), chartOption = {};
//为了清空上一次echarts残留的数据 setOption的值为true
myCharts.clear();
chartOption = {
color:data.color,
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: data.legend,
bottom: 10,
},
grid: {
left: '%',
right: '2%',
top: '3%',
bottom: data.color.length>1? '20%' : '5%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data.name
},
yAxis: {
type: 'value'
},
series: [
{
name: data.legend[0],
type: 'line',
stack: '总量',
data: data.datano1
},
{
name: data.legend[1],
type: 'line',
stack: '总量',
data: data.datano2
},
]
};
myCharts.setOption(chartOption,true);
//监听屏幕大小的改变来改变走势图的大小
window.addEventListener("resize",function (){
myCharts.resize();
})
let timer = setTimeout(()=>{
myCharts.resize();
clearTimeout(timer);
timer = null;
}, 500)
}
}
}
</script>
网友评论