Echarts简单封装

1.引入Echarts (Vue项目)并注册组件

import vueEcharts from "vue-echarts";
import echarts from "echarts";export default {name: "demo",components: { vueEcharts },data(){return {//...}},//...
}

2.页面嵌入

<vue-echarts
ref="my_chart1"
:options="chart1"
:auto-resize="true"
theme="light"
></vue-echarts><vue-echarts
ref="my_chart2"
:options="chart2"
:auto-resize="true"
theme="light"
></vue-echarts>

3.options配置

export default {data(){return {chart1: this.initChart("bar","各类别在线率、离线率对比",['A', 'B', 'C', 'D'],[{name: "在线率",colors: ['#F5CD2E', '#FB951C'],data: [43.3, 83.1, 86.4, 72.4]},{name: "离线率",colors: ['#00F09E', '#00B074'],data: [85.8, 73.4, 65.2, 53.9]}]),chart2: this.initChart("line","7天内在线率、离线率对比",['07/04', '07/05', '07/06', '07/07', '07/08', '07/09', '07/10'],[{name: "在线率",colors: ["#FB951C", "#F5CD2E"],data: [820, 1032, 901, 834, 1290, 1330, 332]},{name: "离线率",colors: ["#009AEE", "#00DAEE"],data: [1200, 890, 1770, 834, 990, 1030, 1332]},],['#FB951C', '#009AEE'])};}
}

4.配置函数封装：

methods: {initChart(type, title, xItems=[], yItems=[], colors){let result =  {//标题title: {text: title,textStyle: {fontSize: "14",color: "#000",fontWeight: "400"},padding: [5,0,0,20]},//图例legend: {left: "right",padding: [5,20,0,0]},//提示框tooltip: type==="bar" ? {lineStyle: {type: 'solid',color: '#D2D2D2'}} : {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},//x轴xAxis: {type: 'category',data: xItems},//y轴yAxis: {type: 'value'},//数据项配置series: yItems.map(item => {let seriesItem = {name: item.name,type: type,data: item.data||[]};type==="bar" && (seriesItem.itemStyle = {color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[{offset: 0, color: item.colors[0]},{offset: 1, color: item.colors[1]}])});type==="line" && (seriesItem.areaStyle = {opacity: 0.2,color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[{offset: 0, color: item.colors[0]},{offset: 1, color: item.colors[1]}])}) && (seriesItem.smooth = true);return seriesItem;})};colors && (result.color = colors);result.setTitle = function(title){this.title.text = title;};result.setXData = function(data=[]){this.xAxis.data = data;};result.setYData = function(data=[]){for(let i=0; i<data.length; i++){this.series[i].data = data[i]||[];}};return result;}
}

5.数据渲染：

  this.chart2.setTitle("xxx"); //修改标题//修改x轴每个项目的名称this.chart2.setXData(['a','b','c','d','e','f','g']); //设置y轴的数据，参数为二维数组this.chart2.setYData([[1200, 890, 1770, 834, 990, 1030, 1332],[820, 1032, 901, 834, 1290, 1330, 332]]);

Echarts简单封装相关推荐

Android APP更新下载工具类——简单封装DownloadManager
几乎所有APP都包含了检查更新功能,更新下载功能的实现方式常用的有两种:1.使用App网络框架的文件下载请求:2.使用自带的DownloadManager类:本文介绍第二种,简单封装一下Downloa ...
简单封装浏览器 cookie 工具类
版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8265571 ...
小程序简单封装 request 请求
我在这里做了详细的介绍 : 小程序简单封装 request 请求转载于:https://www.cnblogs.com/biangz/p/9984340.html
简单封装 HTTP 请求
2017-2-19 更新到第二版: 源码地址:http://git.oschina.net/sp42/ajaxjs/tree/master/ajaxjs-base/src/com/ajaxjs/net ...
【JDBC】实现对JDBC 连接的简单封装
package util;import java.sql.Connection; import java.sql.DriverManager;/**** 实现对JDBC 的封装* @author mq ...
Android AsyncTask 深度理解、简单封装、任务队列分析、自定义线程池
前言:由于最近在做SDK的功能,需要设计线程池.看了很多资料不知道从何开始着手,突然发现了AsyncTask有对线程池的封装,so,就拿它开刀,本文将从AsyncTask的基本用法,到简单的封装,再到 ...
ios开发之使用多文件上传的简单封装最原始的
ios开发之使用多文件上传的简单封装最原始的 // // ViewController.m // 18-上传多个文件 // // Created by 鲁军 on 2021/2/13. //#impo ...
Spring jdbc 对象Mapper的简单封装
一般查询实体的时候,都需要这么使用/** * 根据id查询 * * @return */ public Emp queryEmpById(Intege ...
Google图片加载库Glide的简单封装GlideUtils
Google图片加载库Glide的简单封装GlideUtils

Echarts简单封装

1.引入Echarts (Vue项目)并注册组件

2.页面嵌入

3.options配置

4.配置函数封装：

5.数据渲染：

Echarts简单封装相关推荐

最新文章

热门文章