父:
import lineChart from './components/accountlintChart.vue'
components: { lineChart },
要设置 hazardBox 的宽高
<div class="hazardBox"> <lineChart :chartData="tagTrendData" /> </div>
子:
<template> <div ref="linechart" class="chart" /> </template> <script> import * as echarts from "echarts"; import fontSize from "@/utils/fontSize" export default { props: { chartData: { type: Object, default: {}, }, }, data () { return { chart: null, }; }, watch: { chartData () { this.$nextTick(() => { this.initChart(); }); }, }, beforeDestroy () { if (!this.chart) { return; } this.chart.dispose(); this.chart = null; }, methods: { initChart () { this.chart = echarts.init(this.$refs.linechart); const data = this.chartData; const xxData = data.xxData; const yyData = data.yyData; // const legend = data.aimData.map((item) => item.name); let serieslist = []; for (let i in yyData) { serieslist.push({ // name: legend[i], type: "line", stack: "总量" + i, data: yyData[i], smooth: true, symbol: "none", areaStyle: { normal: { //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "rgba(25,163,223,.3)", }, { offset: 1, color: "rgba(25,163,223, 0)", }, ], false ), shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色 shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 }, }, }); } let option = { color: ["#31d2f2", "#4166e8"], tooltip: { trigger: "axis", textStyle: { fontSize: fontSize(), }, }, // legend: { // show: false, // data: legend, // left: 20, // top: "1%", // textStyle: { // fontSize: fontSize(), // }, // }, grid: { top: "20%", left: "5%", right: "5%", bottom: "5%", containLabel: true, }, xAxis: { type: "category", boundaryGap: false, data: xxData, axisLabel: { fontSize: fontSize(), }, }, yAxis: { type: "value", axisLabel: { fontSize: fontSize(), }, }, series: serieslist, }; this.chart.setOption(option); // window.addEventListener("resize", () => { // this.chart.resize(); // }); }, }, }; </script> <style lang="scss" scoped> .chart { width: 100%; height: 100%; } </style>
标签:const,展示,chart,fontSize,折线图,yyData,data,legend,echat From: https://www.cnblogs.com/guohanting/p/17311021.html