vue中封装echarts公共组件

最新推荐文章于 2025-04-29 16:23:58 发布

朵朵和太阳

最新推荐文章于 2025-04-29 16:23:58 发布

阅读量2.9k

点赞数 6

CC 4.0 BY-SA版权

文章标签： echarts vue.js 数据可视化

本文链接：https://blog.youkuaiyun.com/symbool_ly/article/details/117300118

本文介绍如何在Vue项目中封装Echarts公共组件，通过定义图表基础样式baseOption.js来统一风格，包括轴线、区域和色系等。在main.js中全局引入echarts，然后创建Echart.vue组件，最后在需要的地方引入组件并传入数据，展示美观的饼图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义图表公共样式是为了统一同一网站各页面图表的基础样式baseOption.js（轴线、区域、色系、字体），统一封装后页面需要直接引入，传入所需参即可覆盖基础样式。以下示例封装图表组件Echart.vue。

1、安装echarts

npm install echarts --save
npm install lodash --save  // 若已安装请忽略

2.在mian.js中全局引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3.下面开始封装图表

baseOption.js文件：公共样式定义，为了统一同网站各种图表的基础样式，比如轴线、图各板块颜色，值仅供参考）：

// baseOption.js
export default {
   
   
  color: [
    "#0067E1",
    "#0CC1FF",
    "#00D1B3",
    "#85E814",
    "#FFA082",
  ],
  tooltip: {
   
   },
  legend: {
   
   
    orient:'horizontal',
    type:'scroll',
    pageIconSize:12,
    pageIconColor:'#aaa', 
    pageIconInactiveColor :'#2f4554',
    pageTextStyle:{
   
   
      color:'#999999'
    },
    itemWidth:20,
    itemHeight:12,
    top:0,
    textStyle:{
   
   
      color:'#999999'
    },
  },
  grid: {
   
   
    top: "13%",
    left: "3%",
    right: "10%",
    bottom: "2%",
    containLabel: true,
  },
  xAxis: [
    {
   
   
      axisLine: {
   
   
        lineStyle: {
   
   
          color: "rgba(65, 97, 128, 0.15)",
          // type: "dashed",
        },
      },
      axisTick: {
   
   
        show: false,
      },
      axisLabel: {
   
   
        interval:0,
        color: "#rgba(0, 0, 0, 0.25)",
        textStyle: {
   
   
          fontSize: 10,
        }
      },
      nameTextStyle:{