一、静态效果图
二,前期需要
2.1、vue3项目,Echart引入
2.2、原理解释略
案例代码1:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template > <div id="radarChart" style="width: 100%; height: 100%;"></div> </template> <script setup> import * as echarts from 'echarts'; import { onMounted } from 'vue'; onMounted(() => initChart()); // 在这个初识化一个方法,包裹起来配置 const initChart = () => { const RadarChartDom = document.getElementById('radarChart'); const myChart = echarts.init(RadarChartDom); // 开始配置 const option = { legend: { data: ['Allocated Budget', 'Actual Spending'] }, radar: { // shape: 'circle', indicator: [ { name: 'Sales', max: 6500 }, { name: 'Administration', max: 16000 }, { name: 'Information Technology', max: 30000 }, { name: 'Customer Support', max: 38000 }, { name: 'Development', max: 52000 }, { name: 'Marketing', max: 25000 } ] }, series: [ { name: 'Budget vs spending', type: 'radar', data: [ { value: [4200, 3000, 20000, 35000, 50000, 18000], name: 'Allocated Budget' }, { value: [5000, 14000, 28000, 26000, 42000, 21000], name: 'Actual Spending' } ] } ] }; myChart.setOption(option); window.onresize = () => { myChart.resize(); }; }; </script>View Code
代码案例2:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="echarts-box"> <div id="pieCenterChart" style="width: 100%;height: 100%; min-height: 300px;"></div> </div> </template> <script setup> import * as echarts from "echarts"; /// 声明定义一下echart let echart = echarts; onMounted(() => { initChart(); }); onUnmounted(() => { echart.dispose; }); // 基础配置一下Echarts function initChart() { let chart = echart.init(document.getElementById("pieCenterChart")); // 把配置和数据放这里 chart.setOption({ tooltip: { trigger: "item", }, series: [ { name: "Access From", type: "pie", radius: ["40%", "70%"], data: [ { value: 1048, name: "苹果" }, { value: 735, name: "葡萄" }, { value: 580, name: "荔枝" }, { value: 300, name: "AVids" }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)", }, }, }, ], }); window.onresize = function() { //自适应大小 chart.resize(); }; } </script>View Code
代码案例3:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="echarts-box"> <div id="pieCenterChart" style="width: 100%;height: 100%; min-height: 300px;"></div> </div> </template> <script setup> import * as echarts from "echarts"; /// 声明定义一下echart let echart = echarts; onMounted(() => { initChart(); }); onUnmounted(() => { echart.dispose; }); // 基础配置一下Echarts function initChart() { let chart = echart.init(document.getElementById("pieCenterChart")); // 把配置和数据放这里 chart.setOption({ tooltip: { trigger: "item", }, series: [ { name: "Access From", type: "pie", radius: ["40%", "70%"], data: [ { value: 1048, name: "苹果" }, { value: 735, name: "葡萄" }, { value: 580, name: "荔枝" }, { value: 300, name: "AVids" }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)", }, }, }, ], }); window.onresize = function() { //自适应大小 chart.resize(); }; } </script>View Code
代码案例4:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="echarts-box"> <div id="pieRightChart" style="width: 100%;height: 100%; min-height: 300px;"></div> </div> </template> <script setup> import * as echarts from "echarts"; /// 声明定义一下echart let echart = echarts; onMounted(() => { initChart(); }); onUnmounted(() => { echart.dispose; }); // 基础配置一下Echarts function initChart() { let chart = echart.init(document.getElementById("pieRightChart")); // 把配置和数据放这里 chart.setOption({ tooltip: { trigger: 'item' }, series: [ { name: 'Access From', type: 'pie', radius: ['40%', '70%'], data: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, // { value: 484, name: 'Union Ads' }, // { value: 300, name: 'Video Ads' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }); window.onresize = function() { //自适应大小 chart.resize(); }; } </script>View Code
代码案例5:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="echarts-box"> <div id="pieRightChart" style="width: 100%;height: 100%; min-height: 300px;"></div> </div> </template> <script setup> import * as echarts from "echarts"; /// 声明定义一下echart let echart = echarts; onMounted(() => { initChart(); }); onUnmounted(() => { echart.dispose; }); // 基础配置一下Echarts function initChart() { let chart = echart.init(document.getElementById("pieRightChart")); // 把配置和数据放这里 chart.setOption({ tooltip: { trigger: 'item' }, series: [ { name: 'Access From', type: 'pie', radius: ['40%', '70%'], data: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, // { value: 484, name: 'Union Ads' }, // { value: 300, name: 'Video Ads' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }); window.onresize = function() { //自适应大小 chart.resize(); }; } </script>View Code
首页:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div> <div> <a-row> <a-col :span="20" style="text-align: center; font-size: 20px;font-weight: bold;color: #343536;"> <p><span>2027年</span> 柏旷科技有限公司 <span>碳排放记录结果分析</span></p> </a-col> <a-col :span="4" style="text-align: right;"> <a-button style="margin-right: 8px" @click="onClose">关闭</a-button> </a-col> </a-row> </div> <!-- 四个小卡片 --> <div style="height: 200px; margin: 15px;" class="fist"> <div class="item"> <a-card class="bigbox"> <a-row> <a-col :span="12" style="display: flex; align-items: flex-end"> <div class="text">总co排放量</div> </a-col> <a-col :span="12" style="text-align: right"> <div> <img style="width: 50px; height: 50px; border-radius: 5px" src="https://img0.baidu.com/it/u=582752653,3386538207&fm=253&fmt=auto&app=138&f=GIF?w=500&h=500" alt="" /> </div> </a-col> </a-row> <div style="margin-top: 20px"> <a-row> <a-col :span="20" style="display: flex; align-items: flex-end"> <div class="text2">0.02 <span class="span">万吨</span></div> </a-col> <a-col :span="2" style="text-align: right"> </a-col> </a-row> <a-divider style="height: 2px; background-color: #f1f1f0; margin-top: 3px" /> <a-row style="margin-top: -20px"> <a-col :span="12"> <div class="text3"><span>低于同行</span></div> </a-col> <a-col :span="12" style="text-align: right"> <span class="text3">100%</span> </a-col> </a-row> </div> </a-card> </div> <div class="item"> <a-card class="box"> <a-row> <a-col :span="12" style="display: flex; align-items: flex-end"> <div class="text4">总co排放量</div> </a-col> <a-col :span="12" style="text-align: right"> <div> <img style="width: 50px; height: 50px; border-radius: 5px" src="https://img0.baidu.com/it/u=582752653,3386538207&fm=253&fmt=auto&app=138&f=GIF?w=500&h=500" alt="" /> </div> </a-col> </a-row> <div style="margin-top: 5px"> <a-row> <a-col :span="12" style="display: flex; align-items: flex-end"> <div class="text5">0.02 <span class="span">万吨</span></div> </a-col> <a-col :span="12" style="text-align: right"> </a-col> </a-row> <a-divider style="height: 2px; background-color: #f1f1f0; margin-top: 0px" /> <a-row style="margin-top: -20px"> <a-col :span="12"> <div><span>低于同行</span></div> </a-col> <a-col :span="12" style="text-align: right"> <span>100%</span> </a-col> </a-row> </div> </a-card> </div> <div class="item"> <a-card class="box"> <a-row> <a-col :span="12" style="display: flex; align-items: flex-end"> <div class="text4">总co排放量</div> </a-col> <a-col :span="12" style="text-align: right"> <div> <img style="width: 50px; height: 50px; border-radius: 5px" src="https://img0.baidu.com/it/u=582752653,3386538207&fm=253&fmt=auto&app=138&f=GIF?w=500&h=500" alt="" /> </div> </a-col> </a-row> <div style="margin-top: 5px"> <a-row> <a-col :span="12" style="display: flex; align-items: flex-end"> <div class="text5">0.02 <span class="span">万吨</span></div> </a-col> <a-col :span="12" style="text-align: right"> </a-col> </a-row> <a-divider style="height: 2px; background-color: #f1f1f0; margin-top: 0px" /> <a-row style="margin-top: -20px"> <a-col :span="12"> <div><span>低于同行</span></div> </a-col> <a-col :span="12" style="text-align: right"> <span>100%</span> </a-col> </a-row> </div> </a-card> </div> <div class="item"> <a-card class="box"> <a-row> <a-col :span="12" style="display: flex; align-items: flex-end"> <div class="text4">总co排放量</div> </a-col> <a-col :span="12" style="text-align: right"> <div> <img style="width: 50px; height: 50px; border-radius: 5px" src="https://img0.baidu.com/it/u=582752653,3386538207&fm=253&fmt=auto&app=138&f=GIF?w=500&h=500" alt="" /> </div> </a-col> </a-row> <div style="margin-top: 5px"> <a-row> <a-col :span="12" style="display: flex; align-items: flex-end"> <div class="text5">0.02 <span class="span">万吨</span></div> </a-col> <a-col :span="12" style="text-align: right"> </a-col> </a-row> <a-divider style="height: 2px; background-color: #f1f1f0; margin-top: 0px" /> <a-row style="margin-top: -20px"> <a-col :span="12"> <div><span>低于同行</span></div> </a-col> <a-col :span="12" style="text-align: right"> <span>100%</span> </a-col> </a-row> </div> </a-card> </div> </div> <!-- 2个组件 --> <a-card class="card3"> <div class="second"> <div class="left"> <p style="margin-top: -5vh;" class="long">碳排放结果分析</p> <left-radar-chart style="width: 100%;height: 100%;"></left-radar-chart> </div> <div class="right"> <p style="margin-top: -5vh;" class="long">碳排放汇总</p><right-bar-chart></right-bar-chart></div> </div> </a-card> <!-- 三个饼图 3个组件 --> <div class="third"> <a-card class="card2"> <div class="card-pie"> <div class="pie"> <div class="title">范围一排放</div> <div style="border-bottom: 1px solid #ccc"></div> <div style="margin-top: 2rem;"> <pie-left-chart style="width: 100%; height: 100%"></pie-left-chart> </div> </div> <div class="pie"> <div class="title">范围二排放</div> <div style="border-bottom: 1px solid #ccc"></div> <div style="margin-top: 2rem;"> <pie-center-chart style="width: 100%; height: 100%"></pie-center-chart> </div> </div> <div class="pie"><div class="title">范围三排放</div><div style="border-bottom: 1px solid #ccc;"></div> <div style="margin-top: 2rem;"> <pie-right-chart style="width: 100%; height: 100%"></pie-right-chart> </div> </div> </div> </a-card> </div> </div> </template> <script setup> import PieRightChart from './component/pieRightChart.vue' import PieCenterChart from './component/pieCenterChart.vue' import PieLeftChart from './component/pieLeftChart.vue' import RightBarChart from './component/rightBarChart.vue' import LeftRadarChart from './component/leftRadarChart.vue' const emit = defineEmits({ change: null }) const onClose = () => { emit('change') } </script> <style> .long { display: inline-block; padding-left: 10px; border-left: 5px solid #028c3f; font-size: 18px; /* font-size: 20px; */ } .title { margin: 10px; } .card-pie { display: flex; justify-content: center; height: 50vh; } .pie { background-color: #f5f5f5; flex: 1; width: 30%; height: 45vh; border: 1px solid #ccc; border-radius: 5px; margin: 0 20px 10px 0; } .card2 { margin: 15px; width: 98%; height: 50vh; border-radius: 10px; } .card3 { margin: 15px; width: 98%; height: 55vh; border-radius: 10px; } .second { margin: 15px; display: flex; flex-direction: row; } .left { flex: 1; width: 50%; /* border: 1px solid #ccc; */ height: 45vh; margin: 10px 10px 10px 0; border-radius: 5px; /* box-shadow: 0px 0px 2px 2px #f5ecec; */ } .right { flex: 1; width: 50%; /* border: 1px solid #ccc; */ height: 45vh; margin: 10px 10px 10px 0; } .text5 { font-size: 24px; font-weight: bold; } .text4 { font-size: 18px; } .box { border: 2px solid #41a877; height: 150px; width: 80%; border-radius: 10px; } .text3 { color: white; } .text2 { font-weight: bold; font-size: 24px; color: white; } .span { font-size: 12px; font-weight: 100; } .text { font-size: 18px; color: rgb(231, 227, 227); } .bigbox { align-self: center; width: 90%; background: #efa64a; height: 180px; border-radius: 10px; } .fist { display: flex; background-color: #fff; border-radius: 10px; } .item { flex: 1; /* border: 1px solid #ccc; */ margin: 5px; display: flex; justify-content: center; align-items: center; } </style>View Code
标签:基本,echart,value,name,案例,10px,border,echarts,Echart From: https://www.cnblogs.com/ischengzi/p/17512032.html