devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

封装一个公用的【Echarts图表组件】的3种模板_echarts模板

作者：凡人多烦事01 | 2024-06-10 13:26:03

赞

踩

echarts模板

一、安装echarts

npm install echarts --save

二、在需要的页面引入

import * as echarts from "echarts"

三、创建组件

1、模板1：vue2+javascript

  1. <template>
  2.     <div>
  3.         <div class="echart_size" :id="id"></div>
  4.     </div>
  5. </template>
  6. <script>
  7. import * as echarts from 'echarts'
  8. export default {
  9.     props: {
  10.         // 接收的参数
  11.         id: {
  12.             type: String,
  13.             default: ''
  14.         },
  15.         datas: {
  16.             type: Array,
  17.             default: () => []
  18.         }
  19.     },
  20.     data() {
  21.         return {
  22.             // 变量
  23.         }
  24.     },
  25.     created() {
  26.         this.$nextTick(() => {
  27.             this.barBtn()
  28.         })
  29.     },
  30.     methods: {
  31.         barBtn() {
  32.             // 实例化对象
  33.             let myCharts = echarts.init(document.getElementById(this.id))
  34.             // 指定配置项和数据
  35.             let option = {
  36.                 // 某图表
  37.             }
  38.             // 把配置项给实例对象
  39.             myCharts.setOption(option)
  40.             // 让图表跟随屏幕自动的去适应
  41.             window.addEventListener('resize', function () {
  42.                 myCharts.resize()
  43.             })
  44.         }
  45.     }
  46. }
  47. </script>
  48. <style lang="scss" scoped>
  49. .echart_size{
  50.     width: 500px;
  51.     height: 500px;
  52. }
  53. </style>

2、模板2：vue3+javascript

vue3中，有的图表调用不到，初始化echarts时使用 shallowRef

const myCharts = shallowRef()
  1. <template>
  2.     <div class="echart_size" :id="props.id"></div>
  3. </template>
  4.  
  5. <script setup>
  6. import { reactive, ref, nextTick, onMounted } from 'vue'
  7. import * as echarts from 'echarts'
  8. const props = defineProps({
  9.     id: {
  10.         type: String,
  11.         required: true
  12.     },
  13.     datas:{
  14.         type: Array,
  15.         required: true
  16.     }
  17. })
  18.  
  19. let person=reactive({
  20.     // 初始变量
  21. })
  22.  
  23. onMounted(()=>{
  24.     GetEchar()
  25. })
  26.  
  27. const GetEchar = () => {
  28.     const myCharts = ref()
  29.     nextTick(() => {
  30.         myCharts.value = echarts.init(document.getElementById(props.id))
  31.         let option = {
  32.            // 某图表
  33.         };
  34.         myCharts.value.setOption(option)
  35.         // 让图表跟随屏幕自动的去适应
  36.         window.addEventListener('resize', function () {
  37.             myCharts.value.resize()
  38.         })
  39.     })
  40. }
  41.  
  42. </script>
  43.  
  44. <style lang="scss" scoped>
  45. .echart_size {
  46.     width: 100%;
  47.     height: 100%;
  48. }
  49. </style>

3、模板3：vue3+typescript

  1. <template>
  2.     <div class="echart_size" :id="props.id"></div>
  3. </template>
  4.  
  5. <script lang="ts" setup>
  6. import { reactive, ref, nextTick, onMounted } from 'vue'
  7. import * as echarts from 'echarts'
  8. let person: any = reactive({
  9.     // 初始变量
  10. })
  11. type Props = {
  12.     id: string
  13. }
  14. const props = withDefaults(defineProps<Props>(), {})
  15.  
  16. onMounted(()=>{
  17.     GetEchar()
  18. })
  19. const GetEchar = () => {
  20.     const myChart = ref<HTMLElement>()
  21.     const myCharts = ref<any>()
  22.     nextTick(() => {
  23.         const chartDom = document.getElementById(props.id)!
  24.         myCharts.value = echarts.init(chartDom)
  25.         let option = {
  26.            
  27.         };
  28.         myCharts.value.setOption(option)
  29.         // 让图表跟随屏幕自动的去适应
  30.         window.addEventListener('resize', function () {
  31.             myCharts.value.resize()
  32.         })
  33.     })
  34. }
  35.  
  36. </script>
  37.  
  38. <style lang="scss" scoped>
  39. .echart_size {
  40.     width: 500px;
  41.     height: 500px;
  42. }
  43. </style>

四、页面调用

1、vue2

  1. <template>
  2.   <div>
  3.     <EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" />
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8.   import EchartModule from '@/components/echartModule'
  9.   export default {
  10.     components: {EchartModule},
  11.     data(){
  12.       return{
  13.         data: [
  14.             { value: 0, label: '测试1' },
  15.             { value: 1, label: '测试2' }
  16.         ]
  17.       }
  18.     }
  19.   }
  20. </script>

2、vue3+js

  1. <template>
  2.    <EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" />
  3. </template>
  4.  
  5. <script setup>
  6. import { reactive } from 'vue'
  7. import EchartModule from '@/components/echartModule'
  8. let person=reactive({
  9.   data:[
  10.      { value: 0, label: '测试1' },
  11.      { value: 1, label: '测试2' }
  12.   ]
  13. })
  14. </script>

3、vue3+ts

  1. // vue3+ts
  2. <template>
  3.    <EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" />
  4. </template>
  5.  
  6. <script lang="ts" setup>
  7. import { reactive } from 'vue'
  8. import EchartModule from '@/components/echartModule'
  9. let person:any=reactive({
  10.   data:[
  11.      { value: 0, label: '测试1' },
  12.      { value: 1, label: '测试2' }
  13.   ]
  14. })
  15. </script>

五、Echarts 常用的相关事件

1、鼠标单击/左键事件

  1. //vue2
  2. myCharts.on('click', function(e) {})
  3.  
  4. // vue3
  5. myCharts.value.on('click', function(e) {})

2、鼠标移入/进入事件

  1. //vue2
  2. myCharts.on('mouseover', function(e) {})
  3.  
  4. // vue3
  5. myCharts.value.on('mouseover', function(e) {})

3、鼠标移出/离开事件

  1. //vue2
  2. myCharts.on('mouseout', function(e) {})
  3.  
  4. // vue3
  5. myCharts.value.on('mouseout', function(e) {})

4、让图表跟随屏幕去自适应

  1. window.addEventListener('resize', function () {
  2.    // vue2
  3.    myCharts.resize()
  4.    // vue3
  5.    myCharts.value.resize()
  6. })

5、轮播动画效果

需要配置tooltip参数使用，显示tooltip提示框的轮播动画

  1. // vue2
  2. myChart.currentIndex = -1;
  3.  
  4. setInterval(function () {
  5.   var dataLen = option.series[0].data.length;
  6.   // 取消之前高亮的图形
  7.   myChart.dispatchAction({
  8.     type: 'downplay',
  9.     seriesIndex: 0,
  10.     dataIndex: myChart.currentIndex
  11.   });
  12.   myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
  13.   // 高亮当前图形
  14.   myChart.dispatchAction({
  15.     type: 'highlight',
  16.     seriesIndex: 0,
  17.     dataIndex: myChart.currentIndex
  18.   });
  19.   // 显示 tooltip
  20.   myChart.dispatchAction({
  21.     type: 'showTip',
  22.     seriesIndex: 0,
  23.     dataIndex: myChart.currentIndex
  24.   });
  25. }, 2000);

6、dispatchAction 行为事件

具体用法参考 echarts 下的 action：https://echarts.apache.org/zh/api.html#action

（1）highlight：高亮指定的数据图形

  1. myCharts.currentIndex = -1
  2. myCharts.dispatchAction({
  3.     type: 'highlight',
  4.     seriesIndex: 0,
  5.     dataIndex: myCharts.currentIndex
  6. });

（2）downplay：取消高亮指定的数据图形

（3）select：选中指定的数据

（4）unselect：取消选中指定的数据

（5）toggleSelect：切换选中状态

（6）tooltip - showTip：显示提示框

（7）tooltip - hideTip：隐藏提示框

（8）dataZoom - dataZoom：数据区域缩放

（9）geo - geoSelect：选中指定的地图区域

（10）geo - geoUnSelect：取消选中指定的地图区域

（11）geo - geoToggleSelect：切换指定的地图区域选中状态

六、Echarts 常用的相关配置

1、tooltip 提示框

（1）tooltip的公共属性配置

  1. tooltip: {
  2.   position:'right',
  3.   padding: [5,8],
  4.   textStyle:{
  5.       color: '#eee',
  6.       fontSize: 13
  7.   },
  8.   backgroundColor: "rgba(13,5,30,.5)",
  9.   extraCssText:'z-index:1', // 层级
  10.   axisPointer: {}
  11. }

（2）trigger 类型为 item

  1. tooltip: {
  2.   trigger: 'item',
  3.   formatter: function(param) {
  4.       let resultTooltip =
  5.           "<div style='border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
  6.           "<div>" + param.name + "</div>" +
  7.           "<div style='padding-top:5px; font-size:10px;color:#999;'>" +
  8.           "<span style='display: inline-block; width: 10px; height:10px; border-radius: 50%;background-color: " + param.color + ";'></span>" +
  9.           "<span style=''> " + param.seriesName + "：</span>" +
  10.           "<span style='font-size:16px;color:" + param.color + "'>" + param.value + "</span></span>" +
  11.           "</div>";
  12.       return resultTooltip
  13.   }
  14. }

（3）trigger 类型为 axis

  1. tooltip: {
  2.   trigger: 'axis',
  3.   formatter: function(param) {
  4.     let resultTooltip =
  5.         "<div style='border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
  6.         "<div>" + param[0].name + "</div>" +
  7.         "<div style='padding-top:5px; font-size:10px;color:#999;'>" +
  8.         "<span style='display: inline-block; width: 10px; height:10px; border-radius: 50%;background: " + param[0].color + ";'></span>" +
  9.         "<span style=''> " + param[0].seriesName + "：</span>" +
  10.         "<span style='font-size:16px;color:" + param[0].color + "'>" + param[0].value + "</span></span>" +
  11.         "</div>";
  12.     return resultTooltip
  13.   }
  14. }

2、axisPointer 坐标指示器

（1）type 类型为 shadow

  1. axisPointer: {
  2.     type: 'shadow',
  3.     label: { show: true, backgroundColor: 'transparent' },
  4.     shadowStyle: {
  5.         color: {
  6.             type: 'linear',
  7.             x: 0,
  8.             y: 0,
  9.             x2: 0,
  10.             y2: 1,
  11.             colorStops: [
  12.                 { offset: 0, color: 'rgba(100, 101, 171, 0)' },
  13.                 { offset: 0.5, color: 'rgba(100, 101, 171, 0.2)' },
  14.                 { offset: 0.999999, color: 'rgba(100, 101, 171, 1)' },
  15.                 { offset: 1, color: 'rgba(100, 101, 171, 1)' },
  16.             ],
  17.             global: false
  18.         }
  19.     }
  20. }

（2）type 类型为 line

  1. axisPointer: {
  2.     type: 'line',
  3.     label: { show: true, backgroundColor: 'transparent' },
  4.     lineStyle: {
  5.       color: {
  6.          type: 'linear',
  7.          x: 0,
  8.          y: 0,
  9.          x2: 0,
  10.          y2: 1,
  11.          colorStops: [
  12.             { offset: 0, color: 'rgba(100, 101, 171, 0)' },
  13.             { offset: 0.5, color: 'rgba(100, 101, 171, 0.2)' },
  14.             { offset: 0.999999, color: 'rgba(100, 101, 171, 1)' },
  15.             { offset: 1, color: 'rgba(100, 101, 171, 1)' }
  16.         ],
  17.         global: false
  18.       },
  19.       type: 'solid',
  20.       width: 10
  21.     }
  22. }

3、渐变处理

（1）线性渐变区域 LinearGradient

  1.  // 前四个分参数分别代表右，下，左，上，数值0-1
  2. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  3.   {
  4. 	offset: 0,
  5. 	color: 'blue'
  6.   },
  7.   {
  8. 	offset: 1,
  9. 	color: 'red'
  10.   }
  11. ])

（2）径向渐变区域 RadialGradient

  1. // 前三个分参数分别代表圆心（x,y），半径（数值0-1）
  2. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [
  3.   {
  4. 	offset: 0,
  5. 	color: 'blue'
  6.   },
  7.   {
  8. 	offset: 1,
  9. 	color: 'red'
  10.   }
  11. ])

（3）线性渐变区域 colorStops-linear

  1. // x,y,x2,y2数值同LinearGradient前四个参数分别代表右，下，左，上，数值0-1
  2. color: {
  3.   type: 'linear',
  4.   x: 0,
  5.   y: 0,
  6.   x2: 0,
  7.   y2: 1,
  8.   colorStops: [
  9.    {
  10. 	 offset: 0,
  11. 	 color: 'blue'
  12.    },
  13.    {
  14. 	 offset: 1,
  15. 	 color: 'red'
  16.    }
  17.   ],
  18.   global: false // 缺省为 false
  19. }

（4）径向渐变区域 colorStops-radial

  1. // x 0.5 y 0.5 代表圆心，r 代表半径
  2. color: {
  3.   type: 'radial',
  4.   x: 0.5,
  5.   y: 0.5,
  6.   r: 0.9,
  7.   colorStops: [
  8. 	{
  9. 	  offset: 0,
  10. 	  color: 'blue'
  11.     },
  12.     {
  13. 	  offset: 1,
  14. 	  color: 'red'
  15.     }
  16.   ],
  17.   global: false // 缺省为 false
  18. }

（5）纹理填充 color-image

  1. let url= "../../static/bg_icon.png"
  2. color: {
  3.   image: url, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
  4.   repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
  5. }

4、label中文字通过rich自定义样式设置

  1. label: {
  2.   show: true,
  3.   formatter: `\n{d|{d}} {unit|${props.unit}}`,
  4.   rich: {
  5.     d: {
  6.       fontSize: 26,
  7.       fontWeight: 600,
  8.       color: "#000"
  9.     },
  10.     unit: {
  11.       fontSize: 20,
  12.       fontWeight: 600,
  13.       color: "#3C3B3B"
  14.     }
  15.   },
  16.   color: "#000"
  17. }

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号