Echarts封装

最新推荐文章于 2024-03-25 08:00:00 发布
最新推荐文章于 2024-03-25 08:00:00 发布
阅读量225 收藏 1
点赞数
文章标签： echarts javascript ecmascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72758108/article/details/129339274
版权

2. vue模块

<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import tdTheme from './theme.json' // 引入默认主题
import '../map/fujian.js'

export default {
  name: 'echart',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '2.5rem'
    },
    options: {
      type: Object,
      default: ()=>({})
    }
  },
  data () {
    return {
      chart: null
    }
  },
  watch: {
    options: {
      handler (options) {
        // 设置true清空echart缓存
        this.chart.setOption(options, true)
      },
      deep: true
    }
  },
  mounted () {
    this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
    this.initChart();
  },
  methods: {
    initChart () {
      // 初始化echart
      this.chart = this.$echarts.init(this.$el, 'tdTheme')
      this.chart.setOption(this.options, true)
    }
  }
}
</script>

<style>
</style>

3. json

{
  "color": [
    "#2d8cf0",
    "#19be6b",
    "#ff9900",
    "#E46CBB",
    "#9A66E4",
    "#ed3f14"
  ],
  "backgroundColor": "rgba(0,0,0,0)",
  "textStyle": {},
  "title": {
    "textStyle": {
      "color": "#516b91"
    },
    "subtextStyle": {
      "color": "#93b7e3"
    }
  },
  "line": {
    "itemStyle": {
      "normal": {
        "borderWidth": "2"
      }
    },
    "lineStyle": {
      "normal": {
        "width": "2"
      }
    },
    "symbolSize": "6",
    "symbol": "emptyCircle",
    "smooth": true
  },
  "radar": {
    "itemStyle": {
      "normal": {
        "borderWidth": "2"
      }
    },
    "lineStyle": {
      "normal": {
        "width": "2"
      }
    },
    "symbolSize": "6",
    "symbol": "emptyCircle",
    "smooth": true
  },
  "bar": {
    "itemStyle": {
      "normal": {
        "barBorderWidth": 0,
        "barBorderColor": "#ccc"
      },
      "emphasis": {
        "barBorderWidth": 0,
        "barBorderColor": "#ccc"
      }
    }
  },
  "pie": {
    "itemStyle": {
      "normal": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      },
      "emphasis": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      }
    }
  },
  "scatter": {
    "itemStyle": {
      "normal": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      },
      "emphasis": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      }
    }
  },
  "boxplot": {
    "itemStyle": {
      "normal": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      },
      "emphasis": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      }
    }
  },
  "parallel": {
    "itemStyle": {
      "normal": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      },
      "emphasis": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      }
    }
  },
  "sankey": {
    "itemStyle": {
      "normal": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      },
      "emphasis": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      }
    }
  },
  "funnel": {
    "itemStyle": {
      "normal": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      },
      "emphasis": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      }
    }
  },
  "gauge": {
    "itemStyle": {
      "normal": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      },
      "emphasis": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      }
    }
  },
  "candlestick": {
    "itemStyle": {
      "normal": {
        "color": "#edafda",
        "color0": "transparent",
        "borderColor": "#d680bc",
        "borderColor0": "#8fd3e8",
        "borderWidth": "2"
      }
    }
  },
  "graph": {
    "itemStyle": {
      "normal": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      }
    },
    "lineStyle": {
      "normal": {
        "width": 1,
        "color": "#aaa"
      }
    },
    "symbolSize": "6",
    "symbol": "emptyCircle",
    "smooth": true,
    "color": [
      "#2d8cf0",
      "#19be6b",
      "#f5ae4a",
      "#9189d5",
      "#56cae2",
      "#cbb0e3"
    ],
    "label": {
      "normal": {
        "textStyle": {
          "color": "#eee"
        }
      }
    }
  },
  "map": {
    "itemStyle": {
      "normal": {
        "areaColor": "#f3f3f3",
        "borderColor": "#516b91",
        "borderWidth": 0.5
      },
      "emphasis": {
        "areaColor": "rgba(165,231,240,1)",
        "borderColor": "#516b91",
        "borderWidth": 1
      }
    },
    "label": {
      "normal": {
        "textStyle": {
          "color": "#000"
        }
      },
      "emphasis": {
        "textStyle": {
          "color": "rgb(81,107,145)"
        }
      }
    }
  },
  "geo": {
    "itemStyle": {
      "normal": {
        "areaColor": "#f3f3f3",
        "borderColor": "#516b91",
        "borderWidth": 0.5
      },
      "emphasis": {
        "areaColor": "rgba(165,231,240,1)",
        "borderColor": "#516b91",
        "borderWidth": 1
      }
    },
    "label": {
      "normal": {
        "textStyle": {
          "color": "#000"
        }
      },
      "emphasis": {
        "textStyle": {
          "color": "rgb(81,107,145)"
        }
      }
    }
  },
  "categoryAxis": {
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#cccccc"
      }
    },
    "axisTick": {
      "show": false,
      "lineStyle": {
        "color": "#333"
      }
    },
    "axisLabel": {
      "show": true,
      "textStyle": {
        "color": "#fff"
      }
    },
    "splitLine": {
      "show": false,
      "lineStyle": {
        "color": [
          "#eeeeee"
        ]
      }
    },
    "splitArea": {
      "show": false,
      "areaStyle": {
        "color": [
          "rgba(250,250,250,0.05)",
          "rgba(200,200,200,0.02)"
        ]
      }
    }
  },
  "valueAxis": {
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#cccccc"
      }
    },
    "axisTick": {
      "show": false,
      "lineStyle": {
        "color": "#333"
      }
    },
    "axisLabel": {
      "show": true,
      "textStyle": {
        "color": "#fff"
      }
    },
    "splitLine": {
      "show": false,
      "lineStyle": {
        "color": [
          "#eeeeee"
        ]
      }
    },
    "splitArea": {
      "show": false,
      "areaStyle": {
        "color": [
          "rgba(250,250,250,0.05)",
          "rgba(200,200,200,0.02)"
        ]
      }
    }
  },
  "logAxis": {
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#cccccc"
      }
    },
    "axisTick": {
      "show": false,
      "lineStyle": {
        "color": "#333"
      }
    },
    "axisLabel": {
      "show": true,
      "textStyle": {
        "color": "#999999"
      }
    },
    "splitLine": {
      "show": true,
      "lineStyle": {
        "color": [
          "#eeeeee"
        ]
      }
    },
    "splitArea": {
      "show": false,
      "areaStyle": {
        "color": [
          "rgba(250,250,250,0.05)",
          "rgba(200,200,200,0.02)"
        ]
      }
    }
  },
  "timeAxis": {
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#cccccc"
      }
    },
    "axisTick": {
      "show": false,
      "lineStyle": {
        "color": "#333"
      }
    },
    "axisLabel": {
      "show": true,
      "textStyle": {
        "color": "#999999"
      }
    },
    "splitLine": {
      "show": true,
      "lineStyle": {
        "color": [
          "#eeeeee"
        ]
      }
    },
    "splitArea": {
      "show": false,
      "areaStyle": {
        "color": [
          "rgba(250,250,250,0.05)",
          "rgba(200,200,200,0.02)"
        ]
      }
    }
  },
  "toolbox": {
    "iconStyle": {
      "normal": {
        "borderColor": "#999"
      },
      "emphasis": {
        "borderColor": "#666"
      }
    }
  },
  "legend": {
    "textStyle": {
      "color": "#fff"
    }
  },
  "tooltip": {
    "axisPointer": {
      "lineStyle": {
        "color": "#ccc",
        "width": 1
      },
      "crossStyle": {
        "color": "#ccc",
        "width": 1
      }
    }
  },
  "timeline": {
    "lineStyle": {
      "color": "#8fd3e8",
      "width": 1
    },
    "itemStyle": {
      "normal": {
        "color": "#8fd3e8",
        "borderWidth": 1
      },
      "emphasis": {
        "color": "#8fd3e8"
      }
    },
    "controlStyle": {
      "normal": {
        "color": "#8fd3e8",
        "borderColor": "#8fd3e8",
        "borderWidth": 0.5
      },
      "emphasis": {
        "color": "#8fd3e8",
        "borderColor": "#8fd3e8",
        "borderWidth": 0.5
      }
    },
    "checkpointStyle": {
      "color": "#8fd3e8",
      "borderColor": "rgba(138,124,168,0.37)"
    },
    "label": {
      "normal": {
        "textStyle": {
          "color": "#8fd3e8"
        }
      },
      "emphasis": {
        "textStyle": {
          "color": "#8fd3e8"
        }
      }
    }
  },
  "visualMap": {
    "color": [
      "#516b91",
      "#59c4e6",
      "#a5e7f0"
    ]
  },
  "dataZoom": {
    "backgroundColor": "rgba(0,0,0,0)",
    "dataBackgroundColor": "rgba(255,255,255,0.3)",
    "fillerColor": "rgba(167,183,204,0.4)",
    "handleColor": "#a7b7cc",
    "handleSize": "100%",
    "textStyle": {
      "color": "#333"
    }
  },
  "markPoint": {
    "label": {
      "normal": {
        "textStyle": {
          "color": "#eee"
        }
      },
      "emphasis": {
        "textStyle": {
          "color": "#eee"
        }
      }
    }
  }
}

4. 导入封装 （这是一个饼图）

<template>
  <div>
    <!-- 年度开工率 -->
    <Echart :options="options" id="centerLeftChart" height="360px" width="100%"></Echart>
  </div>
</template>

<script>
import Echart from "@/common/echart";
export default {
  data() {
    return {
      options: {}
    };
  },
  components: {
    Echart
  },
  props: {
    Ldata: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    Ldata: {
      handler(newData) {
        console.log(newData);
        let colorList = ["#ff3399", "#3399ff"];
        this.options = {
          grid: {
            bottom: 150,
            left: 0,
            right: "10%"
          },
          legend: {
            show: false
          },
          series: [
            {
              radius: "39%",
              center: ["50%", "50%"],
              itemStyle: {
                normal: {
                  color: function(params) {
                    return colorList[params.dataIndex];
                  }
                }
              },
               hoverAnimation: false, // 鼠标经过不放大
              labelLine: {
                normal: {
                  show: false,
                  length: 15,
                  length2: 120,
                  lineStyle: {
                    color: "#d3d3d3"
                  },
                  align: "center"
                },
                color: "#000",
                emphasis: {
                  show: true
                }
              },
              label: {
                normal: {
                  formatter: function(params) {
                    var str = params.name + ": " + params.value + "%";
                    return str;
                  },
                  fontSize: 15,
                  position: "inner",
                }
              },
              type: "pie",
              data: newData.data,
              
            },
            {
              radius: ["37%", "39%"],
              center: ["50%", "50%"],
              type: "pie",
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              animation: false,
              tooltip: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: "rgba(250,250,250,1)"
                }
              },
              data: [
                {
                  value: 1
                }
              ]
            }
          ]
        };
      },
      immediate: true,
      deep: true
    }
  }
};
</script>
乔滕？
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts 封装的一个小demo
12-25
这个是本人自己封装echarts插件的一个小demo，这个demo包含环形图，饼状图，地图，功能集中再一起；
这样封装echarts简单好用
yy的博客
07-08 1292
1. 使用watch去监听props中的对象，不能这样写watch: {// echartsData假设为props中定义了的。},上面这样去监听对象将无法触发。上面这样的只能够监听基本数据类型我们应该改写为：watch: {},2.子组件中 mounted 将会被多次渲染。它的渲染次数取决于父页面中需要显示多少个echarts图。这也是为什么echarts不会渲染出错（A指标中数据不会被渲染到C指标中）
关于echarts的封装以及写法思路
qq_45121945的博客
10-26 2799
首先 开发的过程中 如果一个页面的话只有一两个echarts图例的话 那么我们不需要对它进行一个封装以及抽离 如果有很多个的话 那么我们发现 如果全部都写在一个页面的话 那么整个的页面代码就会很变的很冗余 以及后期也不好维护 那么 我们有什么好的方法让我们的图例好写以及好维护呢 首先 看以下图。这样所有的echarts都进行了一个分离抽离 以及封装 主要还是看个人的需求需要做成什么样 如果有很多图例 而且全部一样 那么 我们就可以进行一个echarts的for循环进行遍历初始化 这样更方便。
Vue3 封装ECharts 组件 抽离复用 包含图表随着窗口宽高变化而变化
最新发布
m0_48968874的博客
03-25 917
避免重复的代码造成冗余，抽离封装提高复用性代码逻辑更加清晰，方便后期维护Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
echarts的封装
qq_44743216的博客
05-18 3392
1、 新建Echarts.vue <template> <div ref="echart"></div> </template> <script> import * as echarts from 'echarts' export default { props:{ //接收参数 isAxisChart:{ //判断是柱状图/折线图,还是饼图 type:Boolean,
vue3 封装ECharts组件
Huangxianlong的博客
04-26 5200
前端开发需要经常使用ECharts图表渲染数据信息，在一个项目中我们经常需要使用多个图表，选择封装ECharts组件复用的方式可以减少代码量，增加开发效率。
Echarts组件封装（数据、样式、配置项）
weixin_54165147的博客
07-26 717
在 Vue 3 中，你可以通过封装一个组件来实现 Echarts 图表的可定制化，并且根据传入的参数绘制不同样式的图表。请注意，上述示例仅提供了基本的封装思路，具体的数据、配置项和样式需要根据自己的实际需求进行调整。组件，并分别传入不同的参数进行绘制。确保每个图表组件都有独立的引用，避免只显示一个的问题。三个参数，分别用于传入图表的数据、配置项和样式。初始化图表实例，并利用传入的参数进行绘制。在需要使用图表的页面中，可以多次调用。在需要使用图表的页面中，导入并使用。
Echarts封装案例
11-02
Echarts封装案例，require动态加载模块。Echarts封装案例，require动态加载模块。
vue.js如何将echarts封装为组件一键使用详解
01-19
本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 说明 做项目的时候为了让数据展示的更加直观，总会用到图表相关的控件...
echarts封装jar包
09-20
对eCharts 中的option中的各个属性参数封装；可以查询结果直接装进去返回前台
Echarts组件初步封装
往事随风
03-20 1045
Echarts组件初步封装
封装一个公用的【Echarts图表组件】的3种模板
weixin_50450473的博客
07-31 5146
在components下创建一个echarts.vue文件 <template> <div> <div class="know_r_echart"> <div id="atlasChart"></div> </div> </div> </template> <script> import * as echarts from 'echarts' export ..
在vue3中使用及封装echarts
qq_43730272的博客
02-23 790
在vue3中使用及封装echarts 1.获取ECharts 从npm获取 npm install echarts 2.在项目中引入ECharts（父子组件无通信） 子组件： <template> <div ref="myChart" style="width: 1000px; height: 600px;"></div> </template> <script setup> import * as echarts from 'ech
echart二次封装组件
imsopoor的博客
05-12 263
【代码】echart二次封装组件。
ECharts封装及常用配置整理
Xxxxxl17的博客
12-20 146
ECharts，一个基于 JavaScript 的开源可视化图表库
Echart图组件封装
qq_45799465的博客
01-05 1160
Echart图表组件的简单封装。
完美封装Echarts【分层结构】
jinchunye的博客
01-22 4430
实现组件化，工程化项目 => 使用分层结构，我辈义不容辞。
echarts封装
NewBie96的博客
04-04 387
echarts封装详细代码
Vue 中对 Echart 的多次封装
m0_37939797的博客
06-12 221
Vue 中对 Echart 的多次封装
echarts 封装
08-31
ECharts 是一款由百度开发的数据可视化库，它提供了丰富的图表类型和交互能力，可以帮助开发者快速地实现各种数据可视化需求。为了方便使用和扩展，很多开发者都会对 ECharts 进行封装。 封装 ECharts 的目的是为了简化使用流程，提供更友好的 API 接口，并且可以根据项目需求进行个性化定制。通过封装，可以将常用的图表组件、数据处理逻辑等封装为可复用的组件，以便于在不同的项目中调用。 在封装 ECharts 时，一般需要注意以下几个方面： 1. 封装图表组件：根据业务需求选择合适的图表类型，并将其封装为独立的组件，提供简单的配置方式和事件回调机制。 2. 数据处理：提供数据处理的方法，用于将原始数据转换为适合绘制图表的格式，例如对数据进行过滤、聚合、排序等操作。 3. 样式定制：提供一些接口用于自定义图表的样式，例如修改颜色、字体、边框等。 4. 响应式设计：考虑图表在不同屏幕尺寸下的适配问题，可以通过监听窗口大小变化事件来实现图表的自适应布局。 总的来说，ECharts 的封装可以根据具体需求进行定制，可以根据项目的特点和要求来设计封装的接口和功能，以提高开发效率和代码复用性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值