EchartsUtil

基于echarts4.0二次开发封装的可视化图表设计辅助工具

由于最近在项目开发中经常会用于echarts进行数据可视化的图表设计制作,许多图表都需要重复书写大量的option代码,现将这些公共配置项和重复代码封装集成到这个辅助工具里面,只需要根据后台返回的数据形式调用相应的方法,传入一个data和DOM容器ID就能呈现图形,省去了诸多前后端数据处理的工作。

源码下载:echarts-util.js

使用步骤:

1、引入echart4.0(可官网下载最新版)和echart-util.js文件;

 <script src="../src/echarts-4.0.js"></script>
 <script src="../echarts-util.js"></script>

2、定义一个图形dom容器;

  <echart id="chartid" width="100%" height="400px"></echart>

id必要属性,width、height不必要属性,根据需要可选择不写还是自定义宽高

3、传入数据调用图形方法生成option;

var option = zhuEcharts.line(data,3,"本月销售情况");

option为echart的配置项,可以自定义和修改,zhuEcharts为方法体,line表示生成线图的方法,传入的第一个参数为图形所需要的数据,必要参数,数据类型如下:

 [
  {"name":"计算机学院","value":"500"},
  {"name":"商学院","value":"900"},
  {"name":"外国语学院","value":"700"},
  {"name":"马克思主义学院","value":"400"},
  {"name":"环境与土木工程学院","value":"600"}
 ]
 

 [
   { "group":"男" , "name": "1月", "value": "110"},
   { "group":"女" , "name": "1月", "value": "115"},
   { "group":"男" , "name": "2月", "value": "50" },
   { "group":"女" , "name": "2月", "value": "102"},
   { "group":"男" , "name": "3月", "value": "22" },
  { "group":"女" , "name": "3月", "value": "112"},
  { "group":"男" , "name": "4月", "value": "80" },
  { "group":"女" , "name": "4月", "value": "45" },
  { "group":"男" , "name": "5月", "value": "25" },
  { "group":"女" , "name": "5月", "value": "92" },
  { "group":"男" , "name": "6月", "value": "22" },
  { "group":"女" , "name": "6月", "value": "52" }
 ]

传入的第二个参数为图表类型,不必要参数(可选,1表示曲线,2表示折线面积,3表示曲线面积),传入的第三个参数为图表的标题,不必要参数(这个参数需要加双引号)

4、传入option和容器id调用绘制方法生成图表;

var initChart = zhuEcharts.renderChart(option,"chartid","purple"); 

initChart是定义这个图表对象,方便后面操作,可不定义,renderChart为绘制图表方法,传入的第一个参数为上面方法返回的option,也可以自定义配置项或者对生成的option做相应的修改,必要参数,传入的第二个参数为DOM容器ID,必要参数(加双引号),传入的第三个参数为图形需要引用的echart样式主题名称,不必要参数(加双引号,目前插件集成了5套主题样式供选择,basic常规色,dark深黑色,roma灰黑色,purple紫色,vintage蓝色)

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中将echarts方法封装到一个js文件中,我们首先需要引入echarts库和Vue库。假设我们将封装的方法放在一个名为"echartsUtil.js"的文件中。 1. 在"echartsUtil.js"中,我们先引入echarts库: ```javascript import echarts from 'echarts' ``` 2. 接下来,我们可以定义一个方法来创建图表。例如,我们可以封装一个生成柱状图的方法: ```javascript export function createBarChart(elementId, data) { // 使用elementId获取DOM元素 const chartElement = document.getElementById(elementId) // 使用echarts初始化一个实例 const chartInstance = echarts.init(chartElement) // 定义图表配置 const option = { // 配置项 xAxis: { // x轴数据 data: data.labels }, yAxis: { // y轴配置项 }, series: [{ // 数据项 type: 'bar', data: data.values }] } // 使用配置项设置图表 chartInstance.setOption(option) // 返回创建的图表实例,方便其他操作 return chartInstance } ``` 3. 在Vue组件中,我们可以通过import语句引入"echartsUtil.js"中的方法,并在需要的地方调用它: ```javascript import { createBarChart } from '@/utils/echartsUtil.js' export default { mounted() { // 在mounted生命周期钩子中调用封装的方法 const data = { labels: ['A', 'B', 'C', 'D'], values: [10, 20, 15, 5] } // 传入元素的id和数据,创建柱状图 createBarChart('chart-container', data) } } ``` 以上代码示例中,我们通过在"echartsUtil.js"中封装了一个方法来创建柱状图,然后在Vue组件中引用这个方法,并传入元素的id和数据来创建柱状图。这样就实现了将echarts方法封装到js文件中并进行调用。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值