vite+vue3+antdesignvue+echarts记录

已于 2024-04-26 20:58:00 修改
阅读量364 收藏 1
点赞数 3
分类专栏： 前端实战练习记录 文章标签： echarts vue.js javascript
于 2024-04-17 21:56:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51666362/article/details/137890335
版权

持续记录

用途：整理自己的一坨代码，从而提升写代码的思路与能力

开始时间：24-04-17

目录

1，echarts图的响应式实现

（1）template部分：给echarts图提供渲染的容器

（2）script部分：功能的实现

（3）css部分 ：（我的盒子大小是确定的）

2，使图表居住显示

实现方式：同理为设置盒子居住，该盒子是- 渲染图表的盒子

3，echarts配置项使用

3.1柱形图

（1）坐标轴显示 与 数据项颜色

3.2桑基图

（1）颜色与起始点颜色一致

(2)nodes属性id和name的使用

3.3折线图

（1）不标记点 + 阴影显示

(2)堆叠＋数据窗口

3.4，饼图

（1）图的位置 + 图例的位置 + emphasis高亮区域的标签样式

（2）tooltip样式

（3）标题与副标题

1，echarts图的响应式实现

（1）template部分：给echarts图提供渲染的容器

  <div class="chart-body" ref="chartContainer"></div>

（2）script部分：功能的实现

import { onMounted, onUnmounted, ref } from 'vue'
import * as echarts from 'echarts'

const chartContainer = ref<HTMLDivElement | null>(null)
let myChart: echarts.ECharts | null = null
var option: echarts.EChartsOption

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
}
// 初始化
const initChart = () => {
  if (chartContainer.value) {
    myChart = echarts.init(chartContainer.value)
    myChart.setOption(option)
  }
}
// 窗口大小变化响应函数
const handleResize = () => {
  if (myChart) {
    myChart.resize()
  }
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})
// 销毁
onUnmounted(() => {
  if (myChart) {
    myChart.dispose()
  }
  window.removeEventListener('resize', handleResize)
})

（3）css部分 ：（我的盒子大小是确定的）

.chart-body{
    width:480px;
    height:560px;

}

在 Vue 3 组件的生命周期中，将事件监听放在 onMounted 钩子中是一种最佳实践；

onMounted 钩子在组件的模板被渲染成真实 DOM 后触发。这意味着在 onMounted 中添加事件监听器可以确保所有的 DOM 元素都已经被正确渲染和初始化，特别是当你需要引用这些 DOM 元素，例如初始化 ECharts 图表时；

在 onMounted 中添加的事件监听器应该在组件销毁时被移除，这通常在 onUnmounted 生命周期钩子中进行。这样的设置创建了一个清晰的生命周期管理模式，即在组件完全可用时设置资源，在组件即将销毁时清理资源，从而有效防止内存泄漏；

2，使图表居住显示

效果图

实现方式：同理为设置盒子居住，该盒子是- 渲染图表的盒子

<template>
  <div class="echarts-container">
    <div id="main" class="table-one"></div>
  </div>
</template>

<style scoped>
.echarts-container {
  display: flex;
  justify-content: center;
  align-items: center;
}


</style>

3，echarts配置项使用

3.1柱形图

（1）坐标轴显示 与 数据项颜色

原本样例图

效果

配置项

option = {
  xAxis: {
   ...
    show:false
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      ...
      type: 'bar',
      itemStyle:{
        color:'red'
      }
    }
  ]
};

完整代码

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    show:false
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      itemStyle:{
        color:'red'
      }
    }
  ]
};

3.2桑基图

（1）颜色与起始点颜色一致

原本样例图

效果：

配置项

option = {
  series: {
    type: 'sankey',
    layout: 'none',
    emphasis: {
      focus: 'adjacency'
    },
    data: [
      {
        name: 'a',
        itemStyle:{
          color:'red'
        }
      },
      {
        name: 'b',
        itemStyle:{
          color:'#0EE0FF'
        }
      },
     ...
    ],
    links: [
      {
        source: 'a',
        target: 'a1',
        value: 5,
        lineStyle:{
          color:'source'
        }
      },
      {
       ...
         lineStyle:{
          color:'source'
        }
      },
      {
       ...
         lineStyle:{
          color:'source'
        }
      },
      {
        ...
         lineStyle:{
          color:'source'
        }
      },
      {
       ...
         lineStyle:{
          color:'source',
          opacity:0.8
        }
      },
      {
       ...
         lineStyle:{
          color:'source',
          opacity:0.8
        }
      }
    ]
  }
};

完整代码

option = {
  series: {
    type: 'sankey',
    layout: 'none',
    emphasis: {
      focus: 'adjacency'
    },
    data: [
      {
        name: 'a',
        itemStyle:{
          color:'red'
        }
      },
      {
        name: 'b',
        itemStyle:{
          color:'#0EE0FF'
        }
      },
      {
        name: 'a1'
      },
      {
        name: 'a2'
      },
      {
        name: 'b1'
      },
      {
        name: 'c'
      }
    ],
    links: [
      {
        source: 'a',
        target: 'a1',
        value: 5,
        lineStyle:{
          color:'source'
        }
      },
      {
        source: 'a',
        target: 'a2',
        value: 3,
         lineStyle:{
          color:'source'
        }
      },
      {
        source: 'b',
        target: 'b1',
        value: 8,
         lineStyle:{
          color:'source'
        }
      },
      {
        source: 'a',
        target: 'b1',
        value: 3,
         lineStyle:{
          color:'source'
        }
      },
      {
        source: 'b1',
        target: 'a1',
        value: 1,
         lineStyle:{
          color:'source',
          opacity:0.8
        }
      },
      {
        source: 'b1',
        target: 'c',
        value: 2,
         lineStyle:{
          color:'source',
          opacity:0.8
        }
      }
    ]
  }
};

(2)nodes属性id和name的使用

使用nodes属性中的id ，id来作为连接点的标识，name为显示的文本内容。

代码待补充

3.3折线图

（1）不标记点 + 阴影显示

原本样例图

效果

配置项

option = {
  xAxis: {
   ...
  },
  yAxis: {
   ...
  },
  series: [
    {
      ...
      type: 'line',
      smooth: true,
      // 阴影面积
      areaStyle:{
        opacity: 0.5
      },
      // 不标记点
      showSymbol:false,
      // 曲线宽度
      lineStyle:{
        width:2
      },
      
    }
  ]
};

完整代码

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      // 阴影面积
      areaStyle:{
        opacity: 0.5
      },
      // 不标记点
      showSymbol:false,
      // 曲线宽度
      lineStyle:{
        width:2
      },
      
    }
  ]
};

(2)堆叠＋数据窗口

原本样例图

效果图-slider类型

配置项-slider为例

option = {
  ...
  grid: {
    ...
    bottom:'20%',
    ...
  },
 ...
 
  dataZoom:  {
      type:'slider',
      start:0,
      end:40
    }
  
 ...
};

完成代码-silder

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom:'20%',//给下面的数据窗口留下足够的空间
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  },
  yAxis: {
    type: 'value'
  },
 
  dataZoom:[
  
    {
      type:'slider',
      start:0,
      end:40
    }
  
    ],
 
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290]
    }
  ]
};

效果-inside

完整代码-inside

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom:'20%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  },
  yAxis: {
    type: 'value'
  },
 
  dataZoom: {  
      type: 'inside',
      start:0,
      end:60,
},
   
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290]
    }
  ]
};

3.4，饼图

（1）图的位置 + 图例的位置 + emphasis高亮区域的标签样式

效果图

1）图的位置控制代码

 series: [
    {
      ...
      ...
      center:['30%','50%'],
]

2）图例的位置+图例文本渲染formatter

legend:{
        orient:'vertical',
        itemGap:20,
        right:'10%',
        top:'40%',
        icon:'circle',
        formatter:(name)=>{
         let total =0;
         let target;
         for(let i = 0;i<data.length;i++){
           total += data[i].value;
           if(data[i].name === name){
             target = data[i].value;
           }
         }
          
        let v = ((target/total)*100)
        return name + `   ${v}%`;
        }
 },

3）emphasis高亮区域的标签样式 formatter + rich富文本样式

  label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontWeight: 'bold',
          formatter: '{active|{d}%}' + '\n\r' + '{total| {b} }',
          rich: {
            total: {
              fontSize: 15,
              color: '#454c5c',
            },
            active: {
              fontSize: 28,
              color: '#000000',
              lineHeight: 50,
              fontWeight: 'bold',
            },
          },
        },
      },

（2）tooltip样式

效果图

代码

tooltip:{
    trigger:'item',
    formatter:'{a} <br/> {b} : {c} ({d}%)'
  },

完整代码

 data= [
        { value: 20, name: 'Search Engine' },
        { value: 20, name: 'Direct' },
        { value: 20, name: 'Email' },
        { value: 40, name: 'Union Ads' },
      ]
option = {
  color: ['#FC0606', '#FF8228', "#baf", '#67C23A'],
  itemStyle: {
    borderColor: '#fff',
    borderWidth: 1,
  },
    tooltip:{
    trigger:'item',
    formatter:'{a} <br/> {b} : {c} ({d}%)'
  },
   legend:{
        orient:'vertical',
        itemGap:20,
        right:'10%',
        top:'40%',
        icon:'circle',
        formatter:(name)=>{
         let total =0;
         let target;
         for(let i = 0;i<data.length;i++){
           total += data[i].value;
           if(data[i].name === name){
             target = data[i].value;
           }
         }
          
        let v = ((target/total)*100)
        return name + `   ${v}%`;
        }
      },
  series: [
    {
      name: '状态统计',
      type: 'pie',
      radius: ['55%', '70%'],
      center:['30%','50%'],
      avoidLabelOverlap: false,
      padAngle: 1,
        label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontWeight: 'bold',
          formatter: '{active|{d}%}' + '\n\r' + '{total| {b} }',
          rich: {
            total: {
              fontSize: 15,
              color: '#454c5c',
            },
            active: {
              fontSize: 28,
              color: '#000000',
              lineHeight: 50,
              fontWeight: 'bold',
            },
          },
        },
      },
     
      data
    },
  ],
}

（3）标题与副标题

效果图

代码

  title:[
    {
      text:' 标题 \n 100',
      top:'48%',
      left:'45%',
      x:'center',
      y:'center',
     
    },
     {
      subtext:'副标题',
      top:'90%',
      left:'45%',
      x:'center',
      y:'center'
    }
    ],

即将开启笔记2

又是思考加苦恼的一天。

24-04-19

今日问题：怎样去评估自己是否有进步呢？

24-04-26

今天也力扣了吗？
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
全栈开发实战技术分享 前端:Vite3+Vue3+TS+Ant-design-vue3 后端:SpringBoot+MybatisPlus+Mysql
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
Vite+Vue3.0项目使用ant-design-vue ＜a-calendar＞日期组件汉化
xxx割喉的博客
04-08 1153
【代码】Vite+Vue3.0项目使用ant-design-vue 日期组件汉化。
vue3.0+vite+ant-design-vue 按需加载（组件模块）
weixin_45152848的博客
02-24 1239
vue3.0+ant-design-vue+vite 按需加载
在Ant Design (VUE)中使用ECharts
weixin_39277183的博客
03-09 1万+
1.安装echarts依赖 npm install echarts --save 安装完依赖后在package.json文件看到echarts相对应的版本号 2.在main.js中全局中引用 import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.在你需要用到echart的地方先设置一个div的...
OpenLayers （ol包），Vite显示地图（附源码）
Nashomon的博客
01-30 1939
用OpenLayers，ol包，vite 显示地图的步骤，附源码。
Vite + Vue3 + OpenLayers 同步两个地图基础操作
weixin_39415598的博客
09-24 599
Vite + Vue3 + OpenLayers 同步两个地图基础操作 一、本文简介 Vite + Vue3 + OpenLayers 同步两个地图基础操作 两个独立的容器，使用了不同的图源。但不管操作哪个容器的地图，另一个也会跟着变化。 二、开发环境 Vite + Vue3 + ol6 # 1、使用 Vite 创建项目；取个好听的项目名；拉取 vue 的代码模板 npm ...
Vue+Ant Design of Vue+ECharts 图表跟随父元素的宽高变化重新渲染-resize()/element-resize-detector/ResizeObserver-附完整示例
m0_48968874的博客
12-04 2145
目录效果一、介绍 1、官方文档（1）Ant Design Vue（2）echarts（3）element-resize-detector（4）Resize Observer 二、准备工作1、安装依赖包 2、示例版本 三、使用步骤1、ant-design-vue 1.1、在main.ts引入2、ecahrts 2.1、在单页面引入 ' echarts ' 2.2、指定容器并设置容器宽高3、resize 3.1、window的resize事件注：有局限性，
Vue3+Vite+Ant Design 后台管理系统模板.zip
07-06
Vue3+Vite+Ant Design 后台管理系统模板.zip
基于vite2.x + vue3.x + ant-design-vue3.x + typescript基础后台管理系统模板
07-08
基于vite2.x + vue3.x + ant-design-vue3.x + typescript基础后台管理系统模板
electron+vite+vue3+sqlite3基础框架
12-14
这是一个electron+vite+vue3+sqlite3基础框架，里面都已配置好，开箱即用，压缩包中写了详细的使用说明
vite+vue3+ant-design-vue开发项目，配置系统和菜单及顶部导航局部主题
最新发布
weixin_47389477的博客
05-30 382
根据公司的要求，在一个创建的基础的系统上加入系统主题（实现白天和黑夜的系统主题切换，另外在暗黑主题下，局部主题不用生效，在默认主题下【白天主题】可以自定义局部主题）到此项目算是达到需求要求，创作不易，欢迎关注。
Vue 3 + Vite + Antdv项目创建
Ma_jiao的博客
06-25 1258
在终端执行命令。
【前端】（失败）尝试使用vite4+vue2+antd来进行前端页面编写
2301_76933862的博客
09-12 264
老老实实用vite+vue3吧， 甚至vite-react的组合都比vite-vue2强。动手能力强的自己克隆仓库进行修改也行。
如何在 Vue 3 中使用 Ant Design
热门推荐
分享身边生活经验blog
10-21 1万+
Ant Design 是一个开源库，可让您创建吸引人的响应式网站。如果您想使用经过充分测试且易于学习的框架，那么它是您下一个项目的绝佳选择。另一方面，Vue.js 是一个用于创建用户界面的渐进式框架。它旨在易于学习，同时具有灵活性和可定制性。将这两者结合使用可以让您比以往更快地创建响应式网站。Ant Design 和 Vue 3 中包含的 Composition API 使得在编写有限代码的同时创建美观、响应迅速且可扩展的应用程序变得简单。
vue3中echarts的使用
qq_46617584的博客
07-19 217
【代码】vue3中echarts的使用。
ant design +vue关于二级弹框添加echart图不显示的问题
Sara0064的博客
12-17 1509
如果你执着修复一个bug并且没有思路，那就请教一下身边的人，我也希望好好努力，去寻找一个志同道合的团队。 效果是这样，二级弹框中点击查看结果，出现表格数据和词云echarts，可是我怎么都出现不了，刚开始报错 就是用js用获取绘制的echarts图时，获取的id是html的dom没有渲染，所以解析不出来。因为在二级弹框里，所以刚开始加载页面的时候，弹框也没有打开，就找不到弹框相应的id,所以渲...
vite + vue3 + Antd 搭建后台管理系统
m0_58094704的博客
11-14 1933
vite + vue3 + Antd 搭建后台管理系统
vite+vue3+antdesignvue
07-31
Vite是一个基于ES模块的构建工具，用于快速构建现代化的Web应用程序。Vue3是一种流行的JavaScript框架，用于构建用户界面。Ant Design Vue是一个基于Vue的UI组件库，提供了丰富的可重用组件和样式。在使用Vite和Vue3创建项目时，可以选择使用Ant Design Vue作为UI组件库。 首先，你需要确保你的Node.js版本大于等于14.18.0，因为Vite需要这个版本以上的Node.js才能正常运行。如果你的Node.js版本较低，你需要升级到14.18.0或更高版本。 接下来，你可以使用NPM或Yarn来安装Vite并创建一个Vue3项目。使用以下命令： 使用NPM： ``` npm init vite@latest my-vue-app -- --template vue ``` 使用Yarn： ``` yarn create vite my-vue-app -- --template vue ``` 在下载过程中，你需要选择使用的语言和版本。下载完成后，你可以启动项目。在项目的`package.json`文件中，你可以找到以下脚本： ``` "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" } ``` 使用以下命令启动项目： ``` npm run dev ``` 启动后，你将看到一个基本的Vue3模板，名为"Hello Vue3"。该模板没有引用太多的插件，你可以根据需要自行安装。 对于Ant Design Vue的配置，你需要先安装它的插件。使用以下命令安装： ``` npm i --save ant-design-vue ``` 在`main.js`文件中引入Ant Design Vue： ```javascript import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; createApp(App).use(Antd).mount('#app') ``` 如果你还需要使用路由插件，可以使用以下命令安装Vue Router 4： ``` npm install vue-router@4 ``` 这样，你就完成了Vite和Vue3项目的配置。记得切换到项目目录并安装相关依赖，然后运行项目： ``` cd my-vue-app npm install npm run dev ``` 这样，你就可以开始使用Vite、Vue3和Ant Design Vue来开发你的项目了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值