脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 封装公用Echarts图表组件

封装一个公用Echarts图表组件的3种模板代码示例

 更新时间：2024年02月04日 08:51:43   作者：禾小毅  
这篇文章主要给大家介绍了关于封装一个公用Echarts图表组件的3种模板,定义图表公共样式是为了统一同一网站各页面图表的基础样式,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、安装echarts

npm install echarts --save

二、在需要的页面引入

import * as echarts from "echarts"

三、创建组件

1、模板1：vue2+javascript

<template>
    <div>
        <div class="echart_size" :id="id"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    props: {
        // 接收的参数
        id: {
            type: String,
            default: ''
        },
        datas: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            // 变量
        }
    },
    created() {
        this.$nextTick(() => {
            this.barBtn()
        })
    },
    methods: {
        barBtn() {
            // 实例化对象
            let myCharts = echarts.init(document.getElementById(this.id))
            // 指定配置项和数据
            let option = {
                // 某图表
            }
            // 把配置项给实例对象
            myCharts.setOption(option)
            // 让图表跟随屏幕自动的去适应
            window.addEventListener('resize', function () {
                myCharts.resize()
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.echart_size{
    width: 500px;
    height: 500px;
}
</style>

2、模板2：vue3+javascript

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

const myCharts = shallowRef()
<template>
    <div class="echart_size" :id="props.id"></div>
</template>

<script setup>
import { reactive, ref, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
    id: {
        type: String,
        required: true
    },
    datas:{
        type: Array,
        required: true
    }
})

let person=reactive({
    // 初始变量
})

onMounted(()=>{
    GetEchar()
})

const GetEchar = () => {
    const myCharts = ref()
    nextTick(() => {
        myCharts.value = echarts.init(document.getElementById(props.id))
        let option = {
           // 某图表
        };
        myCharts.value.setOption(option)
        // 让图表跟随屏幕自动的去适应
        window.addEventListener('resize', function () {
            myCharts.value.resize()
        })
    })
}

</script>

<style lang="scss" scoped>
.echart_size {
    width: 100%;
    height: 100%;
}
</style>

3、模板3：vue3+typescript

<template>
    <div class="echart_size" :id="props.id"></div>
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts'
let person: any = reactive({
    // 初始变量
})
type Props = {
    id: string
}
const props = withDefaults(defineProps<Props>(), {})

onMounted(()=>{
    GetEchar()
})
const GetEchar = () => {
    const myChart = ref<HTMLElement>()
    const myCharts = ref<any>()
    nextTick(() => {
        const chartDom = document.getElementById(props.id)!
        myCharts.value = echarts.init(chartDom)
        let option = {
           
        };
        myCharts.value.setOption(option)
        // 让图表跟随屏幕自动的去适应
        window.addEventListener('resize', function () {
            myCharts.value.resize()
        })
    })
}

</script>

<style lang="scss" scoped>
.echart_size {
    width: 500px;
    height: 500px;
}
</style>

四、页面调用

1、vue2

<template>
  <div>
    <EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" />
  </div>
</template>

<script>
  import EchartModule from '@/components/echartModule'
  export default {
    components: {EchartModule},
    data(){
      return{
        data: [
            { value: 0, label: '测试1' },
            { value: 1, label: '测试2' }
        ]
      }
    }
  }
</script>

2、vue3+js

<template>
   <EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" />
</template>

<script setup>
import { reactive } from 'vue'
import EchartModule from '@/components/echartModule'
let person=reactive({
  data:[
     { value: 0, label: '测试1' },
     { value: 1, label: '测试2' }
  ]
})
</script>

3、vue3+ts

// vue3+ts
<template>
   <EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" />
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import EchartModule from '@/components/echartModule'
let person:any=reactive({
  data:[
     { value: 0, label: '测试1' },
     { value: 1, label: '测试2' }
  ]
})
</script>

五、Echarts 常用的相关事件

1、鼠标单击/左键事件

//vue2
myCharts.on('click', function(e) {})

// vue3
myCharts.value.on('click', function(e) {})

2、鼠标移入/进入事件

//vue2
myCharts.on('mouseover', function(e) {})

// vue3
myCharts.value.on('mouseover', function(e) {})

3、鼠标移出/离开事件

//vue2
myCharts.on('mouseout', function(e) {})

// vue3
myCharts.value.on('mouseout', function(e) {})

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

window.addEventListener('resize', function () {
   // vue2
   myCharts.resize()
   // vue3
   myCharts.value.resize()
})

5、轮播动画效果

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

// vue2
myChart.currentIndex = -1;

setInterval(function () {
  var dataLen = option.series[0].data.length;
  // 取消之前高亮的图形
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: myChart.currentIndex
  });
  myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
  // 高亮当前图形
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: myChart.currentIndex
  });
  // 显示 tooltip
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: myChart.currentIndex
  });
}, 2000);

6、dispatchAction 行为事件

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

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

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

（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的公共属性配置

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

（2）trigger 类型为 item

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

（3）trigger 类型为 axis

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

2、axisPointer 坐标指示器

（1）type 类型为 shadow

axisPointer: {
    type: 'shadow',
    label: { show: true, backgroundColor: 'transparent' },
    shadowStyle: {
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
                { offset: 0, color: 'rgba(100, 101, 171, 0)' },
                { offset: 0.5, color: 'rgba(100, 101, 171, 0.2)' },
                { offset: 0.999999, color: 'rgba(100, 101, 171, 1)' },
                { offset: 1, color: 'rgba(100, 101, 171, 1)' },
            ],
            global: false
        }
    }
}

（2）type 类型为 line

axisPointer: {
    type: 'line',
    label: { show: true, backgroundColor: 'transparent' },
    lineStyle: {
      color: {
         type: 'linear',
         x: 0,
         y: 0,
         x2: 0,
         y2: 1,
         colorStops: [
            { offset: 0, color: 'rgba(100, 101, 171, 0)' },
            { offset: 0.5, color: 'rgba(100, 101, 171, 0.2)' },
            { offset: 0.999999, color: 'rgba(100, 101, 171, 1)' },
            { offset: 1, color: 'rgba(100, 101, 171, 1)' }
        ],
        global: false
      },
      type: 'solid',
      width: 10
    }
}

3、渐变处理

（1）线性渐变区域 LinearGradient

 // 前四个分参数分别代表右，下，左，上，数值0-1
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  {
	offset: 0,
	color: 'blue'
  },
  {
	offset: 1,
	color: 'red'
  }
])

（2）径向渐变区域 RadialGradient

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

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

// x,y,x2,y2数值同LinearGradient前四个参数分别代表右，下，左，上，数值0-1
color: {
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [
   {
	 offset: 0,
	 color: 'blue'
   },
   {
	 offset: 1,
	 color: 'red'
   }
  ],
  global: false // 缺省为 false
}

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

// x 0.5 y 0.5 代表圆心，r 代表半径
color: {
  type: 'radial',
  x: 0.5,
  y: 0.5,
  r: 0.9,
  colorStops: [
	{
	  offset: 0,
	  color: 'blue'
    },
    {
	  offset: 1,
	  color: 'red'
    }
  ],
  global: false // 缺省为 false
}

（5）纹理填充 color-image

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

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

label: {
  show: true,
  formatter: `\n{d|{d}} {unit|${props.unit}}`,
  rich: {
    d: {
      fontSize: 26,
      fontWeight: 600,
      color: "#000"
    },
    unit: {
      fontSize: 20,
      fontWeight: 600,
      color: "#3C3B3B"
    }
  },
  color: "#000"
}

总结 

到此这篇关于封装一个公用Echarts图表组件的3种模板的文章就介绍到这了,更多相关封装公用Echarts图表组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript TypeScript实现贪吃蛇游戏完整详细流程

    JavaScript TypeScript实现贪吃蛇游戏完整详细流程

    这篇文章主要介绍了JavaScript TypeScript实现贪吃蛇游戏流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-09-09
  • 浅析如何利用JavaScript进行语音识别

    浅析如何利用JavaScript进行语音识别

    所谓语音识别就是将你所说的转化成文字。Chrome 浏览器在版本25之后开始对这一特性的支持。这篇文章将会详细的介绍如何使用JavaScript进行语音识别，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
    2016-10-10
  • Javascript自定义排序 node运行 实例

    Javascript自定义排序 node运行 实例

    Javascript自定义排序 node运行 实例，需要的朋友可以参考一下
    2013-06-06
  • 使用JavaScript实现一个录屏插件

    使用JavaScript实现一个录屏插件

    不知道大家平时都是使用什么录屏软件呢,有没有想过只用JavaScript我们也可以快速实现一个录屏插件呢,感兴趣的小伙伴就跟随小编一起学习一下吧
    2024-10-10
  • 28个JS常用数组方法总结

    28个JS常用数组方法总结

    最近面试有道题是至少写出 15 个数组方法，数组方法平时经常用到的也就6-7个，突然要一下子写出15个，还是有点卡壳了，今天整理一波，需要的可以参考一下
    2022-05-05
  • JS实现带提示的星级评分效果完整实例

    JS实现带提示的星级评分效果完整实例

    这篇文章主要介绍了JS实现带提示的星级评分效果,以完整实例形式较为详细的分析了JavaScript响应鼠标事件动态变换页面元素样式的相关技巧,非常简单实用的代码,需要的朋友可以参考下
    2015-10-10
  • js获取隐藏元素宽高的实现方法

    js获取隐藏元素宽高的实现方法

    下面小编就为大家带来一篇js获取隐藏元素宽高的实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JS实现动态星空背景效果

    JS实现动态星空背景效果

    这篇文章主要为大家详细介绍了JS实现动态星空背景效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • 一次Webpack配置文件的分离实战记录

    一次Webpack配置文件的分离实战记录

    这篇文章主要给大家介绍了关于一次Webpack配置文件的分离实战记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • Bootstrap模态框插件使用详解

    Bootstrap模态框插件使用详解

    这篇文章主要为大家详细介绍了Bootstrap模态框插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论