Echart基本案例

一、静态效果图

 二，前期需要

2.1、vue3项目，Echart引入

2.2、原理解释略

案例代码1：

<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>

代码案例2：

<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>

代码案例3：

<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>

代码案例4：

<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>

代码案例5：

<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>

首页：

<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>