From 089bf5d2378b3c4a61d795b2a92bede2c193b771 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:22:58 +0800
Subject: [PATCH] 1
---
src/views/modules/user/echats_One.vue | 155 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 155 insertions(+), 0 deletions(-)
diff --git a/src/views/modules/user/echats_One.vue b/src/views/modules/user/echats_One.vue
new file mode 100644
index 0000000..fc39772
--- /dev/null
+++ b/src/views/modules/user/echats_One.vue
@@ -0,0 +1,155 @@
+<template>
+ <div :style="{ height: height, width: width }" id="main">
+ <div></div>
+ </div>
+</template>
+
+ <script>
+// 引入基本模板
+// let echarts = require("echarts/lib/echarts");
+// // 引入柱状图组件
+// require("echarts/lib/chart/bar");
+// require("echarts/lib/chart/line"); //echarts/components
+// // 引入提示框和title组件
+// require("echarts/lib/component/tooltip");
+// require("echarts/lib/component/title");
+// require("echarts/lib/echarts");
+// // 不引入这个会报错 xAxis "0" not found
+// require("echarts/lib/component/grid");
+// // import 'echarts/lib/component/grid';
+import * as echarts from 'echarts/lib/echarts';
+import "echarts-gl";
+ export default {
+ props: {
+ height: {
+ type: String,
+ default: "500px",
+ },
+ width: {
+ type: String,
+ default: "90%",
+ },
+ },
+ data () {
+ return {
+ }
+ },
+ components: {
+
+ },
+ mounted(){
+ this.drawLine();
+ },
+ methods: {
+ drawLine() {
+ var chartDom = document.getElementById('main');
+ var myChart = echarts.init(chartDom);
+ var option;
+
+ option = {
+ color:['#F3DEE1','#7890F7'],
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ crossStyle: {
+ color: '#999'
+ }
+ }
+ },
+ toolbox: {
+ feature: {
+ dataView: { show: true, readOnly: false },
+ magicType: { show: true, type: ['line', 'bar'] },
+ restore: { show: true },
+ saveAsImage: { show: true }
+ }
+ },
+ legend: {
+ data: ['订单金额', '订单数']
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['01-15', '01-15', '01-15', '01-15', '01-15', '01-15', '01-15', '01-15', '01-15', '01-15', '01-15', '01-15'],
+ axisPointer: {
+ type: 'shadow'
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '订单金额',
+ min: 0,
+ max: 50000000,
+ interval: 10000000,
+ axisLabel: {
+ formatter: '{value}'
+ }
+ },
+ {
+ type: 'value',
+ name: '订单数',
+ min: 0,
+ max: 25,
+ interval: 5,
+ axisLabel: {
+ formatter: '{value} °C'
+ }
+ }
+ ],
+ series: [
+ {
+ name: '订单金额',
+ type: 'bar',
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + ' $';
+ }
+ },
+ data: [
+ 20000000.6, 11111115.9, 33111115.9, 44111115.9, 24111115.9, 11111115.9, 17111115.9, 29111115.9, 41111115.9, 1111115.9, 21111115.9, 11111115.9
+ ]
+ },
+ {
+ name: '订单数',
+ type: 'line',
+ yAxisIndex: 1,
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + ' °#';
+ }
+ },
+ data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
+ areaStyle:{
+ color:{
+ type:'linear',
+ x:0,
+ y:1,
+ x2:0,
+ y2:0,
+ colorStops: [{
+ offset: 0, color: 'rgba(120, 144, 247, 0.3)' // 0% 处的颜色
+ }, {
+ offset: 1, color: 'rgba(120, 144, 247, 0)' // 100% 处的颜色
+ }],
+ globalCoord: false // 缺省为 false
+ }
+ }
+ },
+ //填充颜色
+ {
+
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+ },
+ },
+}
+ </script>
+ <style lang="scss" scoped>
+ </style>
+
\ No newline at end of file
--
Gitblit v1.9.3