1、子组件
commomEcharts.vue
完整代码
<template>
<div class="box">
<!-- 子组件需要得到的值 id 和 data-->
<div v-bind:id=id ref="data" style="width:80vw;height:30vh"></div>
</div>
</template>
<!--开始在js里画图表 -->
<script>
export default {
name: "barChart",
props: ["id", "data"], //接受从父组件传回的值
data() {
return {}
},
//实时监听父组件传过来的值
//然后执行drawBar方法 重新绘制柱状图
watch: {
data: {
handler(value) {
this.drawBar(value)
},
deep: true//深度监听
}
},
mounted() {
this.drawBar(this.data)
},
methods: {
drawBar({
textTile = '', // 标题 柱状图options里需要用的数据这里作为参数从data里面取值
totalText = '',//标签
xData = [],//x轴的数据
legendTitle = [],//图例
series = [],//series的数据
} = {} //作为一个整体的参数
) { //现在是真正开始画图表的时候
let barBox = this.$echarts.init(document.getElementById(this.id));
//给图表一个指定的容器dom
let option = { //设置图表的options
//1.先设置图表的标题
title: {
text: textTile,//使用父组件传过来的数据
textStyle: {
color: '#7099FF',
fontsize: 20
}
},
//2.直角坐标系绘图区域
grid: {
top: '2%',
left: '0%',
right: '0%',
bottom: '15%',
containLabel: true
},
//3.下载切换区域
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
tooltip: {
trigger: "axis"
},
legend: {
icon: "rect", //这个字段控制形状类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 10, //设置宽度
itemHeight: 10, //设置高度
itemGap: 40, //设置间距
bottom: 10,
left: 'center',
data: legendTitle
},
//4.x轴相关结构
xAxis:
{
type: "category",
data: xData,
axisLine: {
show: true,
lineStyle: {
color: "rgba(204,204,204)",
width: 1,
type: "solid"
}
},
axisLabel: {
interval: 0,
fontSize: 10,
// rotate: 20
},
boundaryGap: true,
axisTick: {
alignWithLabel: true
},
},
//5.y轴相关结构
yAxis:
{
type: "value",
axisLine: {
show: true,
lineStyle: {
color: "rgba(204,204,204)",
width: 1,
type: "solid"
}
},
splitLine: {
show: false
},
// boundaryGap: true,
},
//6.固定说明文字
graphic: [{
type: 'group',
id: 'textGroup1',
left: '1%',
top: '15%',
// bounding: 'raw',
children: [
{
type: 'text',
z: 100,
top: 'middle',
left: 'center',
style: {
// text: 副标题
text: totalText,
fontSize: 15,
fill: '#A9A9AB',
}
}
]
}],
//7.图表的相关series设置
series: series,
};
//柱状图的相关结构已经定义好了调用setoption
barBox.setOption(option, true);
// console.log(option)
window.addEventListener("resize", function () {
barBox.resize();
})
}
}
}
</script>
父组件引用
import BarChart from "@/view/Electricity/components/commomEcharts";
2、父组件
主要代码片段
<template>
<div class="content_main">
<!-- 调用子组件 对应子组件的id=bar和data=objectData数据绑定-->
<bar-chart :id="'line1'" :data="objectData"></bar-chart>
<bar-chart :id="'line2'" :data="objectData1"></bar-chart>
<bar-chart :id="'line3'" :data="objectData2"></bar-chart>
</div>
</template>
export default {
components: { BarChart },
data() {
return {
objectData: {
series: [],
legendTitle:['UA','UB','UC'],
xData: [],
},
objectData1: {
series: [],
legendTitle:[],
xData: [],
},
objectData2: {
series: [],
legendTitle:[],
xData: [],
},
};
mounted() {
this.getSeries();
},
getSeries() {
this.objectData.series = [
{
name: "UA",
type: "line",//这里可修改（bar，pie）
barWidth: "40%", //柱图宽度
data: ['32', '30', '28', '29', '36', '33', '25'],
itemStyle: {
normal: {
color: "#6994FF",
},
},
},
{
name: "UB",
type: "line",//这里可修改（bar，pie）
barWidth: "40%", //柱图宽度
data: ['12', '52', '20', '26', '31', '10', '35'],
itemStyle: {
normal: {
color: "#73DEB3",
},
},
},
{
name: "UC",
type: "line",//这里可修改（bar，pie）
barWidth: "40%", //柱图宽度
data: ['9', '12', '25', '36', '41', '20', '30'],
itemStyle: {
normal: {
color: "#EB785D",
},
},
},
];
},
}
运行结果
image.png
