<template> <div :class="className" :style="{height:height,width:width}" /> </template> <script> import echarts from "echarts"; require("echarts/theme/macarons"); // echarts theme import resize from "./mixins/resize"; export default { mixins: [resize], props: { className: { type: String, default: "chart" }, width: { type: String, default: "100%" }, height: { type: String, default: "350px" }, autoResize: { type: Boolean, default: true }, chartData: { type: Object, required: true } }, data() { return { chart: null }; }, watch: { chartData: { deep: true, handler(val) { this.setOptions(val); } } }, mounted() { this.$nextTick(() => { this.initChart(); }); }, beforeDestroy() { if (!this.chart) { return; } this.chart.dispose(); this.chart = null; }, methods: { initChart() { this.chart = echarts.init(this.$el, "macarons"); this.setOptions(this.chartData); }, setOptions({ totalData, companyData, xAxisData } = {}) { this.chart.setOption({ xAxis: { data: xAxisData, boundaryGap: false, axisTick: { show: false } }, grid: { left: 15, right: 30, bottom: 20, top: 30, containLabel: true }, tooltip: { trigger: "axis", axisPointer: { type: "cross" }, padding: [5, 10] }, yAxis: { axisTick: { show: false } }, legend: { data: ["Ads 消耗", "媒体平台消耗"] }, series: [ { name: "Ads 消耗", itemStyle: { normal: { color: "#FF005A", lineStyle: { color: "#FF005A", width: 2 } } }, smooth: true, type: "line", data: totalData, animationDuration: 2800, animationEasing: "cubicInOut" }, { name: "媒体平台消耗", smooth: true, type: "line", itemStyle: { normal: { color: "#3888fa", lineStyle: { color: "#3888fa", width: 2 }, areaStyle: { color: "#f3f8ff" } } }, data: companyData, animationDuration: 2800, animationEasing: "quadraticOut" } ] }); } } }; </script>