(echarts) Summary and use of single/multiple line chart packaging
Return data format:
1. LinesCharts.vue, a common package component for single and multi-fold lines
<template>
<div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from "echarts";
import resize from "@/components/Charts/mixins/resize";
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
id: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "400px",
},
xData: {
type: Array,
default: function () {
return [];
},
},
chartData: {
type: Object,
default: function () {
return {
data: [150, 230, 224, 218, 135, 147, 260],
};
},
},
},
data() {
return {
chart: null,
};
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val);
},
},
},
mounted() {
this.$nextTick(() => {
this.initChart1();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart1() {
this.chart = echarts.init(document.getElementById(this.id), "macarons");
this.setOptions(this.chartData);
},
setOptions(chartObj) {
this.chart.setOption({
//线颜色
color: ["#52A8FF", "#91cc75"],
//标签
tooltip: {
trigger: "axis",
},
//图例
legend: {
data: chartObj.name,
},
xAxis: {
type: "category",
data: chartObj.date,
},
yAxis: {
type: "value",
axisLine: {
show: false,
},
},
series: chartObj.data,
});
},
},
};
</script>
<style>
</style>
2. Page usage
<div class="charts">
<lines-chart :id="'pieChart0'" :height="'420px'" :chart-data="echartsData" />
</div>
<script>
import LinesChart from "@/components/Charts/linesChart"
export default {
components: {
LinesChart},//组件注册
data(){
return:{
echartsData: {
name: " ",
data: [],
},
}
},
methods:{
// 月销量对比
monthSalesComparison(params) {
monthSalesComparison(params).then((res) => {
if (res.code == 200) {
res.data.data.forEach((element) => {
this.$set(element, "type", "line");//给每条数据添加type字段，值为line
});
this.echartsData = res.data;
}
});
},
}
}
</script>
// 样式
.charts {
height: 420px;
box-sizing: border-box;
border: 1px solid rgb(213, 223, 232);
}
Extension: Adaptation can refer to the resize.js file below or myChart.resize() [the usage is written in another article]
resize.js
import {
debounce } from '@/utils'
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
}
},
mounted() {
this.initListener()
},
activated() {
if (!this.$_resizeHandler) {
// avoid duplication init
this.initListener()
}
// when keep-alive chart activated, auto resize
this.resize()
},
beforeDestroy() {
this.destroyListener()
},
deactivated() {
this.destroyListener()
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
initListener() {
this.$_resizeHandler = debounce(() => {
this.resize()
}, 100)
window.addEventListener('resize', this.$_resizeHandler)
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
destroyListener() {
window.removeEventListener('resize', this.$_resizeHandler)
this.$_resizeHandler = null
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
},
resize() {
const {
chart } = this
chart && chart.resize()
}
}
}