From de87031a7c17699eef4e2785ce121ad097d1a577 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期二, 06 八月 2024 17:09:38 +0800
Subject: [PATCH] feat: 增加高端价位页面
---
/dev/null | 301 ---------------------
src/views/project/ch/demo/separateTobacco/CustomerTop.html | 82 +++++
src/views/project/ch/demo/separateTobacco/MarketIntegration.html | 149 ++++++++++
src/views/project/ch/demo/separateTobacco/MarketComprehensive.html | 143 ++++++++++
src/views/project/ch/demo/separateTobacco/ActivateCustomerNum.html | 133 +++++++++
5 files changed, 507 insertions(+), 301 deletions(-)
diff --git a/src/views/project/ch/demo/separateTobacco/ActivateCustomerNum.html b/src/views/project/ch/demo/separateTobacco/ActivateCustomerNum.html
new file mode 100644
index 0000000..6a69fd9
--- /dev/null
+++ b/src/views/project/ch/demo/separateTobacco/ActivateCustomerNum.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>婵�娲诲鎴锋暟</title>
+ <script src="/customer_list/ch/ai_html/views/demo/js/tailwind.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/customInstruction.js"></script>
+ <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
+ <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
+ <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
+ </head>
+
+ <body>
+ <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="stockToUseBoard">
+ <div class="bg-[rgb(242,244,248)] space-y-1">
+ <div v-resize="chartContainerResize" class="w-full h-full bg-white">
+ <div class="w-full bg-white h-[280px]" id="activateCustomerLineChart"></div>
+ </div>
+ </div>
+ </div>
+ </body>
+ <script>
+ const { createApp, onMounted, ref, reactive } = Vue;
+ const activateCustomerLineChartDomRef = ref(null);
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ activateCustomerList: [
+ {
+ ID: 1,
+ stockDate: '2024-4-01',
+ value: 120,
+ },
+ {
+ ID: 2,
+ stockDate: '2024-5-01',
+ value: 70,
+ },
+ {
+ ID: 3,
+ stockDate: '2024-6-01',
+ value: 50,
+ },
+ {
+ ID: 4,
+ stockDate: '2024-7-01',
+ value: 67,
+ },
+ {
+ ID: 5,
+ stockDate: '2024-8-01',
+ value: 74,
+ },
+ ],
+ });
+ const initActivateCustomerLineChart = () => {
+ const lineXData = state.activateCustomerList.map((item) => item.stockDate);
+ var chartDom = document.getElementById('activateCustomerLineChart');
+ var activateCustomerChartDom = echarts.init(chartDom);
+ activateCustomerLineChartDomRef.value = activateCustomerChartDom;
+ let option = {
+ title: [
+ {
+ text: '婵�娲诲鎴锋暟',
+ left: 50,
+ top: 10,
+ textStyle: {
+ fontSize: 20,
+ },
+ },
+ ],
+ tooltip: {
+ trigger: 'axis',
+ },
+ legend: {
+ top: 20,
+ data: ['PV(璁块棶娆℃暟)', 'UV(璁块棶娆℃暟)'],
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {},
+ },
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: lineXData,
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: [
+ {
+ name: 'PV(璁块棶娆℃暟)',
+ type: 'line',
+ stack: 'Total',
+ data: [120, 132, 101, 134, 90, 230, 210],
+ },
+ {
+ name: 'UV(璁块棶娆℃暟)',
+ type: 'line',
+ stack: 'Total',
+ data: [220, 182, 191, 234, 290, 330, 310],
+ },
+ ],
+ };
+ option && activateCustomerChartDom.setOption(option);
+ };
+ const chartContainerResize = ({ width, height }) => {
+ activateCustomerLineChartDomRef.value.resize();
+ };
+ onMounted(() => {
+ initActivateCustomerLineChart();
+ });
+
+ return { state, chartContainerResize };
+ },
+ });
+ App.use(ElementPlus);
+ elementResizeDirective(App);
+ App.mount('#stockToUseBoard');
+ </script>
+</html>
diff --git a/src/views/project/ch/demo/separateTobacco/CustomerTop.html b/src/views/project/ch/demo/separateTobacco/CustomerTop.html
new file mode 100644
index 0000000..e49149a
--- /dev/null
+++ b/src/views/project/ch/demo/separateTobacco/CustomerTop.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>閿�鍞墠涓�</title>
+ <script src="/customer_list/ch/ai_html/views/demo/js/tailwind.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/customInstruction.js"></script>
+ <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
+ <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
+ <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
+ </head>
+
+ <body>
+ <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="stockToUseBoard">
+ <div class="bg-[rgb(242,244,248)] space-y-1">
+ <div v-resize="chartContainerResize" class="w-full h-full bg-white">
+ <div class="flex items-center">
+ <div class="w-[500px] text-center"><el-progress type="circle" :percentage="25" /></div>
+ <div class="min-w-[600px] h-full ml-[5px] w-full">
+ <div class="text-[16px] mb-5">閿�閲忓墠鍥涚殑鍝佽鍜屾暟閲�(鏉�)</div>
+ <div v-for="(item,index) in state.productSpecificationList" :key="item.ID">
+ <div class="text-[15px] text-[#000] w-[200px]">{{ item.Name }}</div>
+ <div class="flex">
+ <el-progress
+ :stroke-width="20"
+ :percentage="item.Value/100"
+ class="mb-[15px] w-full"
+ :text-inside="true"
+ ></el-progress>
+ <div class="text-[12px] text-[#000] w-[70px] ml-[10px]">{{ item.Value }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+ <script>
+ const { createApp, onMounted, ref, reactive } = Vue;
+ const activateCustomerLineChartDomRef = ref(null);
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ productSpecificationList: [
+ {
+ ID: 1,
+ Name: '鍗椾含',
+ Value: 8043,
+ },
+ {
+ ID: 2,
+ Name: '涓崕',
+ Value: 5023,
+ },
+ {
+ ID: 3,
+ Name: '鐜夋邯',
+ Value: 2023,
+ },
+ {
+ ID: 4,
+ Name: '鑺欒搲鐜�',
+ Value: 1032,
+ },
+ ],
+ });
+ const chartContainerResize = ({ width, height }) => {
+ activateCustomerLineChartDomRef.value.resize();
+ };
+ return { state, chartContainerResize };
+ },
+ });
+ App.use(ElementPlus);
+ elementResizeDirective(App);
+ App.mount('#stockToUseBoard');
+ </script>
+</html>
diff --git a/src/views/project/ch/demo/separateTobacco/MarketComprehensive.html b/src/views/project/ch/demo/separateTobacco/MarketComprehensive.html
new file mode 100644
index 0000000..c599c83
--- /dev/null
+++ b/src/views/project/ch/demo/separateTobacco/MarketComprehensive.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>甯傚満缁煎悎</title>
+ <script src="/customer_list/ch/ai_html/views/demo/js/tailwind.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/customInstruction.js"></script>
+ <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
+ <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
+ <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
+ </head>
+
+ <body>
+ <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="marketIntegrationBoard">
+ <div class="bg-[rgb(242,244,248)] space-y-1">
+ <div v-resize="chartContainerResize" class="w-full h-full bg-white">
+ <div class="w-full bg-white h-[320px]" id="marketIntegrationLineChart"></div>
+ </div>
+ </div>
+ </div>
+ </body>
+ <script>
+ const { createApp, onMounted, ref, reactive } = Vue;
+ const marketIntegrationBarChartDomRef = ref(null);
+ const marketIntegrationLineChartDomRef = ref(null);
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ marketIntegrationBoardList: [
+ {
+ Name: '鎬�',
+ Amount: '10000',
+ NewRecord: '2022-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: '缁嗘敮鐑�',
+ Amount: '4354363',
+ NewRecord: '2022-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: '涓敮鐑�',
+ Amount: '435233',
+ NewRecord: '2022-01-01',
+ CompanyName: '鏉庡洓',
+ },
+ {
+ Name: '鐭敮鐑�',
+ Amount: '54545',
+ NewRecord: '2023-01-01',
+ CompanyName: '鐜嬩簩',
+ },
+ {
+ Name: '鐖嗙彔鐑�',
+ Amount: '577887',
+ NewRecord: '2024-01-01',
+ CompanyName: '寮犱笁',
+ },
+ ],
+ });
+ const initMarketIntegrationCigarLineChart = () => {
+ var chartDom = document.getElementById('marketIntegrationLineChart');
+ var marketIntegrationBarChartDom = echarts.init(chartDom);
+ marketIntegrationLineChartDomRef.value = marketIntegrationBarChartDom;
+ let option = {
+ title: [
+ {
+ text: '甯傚満缁煎悎鐘舵��',
+ left: 50,
+ top: 10,
+ textStyle: {
+ fontSize: 20,
+ },
+ },
+ {
+ text: '(寰楀垎)',
+ top: 10,
+ left: 180,
+ textStyle: {
+ fontSize: 14,
+ },
+ },
+ ],
+ grid: {
+ left: 10,
+ right: 40,
+ },
+ xAxis: {
+ type: 'category',
+ show: false,
+ },
+ yAxis: {
+ type: 'value',
+ show: false,
+ },
+ series: [
+ {
+ data: [150, 230, 224, 218, 135, 147, 260],
+ type: 'line',
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#48C78E' },
+ { offset: 0.5, color: 'rgba(182,229,187,0.3)' },
+ { offset: 1, color: 'rgba(182,229,187,0.1)' },
+ ]),
+ },
+ lineStyle: {
+ color: '#48C78E',
+ width: 3,
+ },
+ itemStyle: {
+ color: '#48C78E',
+ },
+ label: {
+ show: true,
+ position: 'top', // 椤堕儴鏄剧ず
+ },
+ },
+ ],
+ };
+
+ option && marketIntegrationBarChartDom.setOption(option);
+ };
+ const chartContainerResize = ({ width, height }) => {
+ marketIntegrationLineChartDomRef.value.resize();
+ };
+ onMounted(() => {
+ initMarketIntegrationCigarLineChart();
+ });
+
+ return { state, chartContainerResize };
+ },
+ });
+ App.use(ElementPlus);
+ elementResizeDirective(App);
+ App.mount('#marketIntegrationBoard');
+ </script>
+</html>
diff --git a/src/views/project/ch/demo/separateTobacco/MarketIntegration.html b/src/views/project/ch/demo/separateTobacco/MarketIntegration.html
new file mode 100644
index 0000000..e97a8b2
--- /dev/null
+++ b/src/views/project/ch/demo/separateTobacco/MarketIntegration.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>缁忔祹杩愯</title>
+ <script src="/customer_list/ch/ai_html/views/demo/js/tailwind.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/customInstruction.js"></script>
+ <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
+ <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
+ <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
+ </head>
+
+ <body>
+ <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="marketIntegrationBoard">
+ <div class="bg-[rgb(242,244,248)] space-y-1">
+ <div v-resize="chartContainerResize" class="w-full h-full bg-white">
+ <div class="w-full bg-white h-[320px]" id="marketIntegrationBarChart"></div>
+ </div>
+ </div>
+ </div>
+ </body>
+ <script>
+ const { createApp, onMounted, ref, reactive } = Vue;
+ const marketIntegrationBarChartDomRef = ref(null);
+ const marketIntegrationLineChartDomRef = ref(null);
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ marketIntegrationBoardList: [
+ {
+ Name: '鎬�',
+ Amount: '10000',
+ NewRecord: '2022-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: '缁嗘敮鐑�',
+ Amount: '4354363',
+ NewRecord: '2022-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: '涓敮鐑�',
+ Amount: '435233',
+ NewRecord: '2022-01-01',
+ CompanyName: '鏉庡洓',
+ },
+ {
+ Name: '鐭敮鐑�',
+ Amount: '54545',
+ NewRecord: '2023-01-01',
+ CompanyName: '鐜嬩簩',
+ },
+ {
+ Name: '鐖嗙彔鐑�',
+ Amount: '577887',
+ NewRecord: '2024-01-01',
+ CompanyName: '寮犱笁',
+ },
+ ],
+ });
+ const initMarketIntegrationBoardBarChart = () => {
+ const barXData = state.marketIntegrationBoardList.map((item) => item.Name);
+ var chartDom = document.getElementById('marketIntegrationBarChart');
+ var marketIntegrationBarChartDom = echarts.init(chartDom);
+ marketIntegrationBarChartDomRef.value = marketIntegrationBarChartDom;
+ var option = {
+ title: [
+ {
+ text: '鍚勫垎鍏徃閿�鍞噺',
+ left: 50,
+ top: 10,
+ textStyle: {
+ fontSize: 20,
+ },
+ },
+ {
+ text: '(涓囩)',
+ top: 10,
+ left: 200,
+ textStyle: {
+ fontSize: 14,
+ },
+ },
+ ],
+ grid: {
+ left: 10,
+ right: 40,
+ },
+ legend: {
+ top: 30,
+ },
+ xAxis: {
+ type: 'category',
+ // data: barXData,
+ },
+ yAxis: {
+ show: false,
+ },
+ dataset: {
+ source: [
+ ['product', '寰�鏈�', '鏈湡'],
+ ['鍚翠腑', 43.3, 85.8],
+ ['鍚存睙', 83.1, 73.4],
+ ['鏄嗗北', 86.4, 65.2],
+ ['寮犲娓�', 72.4, 53.9],
+ ['甯哥啛', 72.4, 53.9],
+ ['澶粨', 72.4, 53.9],
+ ],
+ },
+ series: [
+ {
+ type: 'bar',
+ label: {
+ show: true,
+ position: 'top', // 椤堕儴鏄剧ず
+ },
+ },
+ {
+ type: 'bar',
+ label: {
+ show: true,
+ position: 'top', // 椤堕儴鏄剧ず
+ },
+ },
+ ],
+ };
+
+ option && marketIntegrationBarChartDom.setOption(option);
+ };
+ const chartContainerResize = ({ width, height }) => {
+ marketIntegrationBarChartDomRef.value.resize();
+ };
+ onMounted(() => {
+ initMarketIntegrationBoardBarChart();
+ });
+
+ return { state, chartContainerResize };
+ },
+ });
+ App.use(ElementPlus);
+ elementResizeDirective(App);
+ App.mount('#marketIntegrationBoard');
+ </script>
+</html>
diff --git a/src/views/project/ch/demo/tobacco/MarketIntegration.html b/src/views/project/ch/demo/tobacco/MarketIntegration.html
deleted file mode 100644
index a973e29..0000000
--- a/src/views/project/ch/demo/tobacco/MarketIntegration.html
+++ /dev/null
@@ -1,301 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>甯傚満缁煎悎</title>
- <script src="/customer_list/ch/ai_html/views/demo/js/tailwind.js"></script>
- <script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
- <script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
- <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script>
- <script src="/customer_list/ch/ai_html/views/demo/js/customInstruction.js"></script>
- <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
- <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
- <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
- <style type="text/css">
- .item_title {
- height: 38px;
- line-height: 38px;
- width: 100%;
- color: #31abe3;
- text-align: center;
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .marketIntegration_left {
- width: 58px;
- height: 14px;
- background-image: url('/customer_list/ch/static/images/demo/marketIntegration_left.png');
- }
-
- .marketIntegration_right {
- width: 58px;
- height: 14px;
- background-image: url('/customer_list/ch/static/images/demo/marketIntegration_right.png');
- transform: rotate(180deg);
- }
-
- .title-inner {
- font-weight: 900;
- letter-spacing: 2px;
- background-color: #31abe3;
- /* background: linear-gradient(92deg, #fff9 0%, #fff9 48.8525390625%, #fff9 100%); */
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
- </style>
- </head>
-
- <body>
- <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="marketIntegrationBoard">
- <div class="bg-[rgb(242,244,248)] space-y-1">
- <div v-resize="chartContainerResize" class="w-full h-full bg-white">
- <div class="min-w-[600px] h-full ml-[5px] w-full">
- <div v-for="(item,index) in state.tobaccoList" :key="item.ID">
- <div class="text-[15px] text-[#000] w-[200px]">{{item.Name}}</div>
- <div class="flex">
- <el-progress
- :stroke-width="20"
- :percentage="item.Value/100"
- class="mb-[15px] w-full"
- :text-inside="true"
- ></el-progress>
- <div class="text-[12px] text-[#000] w-[70px] ml-[10px]">{{item.Value}}</div>
- </div>
- </div>
- </div>
- </div>
- <div class="w-full bg-white h-[320px]" id="marketIntegrationBarChart"></div>
- <div class="w-full bg-white h-[320px]" id="marketIntegrationLineChart"></div>
- </div>
- </div>
- </body>
- <script>
- const { createApp, onMounted, ref, reactive } = Vue;
- const marketIntegrationBarChartDomRef = ref(null);
- const marketIntegrationLineChartDomRef = ref(null);
- const App = createApp({
- setup() {
- let state = reactive({
- tobaccoList: [
- {
- ID: 1,
- Name: '绱鍗风儫閿�閲�',
- Value: 8043,
- },
- {
- ID: 2,
- Name: '绱閿�鍞噾棰�',
- Value: 2023,
- },
- {
- ID: 3,
- Name: '绱鍝佺墝閿�閲�',
- Value: 5023,
- },
- {
- ID: 4,
- Name: '浣庝环鍗风儫閿�閲�',
- Value: 1032,
- },
- ],
- marketIntegrationBoardList: [
- {
- Name: '鎬�',
- Amount: '10000',
- NewRecord: '2022-01-01',
- CompanyName: '寮犱笁',
- },
- {
- Name: '缁嗘敮鐑�',
- Amount: '4354363',
- NewRecord: '2022-01-01',
- CompanyName: '寮犱笁',
- },
- {
- Name: '涓敮鐑�',
- Amount: '435233',
- NewRecord: '2022-01-01',
- CompanyName: '鏉庡洓',
- },
- {
- Name: '鐭敮鐑�',
- Amount: '54545',
- NewRecord: '2023-01-01',
- CompanyName: '鐜嬩簩',
- },
- {
- Name: '鐖嗙彔鐑�',
- Amount: '577887',
- NewRecord: '2024-01-01',
- CompanyName: '寮犱笁',
- },
- ],
- cigarList: [
- {
- Name: '鎬婚攢鍞噺',
- Amount: '10000',
- },
- {
- Name: '浼犵粺',
- Amount: '4543',
- },
- {
- Name: '鏈哄埗',
- Amount: '4352',
- },
- ],
- });
-
- const initMarketIntegrationBoardBarChart = () => {
- const barXData = state.marketIntegrationBoardList.map((item) => item.Name);
- var chartDom = document.getElementById('marketIntegrationBarChart');
- var marketIntegrationBarChartDom = echarts.init(chartDom);
- marketIntegrationBarChartDomRef.value = marketIntegrationBarChartDom;
- var option = {
- title: [
- {
- text: '鍚勫垎鍏徃閿�鍞噺',
- left: 50,
- top: 10,
- textStyle: {
- fontSize: 20,
- },
- },
- {
- text: '(涓囩)',
- top: 10,
- left: 200,
- textStyle: {
- fontSize: 14,
- },
- },
- ],
- grid: {
- left: 10,
- right: 40,
- },
- legend: {
- top: 30,
- },
- xAxis: {
- type: 'category',
- // data: barXData,
- },
- yAxis: {
- show: false,
- },
- dataset: {
- source: [
- ['product', '寰�鏈�', '鏈湡'],
- ['鍚翠腑', 43.3, 85.8],
- ['鍚存睙', 83.1, 73.4],
- ['鏄嗗北', 86.4, 65.2],
- ['寮犲娓�', 72.4, 53.9],
- ['甯哥啛', 72.4, 53.9],
- ['澶粨', 72.4, 53.9],
- ],
- },
- series: [
- {
- type: 'bar',
- label: {
- show: true,
- position: 'top', // 椤堕儴鏄剧ず
- },
- },
- {
- type: 'bar',
- label: {
- show: true,
- position: 'top', // 椤堕儴鏄剧ず
- },
- },
- ],
- };
-
- option && marketIntegrationBarChartDom.setOption(option);
- };
- const initMarketIntegrationCigarLineChart = () => {
- var chartDom = document.getElementById('marketIntegrationLineChart');
- var marketIntegrationBarChartDom = echarts.init(chartDom);
- marketIntegrationLineChartDomRef.value = marketIntegrationBarChartDom;
- let option = {
- title: [
- {
- text: '甯傚満缁煎悎鐘舵��',
- left: 50,
- top: 10,
- textStyle: {
- fontSize: 20,
- },
- },
- {
- text: '(寰楀垎)',
- top: 10,
- left: 180,
- textStyle: {
- fontSize: 14,
- },
- },
- ],
- grid: {
- left: 10,
- right: 40,
- },
- xAxis: {
- type: 'category',
- show: false,
- },
- yAxis: {
- type: 'value',
- show: false,
- },
- series: [
- {
- data: [150, 230, 224, 218, 135, 147, 260],
- type: 'line',
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#48C78E' },
- { offset: 0.5, color: 'rgba(182,229,187,0.3)' },
- { offset: 1, color: 'rgba(182,229,187,0.1)' },
- ]),
- },
- lineStyle: {
- color: '#48C78E',
- width: 3,
- },
- itemStyle: {
- color: '#48C78E',
- },
- label: {
- show: true,
- position: 'top', // 椤堕儴鏄剧ず
- },
- },
- ],
- };
-
- option && marketIntegrationBarChartDom.setOption(option);
- };
- const chartContainerResize = ({ width, height }) => {
- marketIntegrationBarChartDomRef.value.resize();
- marketIntegrationLineChartDomRef.value.resize();
- };
- onMounted(() => {
- initMarketIntegrationBoardBarChart();
- initMarketIntegrationCigarLineChart();
- });
-
- return { state, chartContainerResize };
- },
- });
- App.use(ElementPlus);
- elementResizeDirective(App);
- App.mount('#marketIntegrationBoard');
- </script>
-</html>
--
Gitblit v1.9.3