Vue.js组件(6):echarts组件

1 前言

本章主要对常用的echars图表展示进行基本的组件封装。使用该组件前需要在项目中引入echarts。官网:Apache ECharts

复制代码
npm install echarts --save

2 图表组件

2.1 折线图组件

组件属性:chartId,指定图表挂载div的id,注意不要出现重复。当获取到数据后,在父组件中调用该组件的initChart() 方法,初始化图表。方法参数格式范例:

javascript 复制代码
{
    "xAxis":['项1', '项2', '项3'], 
    "yAxis":[12, 11, 122]    
}
  • xAxis:横坐标名称
  • yAxis:每项对应的数据量

组件代码:

javascript 复制代码
<script setup lang="ts">
import * as echarts from 'echarts'

const props = defineProps<{
  chartId: string
}>()

const initChart = (data: any) => {
  const chartDom = document.getElementById(props.chartId);
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: data.xAxis,
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.yAxis,
        type: 'line'
      }
    ]
  };

  option && myChart.setOption(option);
}

defineExpose({ initChart })
</script>

<template>
  <div :id="chartId" style="width: 100%; height: 100%"></div>
</template>

<style scoped>

</style>

2.2 柱状图组件

组件属性:chartId,指定图表挂载div的id,注意不要出现重复。当获取到数据后,在父组件中调用该组件的initChart() 方法,初始化图表。方法参数格式范例:

javascript 复制代码
{
    "xAxis":['项1', '项2', '项3'], 
    "yAxis":[12, 11, 122]    
}
  • xAxis:横坐标名称
  • yAxis:每项对应的数据量

组件代码:

javascript 复制代码
<script setup lang="ts">
import * as echarts from 'echarts'

const props = defineProps<{
  chartId: string
}>()

const initChart = (data: any) => {
  const chartDom = document.getElementById(props.chartId);
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: data.xAxis,
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.yAxis,
        type: 'bar'
      }
    ]
  };

  option && myChart.setOption(option);
}

defineExpose({ initChart })
</script>

<template>
  <div :id="chartId" style="width: 100%; height: 100%"></div>
</template>

<style scoped>

</style>

2.3 饼图组件

组件属性:chartId,指定图表挂载div的id,注意不要出现重复。当获取到数据后,在父组件中调用该组件的initChart() 方法,初始化图表。方法参数格式范例:

html 复制代码
[
        { value: 1048, name: '数据项1' },
        { value: 735, name: '数据项2' },
        { value: 580, name: '数据项3' },
        { value: 484, name: '数据项4' },
        { value: 300, name: '数据项5' }
      ]

组件代码:

html 复制代码
<script setup lang="ts">
import * as echarts from 'echarts'

const props = defineProps<{
  chartId: string
}>()

const initChart = (data: any) => {
  type EChartsOption = echarts.EChartsOption;

  const chartDom = document.getElementById(props.chartId)!
  const myChart = echarts.init(chartDom)
  let option: EChartsOption

  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '数据量',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: data
      }
    ]
  }
  option && myChart.setOption(option)
}

defineExpose({ initChart })
</script>

<template>
  <div :id="chartId" style="width: 100%; height: 100%"></div>
</template>

<style scoped>

</style>
相关推荐
Bellafu66625 分钟前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird3 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者4 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强4 小时前
Chrome和IE获取本机ip地址
前端
天***88964 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*4 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls5 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友5 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵5 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机6 小时前
Promise 常见面试题(持续更新中)
前端·javascript