vue3封装Apache ECharts组件使用

原创已于 2024-06-12 10:18:04 修改 · 257 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#apache #echarts #前端

于 2023-09-09 14:50:35 首次发布

本文介绍了如何在Vue3项目中使用Apache ECharts进行可视化图表的封装。首先，通过cnpm安装echarts和echarts-liquidfill模块。接着，详细讲解了如何在组件中正确导入并使用这两个模块，特别强调了在nextTick或挂载后函数中操作DOM的重要性。然后，展示了option对象配置表格样式的例子。最后，说明了父组件如何引入并传参给ECharts封装组件。

可视化图表插件Apache ECharts基础使用

图表资源网站：Examples - Apache ECharts

中文文档地址：在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts

1、下载模块：

cnpm install echarts --save

cnpm install echarts-liquidfill --save

2、封装组件导入模块使用：因为要获取Dom元素，所以要在nextTick函数或者挂载后函数里写操作：echart.vue

import * as echarts from 'echarts';

import 'echarts-liquidfill'

import { getCurrentInstance, onMounted, reactive } from 'vue';



// 基于准备好的dom，初始化echarts实例

let that = getCurrentInstance()

 //接收父元素的option数据

let props = defineProps({

 option: {

  type: Object,

  default: {}

 },

 height: {

  type: Number,

  default: 180

 },

})

 //option就是表格的数据参数和样式，不同的option，表格不同

let option = props.option



onMounted(() => {

  // 基于准备好的dom，初始化echarts实例

 let myChart = echarts.init(that.refs.echart);

  // 使用刚指定的配置项和数据显示图表。

 myChart.setOption(option);

 window.addEventListener("resize", function () {

  myChart.resize();

 });

})



html：

` <div class="boxnav" ref="echart" :style="{ height: height + 'px' }"></div>`

3、option对象的其中一种表格的参数和样式：

let option6 = reactive({

 tooltip: {

  trigger: 'axis',

  axisPointer: {

   type: 'shadow'

  }

 },

 color: ["#248ff7", '#64cd84'],

 legend: {

  data: ['系统外部', '系统内部'],

  left: 'center',

  color: "#fff",

  itemWidth: 15,

  itemHeight: 10,

 },

 grid: {

  left: '0',

  top: '30',

  right: '10',

  bottom: '0',

  containLabel: true

 },



 xAxis: [{

  type: 'category',

  // boundaryGap: false,

  data: ['1', '2', '3', '4', '5'],

  axisLine: {

   lineStyle: {

•    color: 'rgba(255,255,255,0.12)'

   }

  },

  axisLabel: {

   //  margin: 10,

   color: '#e2e9ff',

   fontSize: 14

  },

 }],

 yAxis: [{

  splitNumber: 3,

  axisLabel: {

   formatter: '{value}',

   color: '#e2e9ff',

  },

  axisLine: {

   show: false

  },

  splitLine: {

   lineStyle: {

•    color: 'rgba(255,255,255,0.12)',

•    type: 'dotted'

   }

  }

 }],

 series: [

  {

   name: '系统外部',

   type: 'bar',

   stack: '排名',

   data: [120, 132, 101, 134, 90],

   barWidth: 15

  },

  {

   name: '系统内部',

   type: 'bar',

   stack: '排名',

   data: [220, 182, 191, 234, 290],

   barWidth: 15,

   itemStyle: {

•    borderRadius: [30, 30, 0, 0],

   }

  },

 ]

})

4、父组件引入表格组件，传参：

import * as echarts from 'echarts';

import echart from "../../components/echarts.vue"





html:

 //option6在上面定义了

`<echart :option="option6" :height="180" />`