自己封装vue echart组件 方便调用
<template>
<div>
<div ref="lineChart" :style="{ width: width, height: height }"></div>
</div>
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
require('echarts/theme/macarons') // echarts theme
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '280px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: false
}
},
watch: {
chartData: {
handler(val) {
this.resData = val;
this.$nextTick(function(){ //页面加载完成后执行
this.updateChartData();
})
},
immediate:true,
deep: true
}
},
data() {
// var resData = null;
const lincolors = ['#77c940', '#16afd4']
return {
myChart: null,
resData:null,
lincolors: ['#77c940', '#16afd4'] //色系条
}
},
created() {
/* var resData = {
ydata: [834.58, 1811.34, 3002.46, 4335.15, 5867, 7235.28, 7464.57],
xdata: ["2022-05", "2022-06", "2022-07", "2022-08", "2022-09"]
} */
},
mounted() {
},
methods: {
// 更新统计表数据
updateChartData() {
let xdata = this.resData.xAxis||this.resData.xdata;
let ydata = this.resData.series||this.resData.ydata;
let chartType=this.resData.chartType;
let colorList=this.resData.colorList;
console.log("********-------------------------********",xdata,ydata)
this.initChart('lineChart', xdata, ydata,chartType,colorList);
},
initChart(dom, xValue, yValue,chartType,colorList) {
if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
this.myChart.dispose();//销毁
}
// this.myChart = this.$echarts.init(this.$refs.lineChart);
this.myChart = this.$echarts.init(this.$refs.lineChart, 'macarons');
let seriesList=yValue.map(res=>{
let item={
name: res.name,
type: chartType || res.type || 'line',
// stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data:res.data
}
return item;
})
let legendList=yValue.map(item=>item.name);
let options = {
legend: {
data: legendList,
show:true,
left :'left', //center right
// orient:'vertical'
// align:'right',
// type:'plain' //plain
},
color: colorList||this.lincolors,
// title: { text: '一般折线图', left: 'center' },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
toolbox: {
show: false
},
grid: {
left: '3%',
right: '4%',
top: '60px',
bottom: '8%',
containLabel: true
},
xAxis:
{
type: 'category',
boundaryGap: true,
data: xValue
},
yAxis: [
{
// name:'单位（万/KWh)）',
type: 'value'
}
],
series: seriesList
/* series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
label: {
color: '#000',
show: true,
position: 'top'
},
data: yValue,
type: 'line',
smooth: true,
symbol: 'circle', //折线点设置为实心点
symbolSize: 10, //折线点的大小
areaStyle: {}
}
] */
}
this.myChart.setOption(options);
}
}
}
</script>
<style>
</style>
父组件调用
<template>
<div class="app-container">
<el-container>
<el-aside class="asidebar" width="400px">
<treeMenu />
</el-aside>
<el-main>
<el-row class="mb20" :gutter="20">
<el-col :span="8">
<el-card class="box-card" style="text-align:center">
<epie2 class="Rel" name="20万元" count="40" title="能耗成本"></epie2>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card" style="text-align:center">
<epie2 class="Rel" name="8万度" count="80" title="设备总电量"></epie2>
</el-card>
</el-col>+
<el-col :span="8">
<el-card class="box-card" style="text-align:center">
<epie2 class="Rel" name="20万元" count="40" title="能耗成本"></epie2>
</el-card>
</el-col>
</el-row>
<el-row class="mb20">
<el-col :span="24">
<!-- <Histogram /> -->
<el-card class="box-card">
<lineChart width="100%" height="500px" :chartData="lineData" v-if="lineData"></lineChart>
</el-card>
</el-col>
</el-row>
<el-row class="mb20" :gutter="20">
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>卡片名称</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
</div>
<lineChart width="90%" height="300px" :chartData="lineData2" v-if="lineData2"></lineChart>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>卡片名称</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
</div>
<lineChart width="90%" height="300px" :chartData="lineData2" v-if="lineData2"></lineChart>
</el-card>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
</template>
<script>
import PanelGroup from './com/PanelGroup.vue'
import Histogram from './com/Histogram.vue'
import treeMenu from './com/deviceBar.vue'
import lineChart from './com/LineCommom.vue' //引用地址
import epie2 from './com/e-pie2.vue'
import { data } from "./tableJson";
export default {
components: {
lineChart,
treeMenu,
Histogram,
epie2
},
data() {
return {
tableData: data,
lineData: null,
lineData2: null
}
},
created() {
console.log(this.dataObject);
// this.lineData = {
// series: [
// [28, 67, 8, 24, 18, 26, 55,],
// [58, 18, 26, 55, 67, 8, 24],
// [83, 183, 246, 45, 57, 28, 47]
// ],
// xAxis: ["2022-05", "2022-06", "2022-07", "2022-08", "2022-09"]
// }
this.lineData = {
series: [
{
name: '总电量',
type: 'line',
data: [28, 6, 28, 6, 28, 566, 280]
},
{
name: '总电流',
type: 'bar',
data: [58, 48, 236, 25, 10, 68, 105]
},
{
name: '总电压',
type: 'scatter',
data: [122, 6, 190, 140, 108, 22, 26]
},
],
xAxis: ["2022-05", "2022-06", "2022-07", "2022-08", "2022-09", "2022-10"],
chartType: 'line',
// colorList:['#000',"#f90",'#ddd']
}
this.lineData2 = {
series: [
{
name: '总电量',
type: 'line',
data: [28, 6, 28]
},
{
name: '总电流',
type: 'bar',
data: [58, 68, 105]
},
{
name: '总电压',
type: 'scatter',
data: [122, 6, 190]
},
],
xAxis: ["2022-05", "2022-06", "2022-07"],
chartType: 'bar',
colorList: ['#000', "#f90", '#3782c9']
}
},
/*
{
name: 'Email'+res,
type: 'line', // line直线 bar柱状 scatter散点
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data:[28, 67, 8, 24, 18, 26, 55],
}
*/
methods: {
format(percentage) {
return `${percentage}台`;
}
}
}
</script>
<style lang="scss" scoped>
.el-main {
padding: 0;
}
.el-aside {
padding-top: 0;
}
.asidebar {
background-color: white;
}
.font0 {
font-size: 20px;
}
</style>
红色子部分为关键代码 可以通过配置完成各种echart图标设配
