From b9f5b855a3b8890d7dbbab6985bf4f78315cfe49 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期日, 29 九月 2024 17:33:54 +0800
Subject: [PATCH] myiconfont
---
customer_list/ch/ai_html/views/demo/html/WorkOrder.html | 736 ++++++++++++++++++++++++++++++++------------------------
1 files changed, 419 insertions(+), 317 deletions(-)
diff --git a/customer_list/ch/ai_html/views/demo/html/WorkOrder.html b/customer_list/ch/ai_html/views/demo/html/WorkOrder.html
index 443451b..8d84fd2 100644
--- a/customer_list/ch/ai_html/views/demo/html/WorkOrder.html
+++ b/customer_list/ch/ai_html/views/demo/html/WorkOrder.html
@@ -1,328 +1,430 @@
<!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="/ai_html/views/demo/js/tailwind.js"></script>
- <script src="/ai_html/views/demo/js/vue.global.js"></script>
- <script src="/ai_html/views/demo/js/datav.umd.js"></script>
- <script src="/ai_html/views/demo/js/index.full.js"></script>
- <script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
- <script src="/ai_html/views/demo/js/echarts.min.js"></script>
- <link href="/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" />
- <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
- <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
-</head>
-
-<body>
- <div class="w-full h-full bg-[#f2f4f8]" id="workOrder">
- <div class="screen-top-center">
- <div class="top-center-data">
- <div class="data-item" v-for="(item, index) in state.dataList">
- <p class="data-item-title">{{item.title}}</p>
- <p class="data-item-desc">{{item.value}}<span class="text-[13px] ">
- {{' '+item.unit}}</span></p>
- </div>
- </div>
- <div class="top-center-chart">
- <div class="chart-item">
- <div class="screen-top-header flex flex-wrap justify-center items-center">
- <div class="header-left flex-c">
- <i class="iconfont icon-ico_shuju text-[#1c86ff]"></i>
- </div>
- <div class="header-right flex-l">
- <span class="header-title">宸℃鍏绘姢鎯呭喌</span>
- <Decoration3 class="dv-dec-3" />
- </div>
- </div>
-
- <div id="inspectionChart" class="w-full h-[280px]"></div>
-
- </div>
- <div class="chart-item">
- <div class="screen-top-header flex-l">
- <div class="header-left flex-c">
- <i class="iconfont icon-shangchuan text-[#1c86ff]"></i>
- </div>
- <div class="header-right flex-l">
- <span class="header-title">鏈堝害鍙楃悊閲忔帓琛�</span>
- <Decoration3 class="dv-dec-3" />
- </div>
- </div>
- <div class="pond-section">
- <div id="salesRankChart" class="w-full h-[280px]"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
-</body>
-<script>
- const { createApp, onMounted, ref, reactive } = Vue;
- const { Decoration3 } = DataV;
- const demoOverViewChart = ref(null);
- const inspectionChart = ref(null);
- const salesRankRef = ref(null);
- const App = createApp({
- setup() {
- let state = reactive({
- dataList: [
- {
- title: '绠＄嚎鎬婚暱',
- value: 755,
- config: {
- number: [755],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
- unit: '绫�',
- },
- {
- title: '鍘嬪姏琛ㄦ暟',
- value: 3288,
- config: {
- number: [3288],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
- unit: '涓�',
- },
- {
- title: '娴侀噺璁℃暟',
- value: 14222,
- config: {
- number: [14222],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
- unit: '涓�',
- },
- {
- title: '鎴疯〃鏁�',
- value: 41022,
- config: {
- number: [41022],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
- unit: '涓�',
- },
- {
- title: '姘磋川浠暟',
- value: 176888,
- config: {
- number: [176888],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
- unit: '涓�',
- },
- {
- title: '闃�闂ㄦ暟',
- value: 820,
- config: {
- number: [820],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
- unit: '涓�',
- },
- ],
- });
- const getOverViewList = () => {
- const iconList = [
- 'biaodan',
- 'putong',
- 'zhongduancanshuchaxun',
- 'shidu',
- 'fuwenbenkuang',
- 'fuwenben',
- 'jiliandongxuanzeqi',
- 'jinridaiban',
- 'gongju',
- ];
- state.dataList.forEach((annual, index) => {
- annual.Icon = iconList[index];
- annual.BgColor = randomHexColor();
- });
- };
- //闅忔満鐢熸垚棰滆壊
- const randomHexColor = () => {
- return `#${Math.floor(Math.random() * 16777215)
- .toString(16)
- .padEnd(6, '0')}`;
- };
- onMounted(() => {
- // getOverViewList();
- window.parent.addEventListener('resize', () => {
- inspectionChart.value.resize();
- salesRankRef.value.resize();
- });
- initInspectionChart()
- drawSalesRanking();
- });
- //鍒濆鍖栧贰妫�鍥捐〃
- const initInspectionChart = () => {
- var chartDom = document.getElementById('inspectionChart');
- var myInspectChart = echarts.init(chartDom);
- inspectionChart.value = myInspectChart;
- var option = {
- legend: {},
- tooltip: {},
- grid: {
- left: '2%', // 璋冩暣宸﹁竟璺�
- right: '5%', // 璋冩暣鍙宠竟璺�
- bottom: '6%',
- containLabel: true, // 纭繚鏍囩鍜岃酱鏍囬琚寘鍚湪瀹瑰櫒鍐�
- },
- dataset: {
- source: [
- ['product', '寰幆瀹屾垚鐜�', '缁翠繚瀹屾垚鐜�'],
- ['1鏈�', 43.3, 85.8],
- ['2鏈�', 83.1, 73.4],
- ['3鏈�', 86.4, 65.2],
- ['4鏈�', 72.4, 53.9],
- ['5鏈�', 77.0, 39.1],
- ['6鏈�', 68.2, 56.2],
- ['7鏈�', 72.1, 64.5],
- ['8鏈�', 76.5, 70.8],
- ['9鏈�', 74.1, 72.4],
- ['10鏈�', 75.3, 71.7],
- ['11鏈�', 70.9, 74.2],
- ['12鏈�', 66.8, 75.2],
- ]
- },
- xAxis: { type: 'category', name: '鏈堜唤', nameGap: 10, },
- yAxis: {
- name: '鍗曚綅: %'
- },
- series: [{ type: 'bar' }, { type: 'bar' }]
- };
- option && myInspectChart.setOption(option);
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>瀹樼綉姒傝堪</title>
+ <script src="/ai_html/views/demo/js/tailwind.js"></script>
+ <script src="/ai_html/views/demo/js/vue.global.js"></script>
+ <script src="/ai_html/views/demo/js/datav.umd.js"></script>
+ <script src="/ai_html/views/demo/js/index.full.js"></script>
+ <script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
+ <script src="/ai_html/views/demo/js/echarts.min.js"></script>
+ <link href="/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" />
+ <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
+ <script src="/ai_html/views/demo/js/customInstruction.js"></script>
+ <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
+ <style>
+ .el-dialog__header {
+ margin-right: 0;
+ padding: 8px 10px;
+ background: #528abe;
}
- // 缁樺埗妯悜鏌辩姸鍥炬帓琛屾
- const drawSalesRanking = () => {
- var chartDom = document.getElementById('salesRankChart');
- var salesRankingElement = echarts.init(chartDom);
- salesRankRef.value = salesRankingElement
- const option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
- },
- grid: {
- left: '2%', // 璋冩暣宸﹁竟璺�
- right: '5%', // 璋冩暣鍙宠竟璺�
- top: '2%', // 璋冩暣涓嬭竟璺�
- bottom: '15%',
- containLabel: true, // 纭繚鏍囩鍜岃酱鏍囬琚寘鍚湪瀹瑰櫒鍐�
- },
- xAxis: {
- type: 'value',
- boundaryGap: [0, 0.01],
- axisLine: {
- show: false, // 涓嶆樉绀烘í鍧愭爣杞寸嚎
- },
- axisTick: {
- show: false, // 涓嶆樉绀哄埢搴︾嚎
- },
- splitLine: {
- show: false, // 涓嶆樉绀簒杞寸綉鏍肩嚎
- },
- },
- yAxis: {
- type: 'category',
- data: ['闂佃鍖�', '娴︿笢鍖�', '寰愭眹鍖�'], // 绀轰緥鏁版嵁
- axisLine: {
- show: false, // 涓嶆樉绀烘í鍧愭爣杞寸嚎
- },
- axisTick: {
- show: false, // 涓嶆樉绀哄埢搴︾嚎
- },
- splitLine: {
- show: false, // 涓嶆樉绀簓杞寸綉鏍肩嚎
- },
- axisLabel: {
- rich: {
- iconStyle: {
- fontSize: 20, // 璁剧疆鍥炬爣鐨勫瓧浣撳ぇ灏忎负20
- },
- nameStyle: {
- // 瀹氫箟鍚嶅瓧鐨勬牱寮�
- fontSize: 12, // 璁剧疆鍚嶅瓧鐨勫瓧浣撳ぇ灏忎负12锛屾垨鑰呮偍甯屾湜鐨勪换浣曞ぇ灏�
- },
- },
- formatter: function (value, index) {
- // 鏍规嵁index鎴杤alue鏉ュ喅瀹氭樉绀哄摢涓帓鍚嶇殑鍥炬爣
- const rankIcons = {
- 2: '{iconStyle|馃}',
- 1: '{iconStyle|馃}',
- 0: '{iconStyle|馃}',
- };
- return `${rankIcons[index]} {nameStyle|${value}}`;
- },
- },
- },
- series: [
+
+ .el-dialog__title {
+ color: #fff;
+ font-size: 14px;
+ }
+
+ .el-dialog__close {
+ color: #fff !important;
+ }
+ </style>
+ </head>
+
+ <body>
+ <div class="w-full h-full bg-[#f2f4f8]" id="workOrder">
+ <div class="screen-top-center">
+ <div class="top-center-data">
+ <div class="data-item" v-for="(item, index) in state.dataList">
+ <p class="data-item-title">{{item.title}}</p>
+ <p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">
+ {{item.value}}<span class="text-[13px]"> {{' '+item.unit}}</span>
+ </p>
+ </div>
+ </div>
+ <div class="top-center-chart">
+ <div class="chart-item">
+ <div class="screen-top-header flex flex-wrap justify-center items-center">
+ <div class="header-left flex-c">
+ <i class="myiconfont icon-ico_shuju text-[#1c86ff]"></i>
+ </div>
+ <div class="header-right flex-l">
+ <span class="header-title">宸℃鍏绘姢鎯呭喌</span>
+ <Decoration3 class="dv-dec-3" />
+ </div>
+ </div>
+
+ <div id="inspectionChart" class="w-full h-[280px]" v-resize="chartContainerResize"></div>
+ </div>
+ <div class="chart-item">
+ <div class="screen-top-header flex-l">
+ <div class="header-left flex-c">
+ <i class="myiconfont icon-shangchuan text-[#1c86ff]"></i>
+ </div>
+ <div class="header-right flex-l">
+ <span class="header-title">鏈堝害鍙楃悊閲忔帓琛�</span>
+ <Decoration3 class="dv-dec-3" />
+ </div>
+ </div>
+ <div class="pond-section" v-resize="chartContainerResize">
+ <div id="salesRankChart" class="w-full h-[280px]"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <el-dialog
+ v-model="state.isShowChartVisible"
+ :title="state.inspectionInfo.title"
+ width="50%"
+ class="px-[unset] py-[unset]"
+ :before-close="handleCloseChartVisible"
+ >
+ <div id="inspectionTrends" class="w-full h-[500px]"></div>
+ </el-dialog>
+ </div>
+ </body>
+ <script>
+ const { createApp, onMounted, ref, reactive, nextTick } = Vue;
+ const { Decoration3 } = DataV;
+ const demoOverViewChart = ref(null);
+ const inspectionChart = ref(null);
+ const salesRankRef = ref(null);
+ const inspectionTrendsChart = ref(null);
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ dataList: [
{
- name: '鍙楃悊閲�',
- type: 'bar',
- data: [9, 10, 21], // 绀轰緥鏁版嵁
- barWidth: '30%', // 璋冩暣鏌卞瓙瀹藉害
- itemStyle: {
- borderRadius: [0, 5, 5, 0], // 鍙湁鍙充晶鍦嗚
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- // 璁剧疆娓愬彉鑹诧紝鏂瑰悜涔熻璋冩暣涓烘í鍚�
- { offset: 0, color: '#bdd1f6' },
- { offset: 1, color: '#4282ff' },
- ]),
+ title: '绠＄嚎鎬婚暱',
+ value: 755,
+ config: {
+ number: [755],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24,
+ },
},
- label: {
- show: true, // 鏄剧ず鏍囩
- position: 'right', // 鏍囩浣嶇疆鍦ㄩ《閮�
- formatter: '{c}涓�', // 鑷畾涔夋樉绀虹殑鍐呭锛寋c}鏄寚褰撳墠鏁版嵁鐐圭殑鍊�
+ unit: '绫�',
+ },
+ {
+ title: '鍘嬪姏琛ㄦ暟',
+ value: 3288,
+ config: {
+ number: [3288],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24,
+ },
},
+ unit: '涓�',
+ },
+ {
+ title: '娴侀噺璁℃暟',
+ value: 14222,
+ config: {
+ number: [14222],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24,
+ },
+ },
+ unit: '涓�',
+ },
+ {
+ title: '鎴疯〃鏁�',
+ value: 41022,
+ config: {
+ number: [41022],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24,
+ },
+ },
+ unit: '涓�',
+ },
+ {
+ title: '姘磋川浠暟',
+ value: 176888,
+ config: {
+ number: [176888],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24,
+ },
+ },
+ unit: '涓�',
+ },
+ {
+ title: '闃�闂ㄦ暟',
+ value: 820,
+ config: {
+ number: [820],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24,
+ },
+ },
+ unit: '涓�',
},
],
+ isShowChartVisible: false,
+ inspectionInfo: {
+ id: null,
+ title: null,
+ value: null,
+ },
+ });
+ const getOverViewList = () => {
+ const iconList = [
+ 'biaodan',
+ 'putong',
+ 'zhongduancanshuchaxun',
+ 'shidu',
+ 'fuwenbenkuang',
+ 'fuwenben',
+ 'jiliandongxuanzeqi',
+ 'jinridaiban',
+ 'gongju',
+ ];
+ state.dataList.forEach((annual, index) => {
+ annual.Icon = iconList[index];
+ annual.BgColor = randomHexColor();
+ });
};
- salesRankingElement.setOption(option);
- };
+ //闅忔満鐢熸垚棰滆壊
+ const randomHexColor = () => {
+ return `#${Math.floor(Math.random() * 16777215)
+ .toString(16)
+ .padEnd(6, '0')}`;
+ };
+ onMounted(() => {
+ initInspectionChart();
+ drawSalesRanking();
+ });
+ //鍒濆鍖栧贰妫�鍥捐〃
+ const initInspectionChart = () => {
+ var chartDom = document.getElementById('inspectionChart');
+ var myInspectChart = echarts.init(chartDom);
+ inspectionChart.value = myInspectChart;
+ var option = {
+ legend: {},
+ tooltip: {},
+ grid: {
+ left: '2%', // 璋冩暣宸﹁竟璺�
+ right: '5%', // 璋冩暣鍙宠竟璺�
+ bottom: '6%',
+ containLabel: true, // 纭繚鏍囩鍜岃酱鏍囬琚寘鍚湪瀹瑰櫒鍐�
+ },
+ dataset: {
+ source: [
+ ['product', '寰幆瀹屾垚鐜�', '缁翠繚瀹屾垚鐜�'],
+ ['1鏈�', 43.3, 85.8],
+ ['2鏈�', 83.1, 73.4],
+ ['3鏈�', 86.4, 65.2],
+ ['4鏈�', 72.4, 53.9],
+ ['5鏈�', 77.0, 39.1],
+ ['6鏈�', 68.2, 56.2],
+ ['7鏈�', 72.1, 64.5],
+ ['8鏈�', 76.5, 70.8],
+ ['9鏈�', 74.1, 72.4],
+ ['10鏈�', 75.3, 71.7],
+ ['11鏈�', 70.9, 74.2],
+ ['12鏈�', 66.8, 75.2],
+ ],
+ },
+ xAxis: { type: 'category', name: '鏈堜唤', nameGap: 10 },
+ yAxis: {
+ name: '鍗曚綅: %',
+ },
+ series: [{ type: 'bar' }, { type: 'bar' }],
+ };
+ option && myInspectChart.setOption(option);
+ };
+ //鍒濆鍖栧脊绐梕chart
+ const initInspectionTrendsEchart = () => {
+ var chartDom = document.getElementById('inspectionTrends');
+ var businessTrendsChart = echarts.init(chartDom);
+ inspectionTrendsChart.value = businessTrendsChart;
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ left: '3%', // 璋冩暣宸﹁竟璺�
+ right: '5%', // 璋冩暣鍙宠竟璺�
+ bottom: '3%', // 璋冩暣搴曢儴杈硅窛
+ top: '5%', // 璋冩暣椤堕儴杈硅窛
+ containLabel: true, // 纭繚鏍囩鍜岃酱鏍囬琚寘鍚湪瀹瑰櫒鍐�
+ },
+ xAxis: {
+ name: '鏃堕棿',
+ type: 'category',
+ minInterval: 3600 * 4 * 1000, //12
+ data: ['00:00', '05:00', '10:00', '15:00', '20:00', '23:45'],
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ formatter: '{value}',
+ },
+ },
+ dataZoom: {
+ type: 'inside',
+ },
+ series: [
+ {
+ name: '閿�鍞',
+ type: 'line',
+ data: [620, 1032, 701, 1234, 890, 1430, 1320, 1230, 1320, 1430, 1320], // 绀轰緥鏁版嵁锛屾ā鎷熻捣浼忔洿澶�
+ smooth: true, // 鎶樼嚎骞虫粦
+ lineStyle: {
+ width: 2,
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: '#62c1fe' },
+ { offset: 0.5, color: '#ad90f7' },
+ { offset: 1, color: '#e875f2' },
+ ]),
+ },
+ symbolSize: (value, params) => {
+ // 鑾峰彇鏁版嵁绯诲垪鐨勯暱搴�
+ const seriesLength = option.series[0].data.length;
+ // 涓棿鑺傜偣鏀惧ぇ
+ if (params.dataIndex === Math.floor(seriesLength / 2)) {
+ return 8; // 涓棿鑺傜偣鐨勫ぇ灏�
+ }
+ return 8; // 鍏朵粬鑺傜偣鐨勫ぇ灏�
+ },
+ },
+ ],
+ };
+ option && businessTrendsChart.setOption(option);
+ };
+ // 缁樺埗妯悜鏌辩姸鍥炬帓琛屾
+ const drawSalesRanking = () => {
+ var chartDom = document.getElementById('salesRankChart');
+ var salesRankingElement = echarts.init(chartDom);
+ salesRankRef.value = salesRankingElement;
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ grid: {
+ left: '2%', // 璋冩暣宸﹁竟璺�
+ right: '5%', // 璋冩暣鍙宠竟璺�
+ top: '2%', // 璋冩暣涓嬭竟璺�
+ bottom: '15%',
+ containLabel: true, // 纭繚鏍囩鍜岃酱鏍囬琚寘鍚湪瀹瑰櫒鍐�
+ },
+ xAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01],
+ axisLine: {
+ show: false, // 涓嶆樉绀烘í鍧愭爣杞寸嚎
+ },
+ axisTick: {
+ show: false, // 涓嶆樉绀哄埢搴︾嚎
+ },
+ splitLine: {
+ show: false, // 涓嶆樉绀簒杞寸綉鏍肩嚎
+ },
+ },
+ yAxis: {
+ type: 'category',
+ data: ['闂佃鍖�', '娴︿笢鍖�', '寰愭眹鍖�'], // 绀轰緥鏁版嵁
+ axisLine: {
+ show: false, // 涓嶆樉绀烘í鍧愭爣杞寸嚎
+ },
+ axisTick: {
+ show: false, // 涓嶆樉绀哄埢搴︾嚎
+ },
+ splitLine: {
+ show: false, // 涓嶆樉绀簓杞寸綉鏍肩嚎
+ },
+ axisLabel: {
+ rich: {
+ iconStyle: {
+ fontSize: 20, // 璁剧疆鍥炬爣鐨勫瓧浣撳ぇ灏忎负20
+ },
+ nameStyle: {
+ // 瀹氫箟鍚嶅瓧鐨勬牱寮�
+ fontSize: 12, // 璁剧疆鍚嶅瓧鐨勫瓧浣撳ぇ灏忎负12锛屾垨鑰呮偍甯屾湜鐨勪换浣曞ぇ灏�
+ },
+ },
+ formatter: function (value, index) {
+ // 鏍规嵁index鎴杤alue鏉ュ喅瀹氭樉绀哄摢涓帓鍚嶇殑鍥炬爣
+ const rankIcons = {
+ 2: '{iconStyle|馃}',
+ 1: '{iconStyle|馃}',
+ 0: '{iconStyle|馃}',
+ };
+ return `${rankIcons[index]} {nameStyle|${value}}`;
+ },
+ },
+ },
+ series: [
+ {
+ name: '鍙楃悊閲�',
+ type: 'bar',
+ data: [9, 10, 21], // 绀轰緥鏁版嵁
+ barWidth: '30%', // 璋冩暣鏌卞瓙瀹藉害
+ itemStyle: {
+ borderRadius: [0, 5, 5, 0], // 鍙湁鍙充晶鍦嗚
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ // 璁剧疆娓愬彉鑹诧紝鏂瑰悜涔熻璋冩暣涓烘í鍚�
+ { offset: 0, color: '#bdd1f6' },
+ { offset: 1, color: '#4282ff' },
+ ]),
+ },
+ label: {
+ show: true, // 鏄剧ず鏍囩
+ position: 'right', // 鏍囩浣嶇疆鍦ㄩ《閮�
+ formatter: '{c}涓�', // 鑷畾涔夋樉绀虹殑鍐呭锛寋c}鏄寚褰撳墠鏁版嵁鐐圭殑鍊�
+ },
+ },
+ ],
+ };
+ salesRankingElement.setOption(option);
+ };
+ //鐐瑰嚮鏁版嵁椤瑰脊绐�
+ const handleDataItemClick = (item) => {
+ state.inspectionInfo = item;
+ nextTick(() => {
+ initInspectionTrendsEchart();
+ });
- return { state };
- },
- });
+ state.isShowChartVisible = true;
+ };
+ const chartContainerResize = ({ width, height }) => {
+ inspectionChart.value.resize();
+ salesRankRef.value.resize();
+ };
+ //鍏抽棴寮圭獥
+ const handleCloseChartVisible = () => {
+ state.isShowChartVisible = false;
+ };
+ return { state, handleDataItemClick, handleCloseChartVisible, chartContainerResize };
+ },
+ });
- App.component('Decoration3', Decoration3);
- App.use(ElementPlus);
- App.mount('#workOrder');
-</script>
-
-</html>
\ No newline at end of file
+ App.component('Decoration3', Decoration3);
+ elementResizeDirective(App);
+ App.use(ElementPlus);
+ App.mount('#workOrder');
+ </script>
+</html>
--
Gitblit v1.9.3