diff --git a/package-lock.json b/package-lock.json index 1953011..06b2d16 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@dataview/datav-vue3": "^0.0.0-test.1672506674342", + "@jiaminghi/data-view": "^2.10.0", "echarts": "^5.4.3", "vue": "^3.3.8", "vue-router": "^4.2.5" @@ -407,6 +408,34 @@ "node": ">=12" } }, + "node_modules/@jiaminghi/bezier-curve": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz", + "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==", + "dependencies": { + "@babel/runtime": "^7.5.5" + } + }, + "node_modules/@jiaminghi/c-render": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@jiaminghi/c-render/-/c-render-0.4.3.tgz", + "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "@jiaminghi/bezier-curve": "*", + "@jiaminghi/color": "*", + "@jiaminghi/transition": "*" + } + }, + "node_modules/@jiaminghi/charts": { + "version": "0.2.18", + "resolved": "https://registry.npmjs.org/@jiaminghi/charts/-/charts-0.2.18.tgz", + "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "@jiaminghi/c-render": "^0.4.3" + } + }, "node_modules/@jiaminghi/color": { "version": "0.1.1", "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz", @@ -415,6 +444,23 @@ "@babel/runtime": "^7.5.5" } }, + "node_modules/@jiaminghi/data-view": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@jiaminghi/data-view/-/data-view-2.10.0.tgz", + "integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "@jiaminghi/charts": "*" + } + }, + "node_modules/@jiaminghi/transition": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/@jiaminghi/transition/-/transition-1.1.11.tgz", + "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==", + "dependencies": { + "@babel/runtime": "^7.5.5" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.3", "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", @@ -2188,6 +2234,34 @@ "dev": true, "optional": true }, + "@jiaminghi/bezier-curve": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz", + "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==", + "requires": { + "@babel/runtime": "^7.5.5" + } + }, + "@jiaminghi/c-render": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@jiaminghi/c-render/-/c-render-0.4.3.tgz", + "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==", + "requires": { + "@babel/runtime": "^7.5.5", + "@jiaminghi/bezier-curve": "*", + "@jiaminghi/color": "*", + "@jiaminghi/transition": "*" + } + }, + "@jiaminghi/charts": { + "version": "0.2.18", + "resolved": "https://registry.npmjs.org/@jiaminghi/charts/-/charts-0.2.18.tgz", + "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==", + "requires": { + "@babel/runtime": "^7.5.5", + "@jiaminghi/c-render": "^0.4.3" + } + }, "@jiaminghi/color": { "version": "0.1.1", "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz", @@ -2196,6 +2270,23 @@ "@babel/runtime": "^7.5.5" } }, + "@jiaminghi/data-view": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@jiaminghi/data-view/-/data-view-2.10.0.tgz", + "integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==", + "requires": { + "@babel/runtime": "^7.5.5", + "@jiaminghi/charts": "*" + } + }, + "@jiaminghi/transition": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/@jiaminghi/transition/-/transition-1.1.11.tgz", + "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==", + "requires": { + "@babel/runtime": "^7.5.5" + } + }, "@jridgewell/gen-mapping": { "version": "0.3.3", "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", diff --git a/package.json b/package.json index c564de6..d9f0a4f 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@dataview/datav-vue3": "^0.0.0-test.1672506674342", + "@jiaminghi/data-view": "^2.10.0", "echarts": "^5.4.3", "vue": "^3.3.8", "vue-router": "^4.2.5" diff --git a/src/components/header.vue b/src/components/header.vue index 7773258..39184fe 100644 --- a/src/components/header.vue +++ b/src/components/header.vue @@ -1,7 +1,140 @@ - \ No newline at end of file + + + diff --git a/src/main.js b/src/main.js index 5d91a2c..a6f2b5b 100644 --- a/src/main.js +++ b/src/main.js @@ -1,10 +1,12 @@ import { createApp } from 'vue' // import './style.css' import App from './App.vue' +import dataV from '@jiaminghi/data-view' // import DataV, { setClassNamePrefix } from '@dataview/datav-vue3'; import router from "./router"; const app=createApp(App) app.use(router) +app.use(dataV) app.mount('#app') \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 86b9ebd..7705810 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -5,12 +5,7 @@ const routes= [ path: '/', name: 'index', component:()=>import('@/view/index.vue'), - }, - // { - // path: '/a', - // name: 'indesx', - // component:()=>import('@/components/header.vue'), - // }, + } ] const router = createRouter({ diff --git a/src/view/index.vue b/src/view/index.vue index b1c3415..1889100 100644 --- a/src/view/index.vue +++ b/src/view/index.vue @@ -1,16 +1,26 @@ \ No newline at end of file diff --git a/src/view/option.js b/src/view/option.js new file mode 100644 index 0000000..4a0e6db --- /dev/null +++ b/src/view/option.js @@ -0,0 +1,362 @@ +import * as echarts from 'echarts'; + +let angle = 0;//角度，用来做简单的动画效果的 + let value = 78; //图上角度数据 + let result = [ + { name: '制造业', value: 5713,itemStyle: {color: '#FF7734'}}, + { name: '信息传输、软件和信息技术服务业', value: 3022 ,itemStyle: {color: '#FFC700'}}, + { name: '科学研究和技术服务业', value: 2647 ,itemStyle: {color: '#34FFE7'}}, + { name: '金融业', value: 2291 }, + { name: '批发和零售业', value: 1946 }, + { name: '交通运输、仓储和邮政业', value: 1812 }, + { name: '教育', value: 1756 }, + { name: '建筑业', value: 1712 }, + { name: '房地产业', value: 1666 }, + { name: '水利、环境和公共设施管理业', value: 1621 } +] + +const optins={ + // 用户图表 + userChartOption : { + color:[ + new echarts.graphic.LinearGradient(0, 1, 0, 0, [ + { offset: 1, color: 'transparent' }, + { offset: 0, color: '#0081C3' }, + ]) + , new echarts.graphic.LinearGradient(0, 1, 0, 0, [ + { offset: 1, color: 'transparent' }, + { offset: 0, color: '#3E54BF' }, + ]) , new echarts.graphic.LinearGradient(0, 1, 0, 0, [ + { offset: 1, color: 'transparent' }, + { offset: 0, color: '#4DBFD9' }, + ]) , + ], + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + // color: transparent; + + legend: {}, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + data: ['11.01', '11-02', '11-03', '11-04', '11-05',] + } + ], + yAxis: [ + { + type: 'value', + splitLine:{ + show:true, + lineStyle:{ + type:'dashed',//背景色为虚线, + color:'#256980' + } + } + + }, + + ], + series: [ + { + name: '新增用户数量', + type: 'bar', + emphasis: { + focus: 'series' + }, + data: [320, 332, 301, 334, 390, 330, 320], + itemStyle: { + borderWidth: 1, + borderColor: "#384FB4", + }, + + backgroundStyle: { + color: ['red'] + } + }, + { + name: '访问用户数量', + type: 'bar', + emphasis: { + focus: 'series' + }, + data: [120, 132, 101, 134, 90, 230, 210], + itemStyle: { + borderWidth: 1, + borderColor: "#3E54BF", + }, + }, + { + name: '累计用户数量', + type: 'bar', + emphasis: { + focus: 'series' + }, + data: [220, 182, 191, 234, 290, 330, 310], + itemStyle: { + borderWidth: 1, + borderColor: "#4EC1DB", + }, + }, + + ] + }, + // 地方店铺数量统计 + storeNum:{ + backgroundColor:"#061740", + title: { + text: '{a|'+ 70 +'}{c|%}', + x: 'center', + y: 'center', + textStyle: { + rich:{ + a: { + fontSize: 10, + color: '#ffffff', + fontWeight: 'bold' + }, + c: { + fontSize: 10, + color: '#ffffff', + fontWeight: 'normal' + } + } + } + }, + series: [ + //内环 + { + name: "", + type: 'custom', + coordinateSystem: "none", + renderItem: function(params, api) { + return { + type: 'arc', + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2, + r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65, + startAngle: (0+-angle) * Math.PI / 180, + endAngle: (360+-angle) * Math.PI / 180 + }, + style: { + stroke: "#0CD3DB", + fill: "transparent", + lineWidth: 0.5 + }, + silent: true + }; + }, + data: [0] + }, + //外环 + { + name: '', + type: 'pie', + radius: ['85%', '70%'], + silent: true, + clockwise: true, + startAngle: 90, + z: 0, + zlevel: 0, + label: { + normal: { + position: "center", + } + }, + data: [ + { + value: 60, + name: "", + itemStyle: { + normal: { + //外环发光 + borderWidth: 0.5, + shadowBlur: 20, + borderColor: '#4bf3f9', + shadowColor: '#9bfeff', + color: { // 圆环的颜色 + colorStops: [{ + offset: 0, + color: '#4bf3f9', // 0% 处的颜色 + }, { + offset: 1, + color: '#4bf3f9', // 100% 处的颜色 + }] + }, + } + } + }, + { + value: 100-70, + name: "", + label: { + normal: { + show: false + } + }, + itemStyle: { + normal: { + color: "#173164" + } + } + } + ] + }, + ] + }, + // 成交用户统计信息表 + + transactionUsers : { + color: ['#015989', '#583936', '#416979'], + title: { + text: '' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + legend: { + data: ['访客人数', '下单人数', '支付人数', 'Line 4', 'Line 5'] + // data: ['访客人数','下单人数','支付人数'] + + }, + toolbox: { + feature: { + saveAsImage: {} + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + } + ], + yAxis: [ + { + type: 'value', + splitLine:{ + show:true, + lineStyle:{ + type:'dashed',//背景色为虚线, + color:'#256980' + } + } + } + ], + series: [ + { + name: '访客人数', + type: 'line', + stack: 'Total', + smooth: true, + lineStyle: { + width: 0 + }, + showSymbol: false, + areaStyle: { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#18394A' + }, + { + offset: 1, + color: '#2885A4' + } + ]) + }, + emphasis: { + focus: 'series' + }, + data: [140, 232, 101, 264, 90, 340, 250] + }, + { + name: '下单人数', + type: 'line', + stack: 'Total', + smooth: true, + lineStyle: { + width: 0 + }, + showSymbol: false, + areaStyle: { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#004367' + }, + { + offset: 1, + color: '#005886' + } + ]) + }, + emphasis: { + focus: 'series' + }, + data: [120, 282, 111, 234, 220, 340, 310] + }, + { + name: '支付人数', + type: 'line', + stack: 'Total', + smooth: true, + lineStyle: { + width: 0 + }, + showSymbol: false, + areaStyle: { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#5A3A37' + }, + { + offset: 1, + color: '#355969' + } + ]) + }, + emphasis: { + focus: 'series' + }, + data: [320, 132, 201, 334, 190, 130, 220] + }, + + + ] + }, + + + + + + +} + +export default optins \ No newline at end of file diff --git a/static/index/CJYHTJ.png b/static/index/CJYHTJ.png new file mode 100644 index 0000000..2651dda Binary files /dev/null and b/static/index/CJYHTJ.png differ diff --git a/static/index/CW.png b/static/index/CW.png new file mode 100644 index 0000000..79ea0c2 Binary files /dev/null and b/static/index/CW.png differ diff --git a/static/index/CWXZ.png b/static/index/CWXZ.png new file mode 100644 index 0000000..8f73605 Binary files /dev/null and b/static/index/CWXZ.png differ diff --git a/static/index/DD.png b/static/index/DD.png new file mode 100644 index 0000000..02d07b5 Binary files /dev/null and b/static/index/DD.png differ diff --git a/static/index/DDSJ.png b/static/index/DDSJ.png new file mode 100644 index 0000000..5734684 Binary files /dev/null and b/static/index/DDSJ.png differ diff --git a/static/index/DDXZ.png b/static/index/DDXZ.png new file mode 100644 index 0000000..634727f Binary files /dev/null and b/static/index/DDXZ.png differ diff --git a/static/index/DRDD.png b/static/index/DRDD.png new file mode 100644 index 0000000..dab3c04 Binary files /dev/null and b/static/index/DRDD.png differ diff --git a/static/index/PM1.png b/static/index/PM1.png new file mode 100644 index 0000000..40b0f5a Binary files /dev/null and b/static/index/PM1.png differ diff --git a/static/index/PM2.png b/static/index/PM2.png new file mode 100644 index 0000000..b0787bf Binary files /dev/null and b/static/index/PM2.png differ diff --git a/static/index/PM3.png b/static/index/PM3.png new file mode 100644 index 0000000..2c985b3 Binary files /dev/null and b/static/index/PM3.png differ diff --git a/static/index/PM4.png b/static/index/PM4.png new file mode 100644 index 0000000..f2c2b90 Binary files /dev/null and b/static/index/PM4.png differ diff --git a/static/index/PTSP.png b/static/index/PTSP.png new file mode 100644 index 0000000..53ed523 Binary files /dev/null and b/static/index/PTSP.png differ diff --git a/static/index/PTYHL.png b/static/index/PTYHL.png new file mode 100644 index 0000000..db87e0a Binary files /dev/null and b/static/index/PTYHL.png differ diff --git a/static/index/SH.png b/static/index/SH.png new file mode 100644 index 0000000..f16676b Binary files /dev/null and b/static/index/SH.png differ diff --git a/static/index/SHXZ.png b/static/index/SHXZ.png new file mode 100644 index 0000000..2cceb38 Binary files /dev/null and b/static/index/SHXZ.png differ diff --git a/static/index/SP.png b/static/index/SP.png new file mode 100644 index 0000000..4c48046 Binary files /dev/null and b/static/index/SP.png differ diff --git a/static/index/SPBG.png b/static/index/SPBG.png new file mode 100644 index 0000000..3f66e4f Binary files /dev/null and b/static/index/SPBG.png differ diff --git a/static/index/SPTB.png b/static/index/SPTB.png new file mode 100644 index 0000000..9f7a471 Binary files /dev/null and b/static/index/SPTB.png differ diff --git a/static/index/SPXZ.png b/static/index/SPXZ.png new file mode 100644 index 0000000..e225315 Binary files /dev/null and b/static/index/SPXZ.png differ diff --git a/static/index/SSLLL.png b/static/index/SSLLL.png new file mode 100644 index 0000000..7ca19a1 Binary files /dev/null and b/static/index/SSLLL.png differ diff --git a/static/index/SY.png b/static/index/SY.png new file mode 100644 index 0000000..576164b Binary files /dev/null and b/static/index/SY.png differ diff --git a/static/index/SYXZ.png b/static/index/SYXZ.png new file mode 100644 index 0000000..45dca54 Binary files /dev/null and b/static/index/SYXZ.png differ diff --git a/static/index/SZBG.png b/static/index/SZBG.png new file mode 100644 index 0000000..8522be3 Binary files /dev/null and b/static/index/SZBG.png differ diff --git a/static/index/TIT.png b/static/index/TIT.png new file mode 100644 index 0000000..a1159da Binary files /dev/null and b/static/index/TIT.png differ diff --git a/static/index/中间图标2_3.png b/static/index/中间图标2_3.png new file mode 100644 index 0000000..ba3e886 Binary files /dev/null and b/static/index/中间图标2_3.png differ diff --git a/static/index/中间展示框背景2.png b/static/index/中间展示框背景2.png new file mode 100644 index 0000000..bdb83a7 Binary files /dev/null and b/static/index/中间展示框背景2.png differ diff --git a/static/index/中间展示框背景3.png b/static/index/中间展示框背景3.png new file mode 100644 index 0000000..734b512 Binary files /dev/null and b/static/index/中间展示框背景3.png differ diff --git a/vite.config.js b/vite.config.js index 5562631..479f0cb 100644 --- a/vite.config.js +++ b/vite.config.js @@ -13,6 +13,27 @@ export default defineConfig({ alias: { '@': path.resolve(__dirname, 'src') } + }, + optimizeDeps: { + // 开发时 解决这些commonjs包转成esm包 + include: [ + "@jiaminghi/c-render", + "@jiaminghi/c-render/lib/plugin/util", + "@jiaminghi/charts/lib/util/index", + "@jiaminghi/charts/lib/util", + "@jiaminghi/charts/lib/extend/index", + "@jiaminghi/charts", + "@jiaminghi/color", + ], + }, + build: { + // 打包时需要另外处理的commonjs规范的包 + commonjsOptions: { + include: [ + /node_modules/, // 必须包含 + ], + }, } + })