From 577052107e623fd950584c0dab91493ff6dd631e Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期四, 18 七月 2024 14:01:16 +0800
Subject: [PATCH] feat: 新增官网页面
---
src/views/project/ch/demo/WorkOrder.html | 322 ++++++++++++++++++++++++++
customer_list/ch/ai_html/views/demo/html/WorkOrder.html | 322 ++++++++++++++++++++++++++
customer_list/ch/ai_html/views/demo/html/Overview.html | 20 -
src/views/project/ch/demo/Overview.html | 20 -
4 files changed, 658 insertions(+), 26 deletions(-)
diff --git a/customer_list/ch/ai_html/views/demo/html/Overview.html b/customer_list/ch/ai_html/views/demo/html/Overview.html
index 48cb9c8..3d14619 100644
--- a/customer_list/ch/ai_html/views/demo/html/Overview.html
+++ b/customer_list/ch/ai_html/views/demo/html/Overview.html
@@ -18,18 +18,6 @@
<body>
<div class="w-full h-full bg-[#f2f4f8]" id="overview">
- <!-- <div class="w-full h-[40px] flex items-center">骞村害缂磋垂鎯呭喌</div>
- <div class="h-full">
- <div class="w-[310px] flex flex-wrap justify-between h-[220px]">
- <div v-for="item in state.annualPayment" :key="item" class="w-[50%] h-[33%] flex items-center">
- <div :class="['iconfont icon-' + item.Icon]" :style="`color:${item.BgColor};font-size:${36}px`"></div>
- <div class="ml-[10px]">
- <span>{{ item.Value }} <span>{{ item.Unit }}</span></span>
- <p>{{ item.Name }}</p>
- </div>
- </div>
- </div>
- </div> -->
<div class="screen-top-center">
<div class="top-center-data">
<div class="data-item" v-for="(item, index) in state.dataList">
@@ -305,7 +293,9 @@
},
legend: {
orient: 'vertical',
- left: 'right',
+ left: '60%',
+ y: 'center',
+
formatter: function (name) {
let target, percentage;
for (let i = 0; i < dataCake.length; i++) {
@@ -317,6 +307,9 @@
let arr = [name + ' ', ' ' + target + '浜� ', ' ' + percentage];
return arr.join(' ');
},
+ },
+ grid: {
+ left: '45'
},
// title: {
// text: '76%',//涓绘爣棰樻枃鏈�
@@ -340,6 +333,7 @@
name: '浠婃棩涓氱哗瀹屾垚搴�',
type: 'pie',
radius: ['40%', '70%'],
+ center: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
diff --git a/customer_list/ch/ai_html/views/demo/html/WorkOrder.html b/customer_list/ch/ai_html/views/demo/html/WorkOrder.html
new file mode 100644
index 0000000..5c1c5cd
--- /dev/null
+++ b/customer_list/ch/ai_html/views/demo/html/WorkOrder.html
@@ -0,0 +1,322 @@
+<!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.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: {},
+ 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);
+ }
+ // 缁樺埗妯悜鏌辩姸鍥炬帓琛屾
+ 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%', // 璋冩暣涓嬭竟璺�
+
+ 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);
+ };
+
+ return { state };
+ },
+ });
+
+ App.component('Decoration3', Decoration3);
+ App.use(ElementPlus);
+ App.mount('#workOrder');
+</script>
+
+</html>
\ No newline at end of file
diff --git a/src/views/project/ch/demo/Overview.html b/src/views/project/ch/demo/Overview.html
index 7c8a739..1e7c4bd 100644
--- a/src/views/project/ch/demo/Overview.html
+++ b/src/views/project/ch/demo/Overview.html
@@ -18,18 +18,6 @@
<body>
<div class="w-full h-full bg-[#f2f4f8]" id="overview">
- <!-- <div class="w-full h-[40px] flex items-center">骞村害缂磋垂鎯呭喌</div>
- <div class="h-full">
- <div class="w-[310px] flex flex-wrap justify-between h-[220px]">
- <div v-for="item in state.annualPayment" :key="item" class="w-[50%] h-[33%] flex items-center">
- <div :class="['iconfont icon-' + item.Icon]" :style="`color:${item.BgColor};font-size:${36}px`"></div>
- <div class="ml-[10px]">
- <span>{{ item.Value }} <span>{{ item.Unit }}</span></span>
- <p>{{ item.Name }}</p>
- </div>
- </div>
- </div>
- </div> -->
<div class="screen-top-center">
<div class="top-center-data">
<div class="data-item" v-for="(item, index) in state.dataList">
@@ -305,7 +293,9 @@
},
legend: {
orient: 'vertical',
- left: 'right',
+ left: '60%',
+ y: 'center',
+
formatter: function (name) {
let target, percentage;
for (let i = 0; i < dataCake.length; i++) {
@@ -317,6 +307,9 @@
let arr = [name + ' ', ' ' + target + '浜� ', ' ' + percentage];
return arr.join(' ');
},
+ },
+ grid: {
+ left: '45'
},
// title: {
// text: '76%',//涓绘爣棰樻枃鏈�
@@ -340,6 +333,7 @@
name: '浠婃棩涓氱哗瀹屾垚搴�',
type: 'pie',
radius: ['40%', '70%'],
+ center: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
diff --git a/src/views/project/ch/demo/WorkOrder.html b/src/views/project/ch/demo/WorkOrder.html
new file mode 100644
index 0000000..98eb2ed
--- /dev/null
+++ b/src/views/project/ch/demo/WorkOrder.html
@@ -0,0 +1,322 @@
+<!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/datav.umd.js"></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/iframe-resizer/child-5.1.5.js" async></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
+ <link href="/customer_list/ch/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" />
+ <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" />
+</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.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: {},
+ 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);
+ }
+ // 缁樺埗妯悜鏌辩姸鍥炬帓琛屾
+ 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%', // 璋冩暣涓嬭竟璺�
+
+ 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);
+ };
+
+ return { state };
+ },
+ });
+
+ App.component('Decoration3', Decoration3);
+ App.use(ElementPlus);
+ App.mount('#workOrder');
+</script>
+
+</html>
\ No newline at end of file
--
Gitblit v1.9.3