ECharts在vue中使用、图表自适应、时间轴

已于 2023-04-27 14:07:55 修改
阅读量2.5k 收藏 4
点赞数 1
分类专栏： 面试篇 vue 文章标签： echarts 前端 javascript
于 2022-08-30 19:33:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TKY666/article/details/126610872
版权

目录

使用思路：

Echarts在vue中使用

引入 ECharts

绘制图表实例（复杂）

实例效果：

官方入门实例（简单）

官方入门实例效果 

更新echarts图表数据

图表自适应

x轴设为时间轴

不同时间数据重叠显示 

tooltip圆点颜色修改

ECharts 的功能十分强大,可以生成多种形式的图表,配置项十分灵活,可以根据实际需求自由定制
官方文档: https://www.echartsjs.com/examples/

使用思路：

官方示例查看相近图例 + 后续问题 + 浏览器搜索 + 官方配置项手册对应字段查找 = 结果

当我们绘制图表时总是会需要自己配置一些样式效果，而官方API又难以查找，新手可以将想要查找的效果样式在浏览器中搜索，根据搜索结果的提示去设置或再去官方配置项手册搜索查找对应项配置。

Echarts在vue中使用

首先在项目中安装Echarts

npm install echarts --save

引入 ECharts

全局引入

  • main.js
// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

所需组件单个引入

import * as echarts from "echarts";

绘制图表实例（复杂）

<template>
	<div class="conentTop">
		<div id="pieChart" :style="{ width: '49%', height: '100%' }"></div> 
		<div id="barChart" :style="{ width: '49%', height: '100%' }"></div>
	</div>
</template>
<script>
import * as echarts from "echarts";
export default {
	name: 'topEcharts',
	data() {
		return {

		}
	},
	mounted() { // 挂载后获取Dom渲染图表
		this.drawLine();
		this.drawLineTow();
	},
	methods: {
		// 饼图
		drawLine() {
			// 基于准备好的dom，初始化echarts实例
			let pieChart = echarts.init(document.getElementById('pieChart'))
			// 绘制饼状图表
			pieChart.setOption({
				title: {
					text: '问题类型',
					left: 'left'
				},
				series: [
					{
						type: 'pie',
						showEmptyCircle: false,//是否显示占位圆
						data: [
							{
								value: 8,
								name: '延误较大',
							},
							{
								value: 14,
								name: '失衡'
							},
							{
								value: 16,
								name: '校时异常'
							},
							{
								value: 20,
								name: '空放'
							},
							{
								value: 24,
								name: '拥堵',
							},
						],
						radius: ['18%', '70%'],
						roseType: 'area',
						label: { //饼图上显示数值
							show: true,//数据为空时仍开启显示
							// position: 'top',//在上方显示
							textStyle: {//数值公共样式
								lineHeight: 24,
							},
							//数据名b 数据值c 百分比d {name}{time}表示为数值设置的类名 \n、\t为字符串转义符
							formatter: "{name|{b}}\n {time|{c}\t({d}%)}",
							rich: {//单独设置类样式
								name: {
									fontSize: 14,
									fontWeight: 'bold',
									color: '#000000',

								},
								time: {
									fontSize: 12,
									color: '#2F4683',
									fontWeight: 'bold',
								}
							},
						}
					},
					// 背景圆设置
					{
						type: 'pie',
						radius: [20, 126],
						emptyCircleStyle: {
							color: '#EDE8FE'
						}
					}
				]
			});
			window.addEventListener("resize", () => {
				pieChart.resize();
			});
		},
		// 柱形图
		drawLineTow() {
			// 基于准备好的dom，初始化echarts实例
			let barChart = echarts.init(document.getElementById('barChart'));
			// 绘制图表
			barChart.setOption({
				title: {
					text: '问题趋势',
					left: 'left',
					top: 'top',
				},
				tooltip: {},//悬浮提示
				color: [
					{
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{ offset: 0, color: '#FCDB00FF' }, // 设置颜色渐变
							{ offset: 1, color: '#F7B500FF' }
						]
					},
				],
				xAxis: {
					// type:'time',
					// name:'x轴标题',
					axisTick: {
						show: false, //隐藏x轴刻度轴线
					},
					axisLine: {
						lineStyle: {
							color: "#638DFF7A"//x轴轴线颜色
						}
					},
					data: ["2022-12-01", "2022-12-02", "2022-12-03", "2022-12-04", "2022-12-05", "2022-12-06", "2022-12-07"],
				},
				yAxis: {
					type: 'value',
					axisLine: {//y轴样式
						show: true,//显示y轴线条
						lineStyle: {
							color: "#638DFF7A"//y轴轴线颜色
						}
					},
					splitLine: { //y轴分割线样式
						// show: true, // 默认值
						lineStyle: {
							type: "dashed", //虚线
							color: "#638DFF7A"
						}
					},
				},
				series: [
					{
						type: 'bar',
						barWidth: 30,
						data: [41, 58, 68, 100, 31, 39, 29],
					}
				],
			});
			// 图表自适应
			window.addEventListener("resize", () => {
				barChart.resize();
			});
		},
	}
}
</script>
<style scoped>
.conentTop {
	width: 100%;
	height: 409px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 20px 0 16px 0;
}

#pieChart,
#barChart {
	box-sizing: border-box;
	padding-left: 23px;
	padding-top: 13px;
	background-color: #fff;
}
</style>

实例效果：

 若感觉上方实例太复杂可看下官方入门实例

官方入门实例（简单）

<template>
	<div>
		<div id="myChart" :style="{ width: '600px', height: '300px' }"></div>
	</div>
</template>
<script>
import * as echarts from "echarts";
export default {
	name: 'hello',
	data() {
		return {
			msg: 'Welcome to Your Vue.js App'
		}
	},
	mounted() {
		this.drawLine();
	},
	methods: {
		drawLine() {
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('myChart'))
			// 绘制图表
			myChart.setOption({
				title: {
					text: 'ECharts 入门示例'
				},
				tooltip: {},
				xAxis: {
					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
				},
				yAxis: {},
				series: [
					{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}
				]
			});
		}
	}
}
</script>

官方入门实例效果 

更新echarts图表数据

需要修改图表数据时，将series中的data数据直接修改，然后重新初始化数据echarts图表即可。

  • 想要页面效果好就直接初始化图表，但控制台会有警告（重复初始化一个DOM）

  •  不顾及页面效果，避免控制台警告可先销毁图表实例再初始化图表
官方方法 // 图表实例变量名：pieChart
pieChart.dispose(); // 销毁
pieChart.clear(); // 清空

使用举例
// data中 chartsDom = null,
// 初始化图表前先判断 若存在先销毁
if(this.chartsDom != null &&
        this.chartsDom != '' &&
        this.chartsDom != undefined){
          this.chartsDom.dispose();
        }
      // 然后正常初始化流程
      let chartsDom =  document.getElementById('curveChart');
      this.chartsDom = echarts.init(chartsDom);
      this.chartsDom.setOption(option);

图表自适应

实现图表自适应可使用一些百分比、rem、em、vh、vw等相对单位设置图表宽高。

并且结合官方resize方法即可。

官方方法

window.addEventListener("resize", () => {
				pieChart.resize(); // 图表实例变量名：pieChart
			});

x轴设为时间轴

注意：使用echarts时间轴设置首先要注意series.data的数据格式就需要转换下了，不能再是单一值类型。

转换为如下两种格式均可

const data = [
    ['时间格式' , 值],
    ['2019-11-1 09:00:20' , 55],
]
const data = [
    ['时间戳格式' , 值],
    ['1682179200000' , 55],
]

setOption相关配置如下

  • 极简版本
option = {
  xAxis: {
    type: 'time',
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [ ["2021-01-04 08:14:36", 60],["2021-01-04 20:14:46", 56] ],
      // data: [[1651372200,20],[1651373400,40],[1651377000,35]],
      type: 'line',
    }
  ]
};
  • 添加最大值最小值与坐标时间段刻度分割整数版本
option = {
  tooltip:{
    trigger:'axis',
  },
  xAxis: {
    type: 'time',
            interval: 3600 * 1 * 1000 * 6, // 坐标轴分割刻度显示成整数
            min: function (value) { // 最小值限制
              let year = new Date(value.max).getFullYear();
              let month = new Date(value.max).getMonth() + 1;
              let day = new Date(value.max).getDate();
              return new Date(
                year + "-" + month + "-" + day + " 00:00:00"
              ).getTime();
            },
            max: function (value) { // 最大值限制
              let year = new Date(value.max).getFullYear();
              let month = new Date(value.max).getMonth() + 1;
              let day = new Date(value.max).getDate();
              return new Date(
                year + "-" + month + "-" + day + " 23:59:00"
              ).getTime();
            },
            axisLabel: { // 坐标轴刻度标签的相关设置
              // formatter: '{HH}:{mm}', // 只显示时间
              formatter:function(e){ // 调用方法返回显示年月日时间段
                return timestampToTime(e);
              },
              rotate:30, // 倾斜角度
              showMinLabel: true,
              showMaxLabel: true,
            },
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [ ["2023-04-04 08:14:36", 60],["2023-04-04 10:16:46", 56],["2023-04-04 15:16:46", 56] ],
      // data: [[1651372200,20],[1651373400,40],[1651377000,35]],
      type: 'line',
    }
  ]
};
function timestampToTime(timestamp) {
        // var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000rotate:30
       var date = new Date(timestamp);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = (date.getDate() < 10 ? '0'+ date.getDate() : date.getDate()) + ' ';
        var h = (date.getHours() < 10 ? '0'+ date.getHours() : date.getHours()) + ':';
        var m = (date.getMinutes() < 10 ? '0'+ date.getMinutes() : date.getMinutes()) + ':';
        var s = (date.getSeconds() < 10 ? '0'+ date.getSeconds() : date.getSeconds());
        return Y+M+D+h+m+s;
    }
  • 效果展示： 

不同时间数据重叠显示 

注意：若是做两时间数据对比需要使用在series下的第二个数据里添加此配置 xAxisIndex: 1,

作用是让两时间数据重叠显示。

tooltip圆点颜色修改

修改图例与tooltip圆点颜色，可在series对应数据下添加itemStyle修改样式。或者使用formatter

模板修改，但较为麻烦。 

大脸胖柴
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 时间线
God's asylum的博客
05-15 85
1、先分析图片是由一根y轴线和每个小节点组成； 2、可以看出时间线是没有轴的，所以将“ xAxis ”属性隐藏； 3、y轴是没有分割线的所以隐层“ yAxis ”中的“ splitLine ”区域中的分隔线； 4、同时也要隐藏y轴刻度“ yAxis ”中的“ axisTick ”隐藏； 5、可以看出时间线实在中间，设置“ grid ”属性中“ left ”和“ right ”个50%； 6、series采用line折线图类型来加载 6、在就是改变时间线上的颜色就可以了；
echarts时间轴demo，内含两种实现方式。1.X轴为数值轴(type=value)；2.X轴为时间轴(type=time)
07-11
echarts时间轴demo，内含两种实现方式。 1.X轴为数值轴(type=value)； 2.X轴为时间轴(type=time)。 下载后可直接打开看到效果。 如果对demo有疑问，如无法加载，无法使用，报错等，可添加资源中的联系方式，免费解答。
Echarts坐标系之多个坐标系
buhaisao321的博客
03-20 1626
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
【Echarts】在Vue中使用Echarts
weixin_46443403的博客
03-05 5645
Vue，Echarts
vue-echarts配置项详解
浮游的博客
07-28 3858
最近接手了一个vue3项目，echarts用的是"vue-echarts": “^6.0.0”，每次查看文档的时候痛苦不已，找一个配置要花费大量时间，所以这篇文章，主要就是为了记录比较常见的一些配置。在package.json中的dependencies里面加一行"vue-echarts": “^6.0.0”，然后npm install，进行安装，这是最简单的。官方文档（写的不详细，很多都是让跳转到echarts官网，再去查找）主要会写三种图的配置项：圆环图、直线图、柱状图。在main.js中引入。
Echarts数据可视化 第3章 Echarts组件详解 3.5 时间轴
谢谢你们的关注
03-03 962
Echarts数据可视化 第3章 Echarts组件详解 3.5 时间轴
VUE整合Echarts实现简单的数据可视化
最新发布
心态的博客
10-16 9887
ECharts是一款功能强大的前端数据可视化库，支持多种图表类型和统计图表、地理数据可视化、关系型数据展示、多维数据处理和商业智能功能。通过广泛的图表类型、统计分析能力、地理数据可视化、关系数据展示、多维数据处理和商业智能功能，ECharts为用户提供了强大而灵活的数据可视化解决方案，助力用户从数据中获取洞见，并将其直观地展示出来。
vue中使用echarts并自适应
每文的博客
11-22 8251
在这里我只是记录一下特别方式使用echarts，并且实现自适应效果 1、安装 cnpm i echarts --save 2、在main.js中引用 import echarts from 'echarts' //这里我是全部引用的，需要按需引入的同学可以自行百度 Vue.prototype.$echarts = echarts //这里挂在原型上，方便全局使用 ...
完美解决vue 中多个echarts图表自适应的问题
10-15
在Vue项目中，ECharts图表的自适应是一个常见的需求，特别是在页面中存在多个图表的情况下。以下将详细解析如何解决Vue中多个ECharts图表的自适应问题。 首先，我们需要理解ECharts图表的自适应原理。ECharts图表的...
vue中echarts3.0自适应的方法
08-27
在 Vue 项目中使用 ECharts 可以快速创建丰富的数据可视化效果。然而，在使用 ECharts 时，如何使图表自适应浏览器窗口的尺寸变化是一个常见的问题。下面将介绍两种常见的 ECharts 自适应方法，以便于 Vue 开发者更...
vue使用echarts图表自适应的几种解决方案
01-18
多个图表自适应写法比较麻烦（当一个页面的图表太多时，这样写法不是很灵活）； let myChart1 = echarts.init(document.getElementById(dom1)) let myChart2 = echarts.init(document.getElementByI
echarts自定义x轴-分时天月年自定义
09-27
完全小白就不要看了，容易看迷，涉及到公司的一些东西，里面代码有删减，但是整理一下肯定是能用的，方法抽出来了，可以借鉴一下适当修改应该都能用。这个实现的功能就是echarts x轴自定义时间段显示，自适应分时天月年显示，其他类似根据时间合并也可以用
【JavaScript源代码】vue使用echarts图表自适应的几种解决方案.docx
12-29
vue使用echarts图表自适应的几种解决方案 　1.使用window.onresize　let myChart = echarts.init(document.getElementById(dom))　window.onresize = function () {　myChat.resize()　}　优点：可以根据窗口大小...
vue3 Echarts自定义组件自适应
qq_40920553的博客
07-22 1517
在vue项目中实现echarts图表的自适应，F12控制台拖动页面，无需刷新，echarts图表自动适应适配屏幕，封装一个组件，通过props传递不同的数据实现不同样式的图表。
echarts5.0 x轴为时间轴（time），按6小时 12小时 24小时分割
weixin_40624809的博客
12-18 9392
如图 一：6小时分割 intervalNum =12 xAxis: { type: "time", min:min, max:today, //today为当前时间按小时取整。 如14:00 show: true, minInterval: 3600 * intervalNum * 1000, //12 axisLabel:{ show:true, s
echarts 常见功能，刻度自适应，位置移动，图例，刷新，自适应等问题
陈序员的博客
09-17 2623
曲线数据最大值最小值自适应解决方法: （注意：只在数值轴中（type:‘value’）中有效） yAxis: { scale:true,根据数据自适应最大值最小值 }, 或者：手动设置 yAxis: { max:100, //刻度最大值 min:1,//刻度最小值 }, 图表自适应页面的方法： window.addEventListener("resize", () => { myChart.resize();//resize 页面大小改变，调整大小 }); 图表位置调整方
vue 使用echarts 自适应
zhangyubababa的博客
07-27 1033
vue 使用echart 自适应
echarts 图表自适应
weixin_50606255的博客
04-30 1102
首先需要渲染一个图表，例如折线图图表，点这里手把手教你从0到有 完成了一个图表后 在获取dom节点、初始化图表之前，添加如下代码： const WIDTH = 375; //设计稿的大小 var cWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //获取屏幕大小 将跟数据大小有关的地方乘上比例（设计稿大小与屏幕大小的比例），...
echarts在vue中怎么实现自适应布局
06-03
要在Vue中实现Echarts的自适应布局，可以使用Echarts提供的`resize`方法来实现。 具体步骤如下： 1. 在Vue组件中引入Echarts，并将其挂载到组件中。 ``` import echarts from 'echarts' export default { mounted() { this.initChart() }, methods: { initChart() { // 初始化echarts this.chart = echarts.init(this.$refs.chart) // ... } } } ``` 2. 在组件的`mounted`钩子函数中，监听窗口大小的变化，并在窗口大小改变时调用Echarts提供的`resize`方法。 ``` mounted() { // 监听窗口大小的变化 window.addEventListener('resize', this.handleResize) // 初始化echarts this.initChart() }, methods: { handleResize() { // 调用echarts提供的resize方法 this.chart.resize() }, initChart() { // 初始化echarts this.chart = echarts.init(this.$refs.chart) // ... } } ``` 3. 在组件的`beforeDestroy`钩子函数中，记得移除窗口大小变化的监听事件。 ``` beforeDestroy() { window.removeEventListener('resize', this.handleResize) } ``` 这样就可以实现Echarts的自适应布局了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值