vue3封装Apache 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:
​
` 
`

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在上面定义了
​
``
​

你可能感兴趣的:(apache,echarts,前端)