From 6071aa5f94512675d244ec032645f7f194ab1a4f Mon Sep 17 00:00:00 2001 From: zhangjun1 Date: Fri, 3 Jul 2020 14:37:18 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BA=BF=E6=9D=A1=E5=B0=81=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/e-charts/line_chart.vue | 220 ++++++++----------------- src/pages/data-analysis/my-service.vue | 25 ++- 2 files changed, 95 insertions(+), 150 deletions(-) diff --git a/src/components/e-charts/line_chart.vue b/src/components/e-charts/line_chart.vue index b2c32dc..3d622b3 100644 --- a/src/components/e-charts/line_chart.vue +++ b/src/components/e-charts/line_chart.vue @@ -6,7 +6,7 @@ import uuidv1 from "uuid/v1"; var echarts = require("echarts"); export default { - props: [], + props: ['data'], components: {}, data() { return { @@ -16,9 +16,11 @@ export default { watch: {}, computed: {}, created() {}, - mounted() {}, + mounted() { + this.init_line_charts(this.data.xaxis,this.data.data) + }, methods: { - init_line_charts() { + init_line_charts(xAxisData,yarr) { let bgColor = "#fff"; let color = [ "#0090FF", @@ -28,55 +30,6 @@ export default { "#8B5CFF", "#00CA69", ]; - let echartData = [ - { - name: "1", - value1: 100, - value2: 233, - }, - { - name: "2", - value1: 138, - value2: 233, - }, - { - name: "3", - value1: 350, - value2: 200, - }, - { - name: "4", - value1: 173, - value2: 180, - }, - { - name: "5", - value1: 180, - value2: 199, - }, - { - name: "6", - value1: 150, - value2: 233, - }, - { - name: "7", - value1: 180, - value2: 210, - }, - { - name: "8", - value1: 230, - value2: 180, - }, - ]; - - let xAxisData = echartData.map((v) => v.name); - //  ["1", "2", "3", "4", "5", "6", "7", "8"] - let yAxisData1 = echartData.map((v) => v.value1); - // [100, 138, 350, 173, 180, 150, 180, 230] - let yAxisData2 = echartData.map((v) => v.value2); - // [233, 233, 200, 180, 199, 233, 210, 180] const hexToRgba = (hex, opacity) => { let rgbaColor = ""; let reg = /^#[\da-f]{6}$/i; @@ -88,13 +41,65 @@ export default { return rgbaColor; }; - option = { + var series = [] + + yarr.forEach((e,idx) => { + series.push( + { + name: e.name, + type: "line", + smooth: true, + showSymbol: false, + // symbolSize: 8, + zlevel: 3, + lineStyle: { + normal: { + color: color[idx], + shadowBlur: 5, + shadowColor: hexToRgba(color[idx], 0.5), + shadowOffsetY: 10, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: hexToRgba(color[idx], 0.3), + }, + { + offset: 1, + color: hexToRgba(color[idx], 0.1), + }, + ], + false + ), + shadowColor: hexToRgba(color[idx], 0.1), + shadowBlur: 10, + }, + }, + emphasis: { + itemStyle: { + borderWidth: 5, + }, + }, + data: e.arr, + }, + ) + }); + + var option = { backgroundColor: bgColor, color: color, legend: { // show:false,//是否显示图例 right: "center", - bottom: 10, + bottom: 0, itemWidth: 10, itemHeight: 10, icon: "roundRect", @@ -111,7 +116,10 @@ export default { }, }, grid: { - top: 100, + top: 10, + left:10, + right:10, + bottom:30, containLabel: true, }, xAxis: [ @@ -167,102 +175,18 @@ export default { }, }, ], - series: [ - { - name: "2018", - type: "line", - smooth: true, - showSymbol: false, - // symbolSize: 8, - zlevel: 3, - lineStyle: { - normal: { - color: color[0], - shadowBlur: 5, - shadowColor: hexToRgba(color[0], 0.5), - shadowOffsetY: 10, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: hexToRgba(color[0], 0.3), - }, - { - offset: 1, - color: hexToRgba(color[0], 0.1), - }, - ], - false - ), - shadowColor: hexToRgba(color[0], 0.1), - shadowBlur: 10, - }, - }, - emphasis: { - itemStyle: { - borderWidth: 4, - }, - }, - data: yAxisData1, - }, - { - name: "2019", - type: "line", - smooth: true, - showSymbol: false, - // symbolSize: 8, - zlevel: 3, - lineStyle: { - normal: { - color: color[1], - shadowBlur: 5, - shadowColor: hexToRgba(color[1], 0.5), - shadowOffsetY: 10, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: hexToRgba(color[1], 0.3), - }, - { - offset: 1, - color: hexToRgba(color[1], 0.1), - }, - ], - false - ), - shadowColor: hexToRgba(color[1], 0.1), - shadowBlur: 10, - }, - }, - emphasis: { - itemStyle: { - borderWidth: 4, - }, - }, - data: yAxisData2, - }, - ], + series: series, }; + window[this.line] = echarts.init(document.getElementById(this.line)); + window[this.line].setOption(option, true); }, }, }; - + diff --git a/src/pages/data-analysis/my-service.vue b/src/pages/data-analysis/my-service.vue index 49a3221..783d00c 100644 --- a/src/pages/data-analysis/my-service.vue +++ b/src/pages/data-analysis/my-service.vue @@ -30,7 +30,9 @@ - + + + @@ -76,6 +78,7 @@ import BlockRadius from "@/components/general/block-radius"; import Dashboard from "@/components/e-charts/dashboard"; import multipleCircle from '@/components/e-charts/multiple_circle' import singleCircle from '@/components/e-charts/single_circle' +import lineChart from '@/components/e-charts/line_chart' import Toplist from "@/components/e-charts/toplist"; import Starlist from "@/components/e-charts/starlist"; export default { @@ -85,7 +88,8 @@ export default { multipleCircle, singleCircle, Toplist, - Starlist + Starlist, + lineChart }, data: () => ({ navList: [], @@ -99,6 +103,23 @@ export default { num:12, color:'#515fe7', text:'共享' + }, + line_data:{ + xaxis:['01-01','01-02','01-03','01-04','01-05','01-06','01-07','01-08'], + data:[ + { + name:'开发者应用', + arr:[100,120,130,150,160,120,110,100] + }, + { + name:'平台应用', + arr:[120,130,140,130,140,120,100,90] + }, + { + name:'未上架', + arr:[80,90,100,110,100,70,80,90] + }, + ], } }), mounted() {}, -- 2.26.0