<!-- 图表 --> <div class="chartdiv bg-white border"> <div v-if="currentData.length===0" class="no-data" style="height:300px;"> 暂无数据 </div> <div v-show="currentData.length>0" ref="netValueChart" style="height:300px;"></div> </div> //初始化图表 chartInit() { if (!this.lineArt) this.lineArt = echarts.init(this.$refs["netValueChart"]); const option = { xAxis: { type: "category", boundaryGap: false, data: this.fundNavChartDate }, yAxis: { type: "value" }, tooltip: { trigger: "axis", axisPointer: { type: "cross", label: { backgroundColor: "#6a7985" } } }, legend: { data: [第一组数据,第二组数据] }, series: [{ data: this.dataOne, name: "第一组数据", type: "line", smooth: true, symbol: "none", lineStyle: { normal: { width: 2 } }, itemStyle: { normal: { color: "#e99400", lineStyle: { color: "#e99400" } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 0, [ { offset: 0, color: "#e99400" }, { offset: 0.7, color: "#FFE2C6" }, { offset: 1, color: "#ffffff" } ] ) } } },{ data: this.dataTwo, name: "第二组数据", type: "line", smooth: true, symbol: "none", lineStyle: { normal: { width: 2 } }, itemStyle: { normal: { color: "#409EFF", lineStyle: { color: "#409EFF" } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 0, [ { offset: 0, color: "#409EFF" }, { offset: 0.1, color: "#409EFF" }, { offset: 1, color: "#ffffff" } ] ) } } }] }; this.lineArt.setOption(option); }
来源：51CTO
作者：Seven_Amber
链接：https://blog.csdn.net/Seven_Amber/article/details/100769472